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

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

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

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

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

* * *

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