Главная CSS-верстка

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

Нашел в сети ссылку на пост буржуйского блога, опубликовавшего заметку «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. О Тебе Волнуется
    11 лет 4 месяца назад

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

  2. О Тебе Волнуется
    11 лет 4 месяца назад

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

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

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

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

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