Психология пользователей и оптимизация изображений для веб

Иллюстрация к статье «Психология и оптимизация изображений для веб»

На мысль поэкспериментировать со способом оптимизации изображений для сети, натолкнул отчёт моих коллег по работе, побывавших на usability-семинаре Джеффа Джонсона в рамках конференции UserExperience '08.

Наверное, многие замечали, что изображения на страницах грузятся по-разному. Одни загружаются построчно, и создаётся впечатление что они грузятся сверху-вниз. Другие же грузятся сразу полным размером, но в «размытом» состоянии и постепенно детализируются.

Первый вариант получается, когда изображения просто сохраняются, а второй, когда при сохранении используется «прогрессивная развёртка». Какой способ сохранения лучше?

Эксперимент

Проведём небольшой эксперимент. Перейдите по двум ссылкам ниже (со сверхскоростным интернетом опыт не получится) и ответьте для себя на вопрос: «какая из картинок загружается быстрее?»

Ссылки: тест1 и тест2.

Результаты, которые я получил разослав ссылки своим подопытным кроликам друзьям и коллегам:

  • первый вариант — 9 человек;
  • второй вариант — 1 человек;
  • никакой вариант — 2 человека (буржуи на толстых каналах, у которых картинки грузились предательски быстро);
  • «задолбал ты со своими опытами!» — 2 человека.

Всего: 14 человек. Немного, но больше у меня испытателей не нашлось. Своими результатами вы можете поделиться в комментариях.

Военная тайна

Теперь раскрою секрет: оба изображения загружались одинаковое время, так как (в идеальных условиях) ваша скорость соединения была постоянной, а размер обеих картинок один и тот же — 290,8 KB. В первом случае изображение было сохранено с прогрессивной развёрткой, во втором — без.

А кажущаяся разница в скорости загрузки заключается в том, что в первом случае, мы заранее можем угадать предмет по очертаниям и контурам, не дожидаясь полной детализации картинки.

Люди, за которыми я наблюдал, всегда говорили, что изображение уже загружено, хотя индикатор загрузки на закладке или в статус-строке браузера ещё показывал, что процесс не закончен.

А во втором случае, мы чётко видим, сколько ещё нужно грузиться картинке, чтобы процесс полностью завершился. Обычно это видно по расстоянию между верхней и нижней границами рамки, в которую заключено изображение в браузерах по умолчанию.

Поэтому напрашивается очевидный вывод: можно создать у пользователя иллюзию, что страница загружается намного быстрее, используя метод прогрессивной развёртки при сохранении изображений.

Как

Теперь о мелочах, как сохранять.

Для этого достаточно просто поставить по галочке в диалоговом окне Save For Web & Devices в Photoshop для каждого формата:

Сохранение JPEG с прогрессивной развёрткой

Это для JPEG. Для форматов GIF и PNG есть аналог прогрессивной развёртки — чересстрочная развёртка, которая, по сути, даёт тот же результат.

Сохранение GIF с прогрессивной развёрткой

Сохранение JPEG с прогрессивной развёрткой

Вроде бы полезная мелочь, о которой должны знать все, кто хоть раз открывал в самоучителе по Photoshop главу «Оптимизация изображений для Web». Но тем не менее не все используют. Да и я тоже, не всегда.

У кого есть пробелы в знаниях опций в диалоговых окнах по сохранению в различные форматы, советую почитать про особенности сохранения изображений для Internet. Ну а кому интересно узнать особенности реализации форматов, то у меня не получится рассказать лучше, чем это сделал Артемий Ломов.

Что? Где? Когда?

Собственно, когда стоит и когда не стоит использовать.

Использовать везде, где есть большое скопление картинок на странице. По указанным выше причинам, пользователь уже тогда будет пользоваться страницей, когда полная загрузка еще не закончится.

