Оптимизация: используем одно изображение вместо двух

Нашел в сети ссылку на пост буржуйского блога, опубликовавшего заметку “Using Fewer Images” (использование меньшего количества изображений). Данный способ оптимизации для меня, как веб-мастера, явился весьма оригинальным и интересным, в связи с чем хочу поделиться информацией с читателями моего блога. Не отрицаю, что найдутся те, ...

Комментарии (34)

  1. Давно пользуюсь этим приемом, но есть и недостатки
    замечал что в ФФ какой то версии и в Safari такие ссылки могут вести себя не коректно, например изображение в hover двигается не нужное расстояние, это в Safari, а в ФФ отображалось изображение hover а другой строке.
    Так что нужно проверять

  2. Да, несомненно, все, что сотворено с помощью CSS, нужно проверять на кроссбраузерность.

  3. Отличный прием, спасибо — беру на вооружение..
    Код нормально работает в Firefox 2.0.0.6, Opera 9.23, Safari 3.0.3 (522.15.5) под Windows XP, на других версиях не смотрел. В бесплатных браузерах (за исключением IE) по-моему достойны внимания только последние версии

  4. Константин
    12 лет назад

    Тоже пользуюсь этим приемом.

    Артемий Лебедев пошел дальше — он предлагает все мелкие иконки сайта запихивать в одно большое изображение и позиционировать нужную иконку с помощью CSS.

    Кажется на Яндексе так и сделано.

  5. Константин, да, все иконки в одно изображение — это очень разумно. Тоже где-то читал об этом.

  6. А чем плохо использование той же явы для этой же цели ?
    Вроде там onmouseover и т.п

  7. Mons, зачем загружать сайт лишними скриптами, если это легко реализуется через CSS?

  8. на некоторых сайтах использую подрузгу картинок через js и смену через onmouseover — много писанины, надо убирать. в метод через css раньше не вникал, но тепер вижу как все просто
    все иконки в одном файле видел и где-то на сервисах гугля

  9. В дизайне моего блога http://asemenov.ru/ используется такой прием. Тема разработана не мной, автор http://ericulous.com/. Вроди во всех моих браузерах отображается корректно.
    Метод мне показался забавным, но сам пока не использовал.

  10. для данного случая неплохо работает почти такой же вариант, НО…
    если разместить over картинку не сбоку, а снизу, тогда можно написать проще

    
          a.yaprak {
            width: 64px;
            height: 64px;
            background-image: url('yaprak_bw_color.png');
            display: block;
            text-indent: -999em;
            text-decoration: none;
          }
           
          a.yaprak:hover {
            background-position: bottom;
          }
    

    а на странице оформить как

    
    <a class="yaprak">Yaprak.net</a>
    
  11. интересная статья, хоть это все и так знаю, но расписано все очень ясно! respect тому кто ведет сайт!

  12. Да, тоже встречал много раз использование данного приема. Очень пригождается)

  13. Понравился аналогичный прием от Vodka… в этом случае хотябы при отключенных стилях остаются просто текстовые ссылки! Интересно… поисковые системы не зачтут этот метод за «черный»???! Там ведь текст наглым образом стилями скрывается… как это обычно делают с ключевыми словами ;))

    Что можно сделать, чтобы при отключенных картинках там хоть что-нибудь было (название ссылки), а не пустое место??

  14. Блин а вариант с пред загрузкой картинок как?
    Тот что описан очень неподходит, для смены картинок особенно если картинка бешенных размеров.
    Куда интересней вариант, загрузки стандартных картинок, и как только сайт полностью подгрузился и человек думает куда мышь навести, в это время в тихую подгружаются картинки на замену.

  15. #enter_button {
    	BORDER-RIGHT: medium none; BORDER-TOP: medium none; BACKGROUND: url(http://reformal.ru/i/enter_button.gif) no-repeat; MARGIN-LEFT: 7px; BORDER-LEFT: medium none; WIDTH: 132px; CURSOR: pointer; BORDER-BOTTOM: medium none; HEIGHT: 35px
    }
    #enter_button:hover {
    	BACKGROUND-POSITION: 0px -35px
    }

    Почему у меня это не работает ? Увидел на другом сайте где это работает..

    <input id="enter_button" value=" " type="submit">

    • Возможно потому, что Ваша картинка для hover расположена снизу, а не справа

    • У меня этот код прекрасно работает. Может быть вы смотрите в IE6, который не поддерживает :hover для не ссылок.

      • Не понимаю в чем дело.. В опере работает, IE у меня седьмой.

        Сделал тестовый файл

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
        
        <html>
        <head>
        	<title>ТЕСТ</title>
        
        	
        <style  type="text/css">
        #enter_button 
        {
         BORDER-RIGHT: medium none; BORDER-TOP: medium none; BACKGROUND: url(enter_button.gif) no-repeat; MARGIN-LEFT: 7px; BORDER-LEFT: medium none; WIDTH: 132px; CURSOR: pointer; BORDER-BOTTOM: medium none; HEIGHT: 35px
        }
        #enter_button:hover 
        {
          BACKGROUND-POSITION: 0px -35px
        }
        </style>
        </head>
        <body>
        
        
        <input id="enter_button" value=""   type="submit">
        
        
        </body>
        </html>

        На сайте http://reformal.ru/ эта фишка у меня срабатывает! Что то дополнительно нужно наверно

  16. Я ничего не менял в коде, взял с сайта (http://reformal.ru) как есть.

    Такое чувство что просто не срабатывает событие hover . Может для input та что то дополнительно надо писать?

    Код в этой статье у меня работает.

    • Где вы видели на этом (http://reformal.ru) сайте инпут сабмит с меняющимся бекграундом? Если имеете ввиду оранжевую кнопку «создать» то она сделана не инпутом а ссылкой

      <a href="#">создать</a>

      Используйте доктайп «современный»

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

      ну или Transitional и все будет работать в ие7+, в ие6 псевдоклас ховер работает только на ссылки

      • Нажмите ссылки «Регистрация» или «Войти» там это инпутом сделано.

        Доктайп я поменял, все работает теперь. До недавнего времени я вообще без него обходился ) Версткой профессионально не увлекаюсь, но сейчас наверно буду :)

        Я использую простой HTML а не XHTML, такой доктайп на валидность наверно повлияет?

        • Вот, теперь увидел что вы имели ввиду, но на том сайте применяется XHTML, конечно повлияет на валидность. Но я например верстаю недавно (около года), и естесственно сразу начал верстать XHTML в стрикте. И когда иногда приходится верстать HTML, то проблем невозникает, разве теги по привычке позакрываю

          <input type="submit" value="submit" />

          но после проверки на валидность быстренько поправляю ситуацию
          Можете использовать и XTML, в ие7 все прекрасно работает, только указывайте полный доктайп

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd
          ">

          прогуглите и вы обязательно найдете полные доктайпы на все случаи

  17. http://wp-themes.com/mystique/?TB_iframe=true&width=1162&height=567 (справа внизу в блогролле синяя ссылка с серой стрелочкой при наведени стрелка менят цвет)Как это сдлеать обьясниет пожалуйста.

  18. Респект автору поста, как раз у меня появился поврос, а тут и решение рядом :) спасибо!

  19. Здравствуйте. Корректен ли способ Vodka. Чтото у меня не получается — картинка остается статичной.

    
    a.main_button {
             width: 175px;
             height: 30px;
             background-image: url(img/main.png);
             display: block;
             text-indent: -999em;
             text-decoration: none;
           }
            
    a.main_button : hover {background-position:bottom;}
    

    и php код

    <a href="index.php" rel="nofollow"></a>

    Можете обьяснить что не так?

  20. Спасибо автору, все ясно, доступно и с примерами как раз для чайника вроде меня :) У себя в блоге на блоггере только и пользуюсь теперь таким методом все работает без проблем. Еще раз спасибо.

Ваш комментарий