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

Нашел в сети ссылку на пост буржуйского блога, опубликовавшего заметку “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;
}

Используется всего лишь одно изображение:

Конечный результат получается следующим:

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

* * *

Хочешь выделиться из «серой» толпы людей? Это очень просто — прикольные футболки с надписям по любому заставят окружающих обратить на тебя внимание =) Выбери одну из множества готовых или создай свою.

Комментарии (34)
  1. 1
    О Тебе Волнуется

    Отличный урок и фишка хоть и я знал об этой фишке но как сделать)точно не знал)..спасибо очень нужен был этот эффект

  2. 2
    О Тебе Волнуется

    ну и в добавок не забывать в css свойство a (decoration) сделать none чтобы выделения не было)..ато стремно выглядит,ну не суть но просто в добавок)…

  3. 3
    Гульнур

    Здравствуйте! Все получилось,но у меня вот такая проблемка. Мне нужно разместить на одной странице сайта несколько таких изображений. А при размещении скрипта на Style.css показывается только первое изображение. Очень прошу помогите пож-та.Спасибо!

  4. 4
    Феликс
    @

    Первый способ лучше если используется анимация css3 transition !

    При использовании css3 transition в первом случаем будет transition: background 0.6s;, картинка плавно меняется при наведении и наоборот. А вот во втором случае transition: background-position 0.6s;, картинка плавно приезжает со стороны в сторону, смотря как склеены.

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