Из противопоказаний: не стоит использовать в различных фотостоках и галереях, где изображения предназначены именно для скачивания, чтобы не терять в качестве. Пользователи и так дождутся окончания загрузки, только не забудьте сделать превьюшки, чтобы было удобно ориентироваться при поиске изображений.

Минусом может послужить то, что развёртка слегка увеличивает размер изображения, но я не заметил существенной разницы. Да и «быстрая» загрузка компенсирует пару лишних килобайт.

* * *

Сканер блогов:

Мужское и женское usability-начало на примере сайта Билайн :) Учитывайте пользователей с ограниченными возможностями при создании сайта.

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 15

  1. Zodios, 29.11.2008 в 21:53

    Спасибо за заметку. Для меня это было открытием. Как работает черезстрочная развертка я знаю, а вот как прогресивная не понял. Изображение загружается сразу и потом обретает четкость?

    Ответить

  2. rotor, 30.11.2008 в 0:01

    Да не за что, рад, что оценили.

    Прогрессивная развертка работает примерно так: изображение сначала загружается с низкой детализацией (и сразу отображается в браузере), что требует малого веса и времени загрузки, а потом постепенно догружаются более детализированные области. Получается, что все догружаемые данные накладываются на предыдущие.

    Весь секрет в применяемых алгоритмах обработки, которые разбивают процесс загрузки изображения на несколько частей в зависимости от коэффициента сжатия различных областей.

    Это если простыми словами. Ну а если есть желание «поломать мозг» то загляните в Википедию.

    Ответить

  3. Octane, 30.11.2008 в 0:59

    С фоновыми изображениями не во всех браузерах прокатывает такой фокус :- (

    Ответить

  4. Lekz, 30.11.2008 в 1:13

    «Превый вариант» тут наверно ошибочка

    Ответить

  5. Блог заядлого интЕрнетчика ™ » Blog Archive » The BOBs. Объявлены победители., 30.11.2008 в 1:32

    [...] странице. Интересное для блогеров: Rotor написал пост — Эксперимент с оптимизацией изображений для веб. Алексей Качаев советует — Как писать в блог так, чтобы [...]

    Ответить

  6. rotor, 30.11.2008 в 2:41

    Не прокатывает еще и с картинками в 6-ом эксплорере. Но надо надеяться на лучшее :)

    Lekz, спасибо. Исправил.

    Ответить

  7. Светлана, 01.12.2008 в 12:36

    Отлично, пригодится на практике.

    Убедительный эксперимент и выводы. Интересно, на картинках небольшого размера все равно будет эффект?

    Спасибо за содержательные ссылки.

    А на блоге — зима! Изменился footer, и словно свежее стало. Тоже беру на заметку!

    Ответить

  8. rotor, 01.12.2008 в 15:34

    Светлана, развёртка будет работать на картинках любого размера. Просто маленькие изображения быстрее грузятся, поэтому эффект может быть не всегда заметен.

    Ну, а про «погоду в блоге», и как это прикрутить к WordPress, я писал тут. Можете использовать в своих проектах.

    Ответить

  9. Светлана, 01.12.2008 в 17:04

    Мне наверное проще будет загрузить новую картинку дл подвальчика, ежеквартально, чем с PHP разбираться :)

    А вот по подготовке изображений — очень пригодятся советы, когда до галереи доберусь. Спасибо!

    Ответить

  10. Bus, 04.12.2008 в 19:22

    Не пойму в чём дело, но у меня тока 2 картинки загрузилось. ((( А ваще понравились! :)

    Ответить

  11. Дедушка, 31.01.2009 в 1:09

    Очень познавательно, спасибо. Я думал, что это особенности браузеров...

    Ответить

  12. @ Ярослав, 07.04.2010 в 20:54

    Интересно. Мне лично показалось, что 1-я быстрее загрузилась. (Может обман зрения?). А вещь полезная. Надо будет испробовать. Спасибо.

    Ответить

  13. Сергей, 18.03.2014 в 13:34

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

    Ответить

Есть что сказать?