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

34 комментария

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

Dimox
31 октября 2007 г. в 11:30
Константин, да, все иконки в одно изображение – это очень разумно. Тоже где-то читал об этом.
Mons
2 июня 2008 г. в 17:43
А чем плохо использование той же явы для этой же цели ?
Вроде там onmouseover и т.п
Dimox
2 июня 2008 г. в 19:07
Mons, зачем загружать сайт лишними скриптами, если это легко реализуется через CSS?
art
3 июня 2008 г. в 02:52
на некоторых сайтах использую подрузгу картинок через js и смену через onmouseover — много писанины, надо убирать. в метод через css раньше не вникал, но тепер вижу как все просто
все иконки в одном файле видел и где-то на сервисах гугля
ASemenov
4 июня 2008 г. в 13:12
В дизайне моего блога http://asemenov.ru/ используется такой прием. Тема разработана не мной, автор http://ericulous.com/. Вроди во всех моих браузерах отображается корректно.
Метод мне показался забавным, но сам пока не использовал.
Vodka
27 июня 2008 г. в 17: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>
```
Сергей
8 июля 2008 г. в 10:24
интересная статья, хоть это все и так знаю, но расписано все очень ясно! respect тому кто ведет сайт!
Юрий
3 августа 2008 г. в 00:38
Да, тоже встречал много раз использование данного приема. Очень пригождается)
Danch
1 декабря 2008 г. в 16:41
Понравился аналогичный прием от Vodka… в этом случае хотябы при отключенных стилях остаются просто текстовые ссылки! Интересно… поисковые системы не зачтут этот метод за “черный”???! Там ведь текст наглым образом стилями скрывается… как это обычно делают с ключевыми словами ;))

Что можно сделать, чтобы при отключенных картинках там хоть что-нибудь было (название ссылки), а не пустое место??
Pavel
24 апреля 2009 г. в 01:56
Блин а вариант с пред загрузкой картинок как?
Тот что описан очень неподходит, для смены картинок особенно если картинка бешенных размеров.
Куда интересней вариант, загрузки стандартных картинок, и как только сайт полностью подгрузился и человек думает куда мышь навести, в это время в тихую подгружаются картинки на замену.
Тимур
10 августа 2009 г. в 12:24
```
#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">
1. Vodka
  10 августа 2009 г. в 20:53 / ответ на коммент Тимур
  Возможно потому, что Ваша картинка для hover расположена снизу, а не справа
2. Dimox
  11 августа 2009 г. в 08:50 / ответ на коммент Тимур
  У меня этот код прекрасно работает. Может быть вы смотрите в IE6, который не поддерживает :hover для не ссылок.
  1. Тимур
    11 августа 2009 г. в 09:56 / ответ на коммент Dimox
    Не понимаю в чем дело.. В опере работает, 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/ эта фишка у меня срабатывает! Что то дополнительно нужно наверно
    
    Dimox
    11 августа 2009 г. в 10:15 / ответ на коммент Тимур
    Неправильный доктайп используете, поэтому и не работает в ИЕ.
    
    Нужен вот такой:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Тимур
10 августа 2009 г. в 21:28
Я ничего не менял в коде, взял с сайта (http://reformal.ru) как есть.

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

Код в этой статье у меня работает.
1. Sync
  11 августа 2009 г. в 17:16 / ответ на коммент Тимур
  Где вы видели на этом (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 псевдоклас ховер работает только на ссылки
  1. Тимур
    11 августа 2009 г. в 19:09 / ответ на коммент Sync
    Нажмите ссылки “Регистрация” или “Войти” там это инпутом сделано.
    
    Доктайп я поменял, все работает теперь. До недавнего времени я вообще без него обходился ) Версткой профессионально не увлекаюсь, но сейчас наверно буду :)
    
    Я использую простой HTML а не XHTML, такой доктайп на валидность наверно повлияет?
    
    Sync
    12 августа 2009 г. в 00:14 / ответ на коммент Тимур
    Вот, теперь увидел что вы имели ввиду, но на том сайте применяется 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 ">
    
    прогуглите и вы обязательно найдете полные доктайпы на все случаи
Cramer
14 февраля 2010 г. в 17:48
http://wp-themes.com/mystique/?TB_iframe=true&width=1162&height=567 (справа внизу в блогролле синяя ссылка с серой стрелочкой при наведени стрелка менят цвет)Как это сдлеать обьясниет пожалуйста.
1. Dimox
  15 февраля 2010 г. в 10:00 / ответ на коммент Cramer
  Вот так делается.
Sam
3 марта 2010 г. в 00:29
Респект автору поста, как раз у меня появился поврос, а тут и решение рядом :) спасибо!
Артем
22 июля 2011 г. в 22:02
Здравствуйте. Корректен ли способ 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>
```
Можете обьяснить что не так?
1. Dimox
  23 июля 2011 г. в 10:29 / ответ на коммент Артем
  Ошибка здесь:
  
  a.main_button : hover {background-position:bottom;}
  
  Должно быть так:
  
  a.main_button:hover {background-position:bottom;}
  1. Артем
    23 июля 2011 г. в 15:28 / ответ на коммент Dimox
    Огромное спасибо все вышло. Отличный сайт и помощь оперативна))
Barabawka
27 января 2012 г. в 15:56
Спасибо автору, все ясно, доступно и с примерами как раз для чайника вроде меня :) У себя в блоге на блоггере только и пользуюсь теперь таким методом все работает без проблем. Еще раз спасибо.
О Тебе Волнуется
13 ноября 2012 г. в 11:47
Отличный урок и фишка хоть и я знал об этой фишке но как сделать)точно не знал)..спасибо очень нужен был этот эффект
О Тебе Волнуется
13 ноября 2012 г. в 11:50
ну и в добавок не забывать в css свойство a (decoration) сделать none чтобы выделения не было)..ато стремно выглядит,ну не суть но просто в добавок)…
Гульнур
18 июня 2013 г. в 20:47
Здравствуйте! Все получилось,но у меня вот такая проблемка. Мне нужно разместить на одной странице сайта несколько таких изображений. А при размещении скрипта на Style.css показывается только первое изображение. Очень прошу помогите пож-та.Спасибо!
Феликс
29 ноября 2013 г. в 11:06
Первый способ лучше если используется анимация css3 transition !

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

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

Смотрите также

Простая техника позиционирования изображения при обтекании текстом

5 советов верстальщику

Добавляем иконку предзагрузки к большим изображениям при помощи CSS

Альтернативный текст для графики при использовании CSS

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

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