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

Интересная статьи с rotorweb.ru.

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

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

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

Эксперимент

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

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

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

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

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

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

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

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

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

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

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

Как

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

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

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

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

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

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

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

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

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

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

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

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

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

  • LadimirZhdanov

    Я что-то подобное у себя публиковал.

Запись навигация

Top