Изображения, хорошие и качественные, являются главным преимуществом сайта. Но основной бедой в использовании изображений является их размер: обычно это не менее 50% от размера сайта и не менее 300 Кб на каждой странице составляются изображения (такой объем информации на мобильном телефоне загружается примерно 1,5 секунды, на стационарном компьютере — 0,2-0,3 секунды).

Что же с ними делать?

Последовательные изображения и PNG

Проблема с размером изображений является уже очень старой и хорошо изученной. Лучшее, что вы можете сделать прямо сейчас, — это использовать progressive (последовательные) JPEG формат для полноцветных изображений (фотографии) и PNG формат для всех других файлов (например, фоновых изображений или иконок).

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

PNG формат за счет максимального сжатия палитры и представления индексированных изображений (с небольшим количеством цветов) может передать даже большое по площади изображение при помощи небольшого объема информации. Это крайне критично для эффективности вашего сайта: если вы не можете ухудшить качество представления информации, то в состоянии свести размер этой информации к минимуму.

«Ленивая» загрузка (lazy load)

Следующим шагом в оптимизации размера загружаемой информации стала загрузка изображений, необходимых только для отображения первого экрана сайта. Например, если у вас каталог с десятками позиций, а на первом экране помещается всего 8 — разумно загрузить сначала только 8 изображений. Это (визуально) сильно ускорит полную загрузку страницы сайта. А когда пользователь покручивает страницу дальше — то загружать все изображения для дальнейших частей страницы. При этом показывать индикатор загрузки на месте загружаемых изображений.

Существует огромное количество решений, так или иначе реализующий этот метод — lazyload — вы легко найдете подходящий вам плагин и сможете его установить. Это такого подхода, однако, есть пара минусов: пользователю приходится ждать при прокрутке страницы, пока загрузятся «отложенные» изображения и реализация плагина может быть не совсем корректной, что приведет к замедлению работы сайта на всех устройствах. Дополнительно, нужно гарантировать доступность изображений в коде страницы для поисковых роботов.

Непростая задача, правда?

Улучшаем lazyload

Существует несколько реализаций lazyload — в частности, unveil — которые обошли первый недостаток: загрузка изображений может быть отложена ровно до того момента, когда мы покажем пользователю «готовый» сайт (обычно это момент готовности структуры страницы — DOMready — но иногда и полная загрузка страницы — onload). И начнем загружать все изображения сразу после этого события. Если пользователь потратит 2-3 секунды на первичное ознакомление с содержимым страницы, то для него загрузка изображений пройдет практически незаметно (браузер уже покажет, что страница готова). Если пользователь все же успеет начать просматривать страницу до того, как у него загрузятся все изображения, то на месте изображений вместо значка от браузера по умолчанию или пустого места будет индикатор загрузки.

Вполне элегантное решение, но его можно улучшить еще, если более тщательно подойти к последовательности загрузки страниц сайта. Рассмотреть, какие виджеты и когда загружаются: чтобы они не вклинились в процесс загрузки изображений. Расположить изображения на 1-2 поддоменах, если их больше 30 — так будет положительных эффект от параллельной загрузки изображений. Возможно, часть изображений перенести на событие полной загрузки, а часть — на событие готовности структуры страницы. В общем, исследовать процесс загрузки сайта более детально и оптимизировать пользовательское восприятие — чтобы сайт выглядел реактивным.

Пред-загрузка изображений (prefetch)

Техническое сообщество на этом не остановилось и пошло в оптимизации процесса загрузки изображений дальше. Что если мы можем предугадать следующее пользовательское действие на сайте — и сразу загрузить требуемые ресурсы (а смые значительные из них — это изображения)? Как это можно сделать?

Техника предварительной загрузки изображений (preload или prefetch) активно используется в различных галереях изображениях — например, Яндекс.Фотки — пока вы просматриваете одно изображения, браузер уже загружает два-три предыдущих и два-три следующих. И покажет их практически моментально после перехода назад или вперед. И это будет реактивно!

Для интернет-магазина можно использовать ту же технику при просмотре отдельных товаров — подгружая сразу изображения из галереи или похожих товаров из рекомендательного сервиса. Это сократит объем передаваемой информации от сайта к пользователю после перехода по новой ссылке и визуально ускорит сайт.

Заключение и список действий

Итак, масса полезной информации. Что же конкретно делать? Вам нужно пройти по следующему списку и проверить, все ли у вас на сайте хорошо. Если нет — то принять соответствующие меры:

1. Полноцветные изображения создаются в последовательных JPEG? Если нет и можно сохранять изображения с потерями качества, то нужно настроить этот формат.
2. Все остальные изображения в PNG? Если нет, то нужно настроить именно этот формат. Дополнительно рекомендуется оптимизировать PNG изображения пакетно или при помощи сервисов.
3. Все ли изображения отображаются в естественных размерах? Часто физические размеры (высота и ширина) у изображения больше размера видимого изображения. Это приводит к рудиментам по качеству и заставляет загружать значительно больше данных, чем нужно. Измените размеры изображений к используемым на сайте (если нужно, создайте дубликаты в других размерах).
4. Изображений на странице больше 20 и они не помещаются на первых двух экранах? Нужно использовать какое-либо решение lazyload для сокращения объема первоначально загружаемой информации.
5. На сайте кроме изображений используется несколько виджетов и кодов статистики? Проверьте диаграмму загрузки сайта и убедитесь, что ценные изображения при отложенной загрузке передаются пользователю в первую очередь.
6. Нужно максимально ускорить сайта, и все пункты уже сделаны? Настройте предварительную загрузку изображений при переходах по страницам сайта. Изучите сценарии использования сайта — и подстройте логику загрузки изображений под них.

Это, в принципе, все. Стоит напомнить, что Айри автоматически приводит изображения к минимальному размеру и наилучшему формату без потери качества, а также может динамически выставить правильные размеры для изображений и отложить их загрузку.