Оптимизация: используем одно изображение вместо двух
Нашел в сети ссылку на пост буржуйского блога, опубликовавшего заметку “Using Fewer Images” (использование меньшего количества изображений).
Данный способ оптимизации для меня, как веб-мастера, явился весьма оригинальным и интересным, в связи с чем хочу поделиться информацией с читателями моего блога. Не отрицаю, что найдутся те, кто данную фишку уже давно используют, поэтому такие могут смело пропускать данный пост. Остальным же читать и брать на вооружение.
Итак…
Для получения эффекта изменения изображения при наведении на него курсора обычно используется две картинки: одна – для положения «по умолчанию», вторая – для положения “hover”, когда курсор наведен на изображение. Тем не менее, есть один способ с применением всего лишь одного изображения, который имеет некоторые преимущества.
Вот как данный эффект реализуется обычно.
HTML-код может выглядеть примерно следующим образом:
- <a href="#" id="yaprak"> </a>
Соответствующий CSS будет содержать следующие стили:
- a#yaprak {
- width: 64px;
- height: 64px;
- background-image: url('yaprak_bw.png');
- display: block;
- text-decoration: none;
- }
- a#yaprak:hover {
- background-image: url('yaprak_color.png');
- }
Два отдельных изображения для двух соответствующих состояний должны быть загружены на сервер и могут выглядеть, например, так:
Конечный результат будет следующим:
Дефолтовое изображение, видимое пользователю – это черное-белое изображение (файл yaprak_bw.png). При наведении курсора оно меняется на полноцветное изображение yaprak_color.png.
Однако, если пользователь впервые посещает страницу, на которой используется данный эффект, цветное изображение у него еще не закешировалось, в связи с чем может возникнуть заметная задержка при переключении с черно-белого на цветное изображение. Задержка может зависеть от скорости интернет-соединения и загрузки сервера.
Существует несколько методов предзагрузки альтернативных изображений для предотвращения этого неудобства, но есть совсем другой, не менее эффективный способ – вообще не использовать отдельные альтернативные изображения.
Вы можете использовать одно единственное изображение, на котором совмещены картинки в обоих состояниях: дефолтовое и при наведении курсора.
Как это будет реализовано.
HTML-код остается тем же, меняется только CSS, который на этот раз будет выглядеть следующим образом:
- a#yaprak {
- width: 64px;
- height: 64px;
- background-image: url('yaprak_bw_color.png');
- display: block;
- text-decoration: none;
- }
- a#yaprak:hover {
- background-position: -64px 0;
- }
Используется всего лишь одно изображение:
Конечный результат получается следующим:
Таким образом, использование меньшего количества изображений может незначительно ускорить время загрузки Вашего сайта, одновременно уменьшая нагрузку на сервер. Другое, менее значимое преимущество заключается в том, что требуется меньшее число изображений, которые необходимо обслуживать и загружать на сервер.
автор: Dimox | рубрика CSS-верстка | TrackBack
Давно пользуюсь этим приемом, но есть и недостатки
замечал что в ФФ какой то версии и в Safari такие ссылки могут вести себя не коректно, например изображение в hover двигается не нужное расстояние, это в Safari, а в ФФ отображалось изображение hover а другой строке.
Так что нужно проверять
Да, несомненно, все, что сотворено с помощью CSS, нужно проверять на кроссбраузерность.
Отличный прием, спасибо - беру на вооружение..
Код нормально работает в Firefox 2.0.0.6, Opera 9.23, Safari 3.0.3 (522.15.5) под Windows XP, на других версиях не смотрел. В бесплатных браузерах (за исключением IE) по-моему достойны внимания только последние версии
Тоже пользуюсь этим приемом.
Артемий Лебедев пошел дальше - он предлагает все мелкие иконки сайта запихивать в одно большое изображение и позиционировать нужную иконку с помощью CSS.
Кажется на Яндексе так и сделано.
Константин, да, все иконки в одно изображение - это очень разумно. Тоже где-то читал об этом.
А чем плохо использование той же явы для этой же цели ?
Вроде там onmouseover и т.п
Mons, зачем загружать сайт лишними скриптами, если это легко реализуется через CSS?
на некоторых сайтах использую подрузгу картинок через js и смену через onmouseover — много писанины, надо убирать. в метод через css раньше не вникал, но тепер вижу как все просто
все иконки в одном файле видел и где-то на сервисах гугля
В дизайне моего блога http://asemenov.ru/ используется такой прием. Тема разработана не мной, автор http://ericulous.com/. Вроди во всех моих браузерах отображается корректно.
Метод мне показался забавным, но сам пока не использовал.
для данного случая неплохо работает почти такой же вариант, НО…
если разместить over картинку не сбоку, а снизу, тогда можно написать проще
а на странице оформить как
интересная статья, хоть это все и так знаю, но расписано все очень ясно! respect тому кто ведет сайт!
Да, тоже встречал много раз использование данного приема. Очень пригождается)