Сжатие изображений — это один из способов ускорения загрузки сайта. Сделать изображения более «легкими» можно как уменьшив их физический размер в пикселях, так и путём выбора используемого формата и оптимизации параметров сохранения.
На «широких» каналах размер изображений на сайте на скорость загрузки сайта влияет не очень сильно, но для пользователей, просматривающих сайт через мобильный интернет (EDGE или 3G), большие изображения могут быть проблемой. На посещаемых сайтах также могут быть сложности с загрузкой канала сервера — неоптимизированные изображения могут существенно сказываться на объёме трафика (это проблема, если он платный) или просто «забивать» канал.
Основых способа сокращения «веса» изображений всего три — уменьшение размера в пикселях, выбор формата, настройка и оптимизация параметров сохранения.
На уменьшении размера в пикселях подробно останавливаться не будем, это очень простой в применении способ.
Если изображение показывается на сайте в небольшом размере (как иконка, например), то нет смысла передавать его пользователю в размере для печати на A0 с разрешением 300 DPI.
Обычная практика — размер изображения должен для обычных экранов совпадать с размером контейнера, а в случае с дисплеями с высокой плотностью пикселей — быть больше размера контейнера в 2-3 раза. То есть на уровне подготовки изображений всё просто — мы знаем размер контейнера и легко можем подготовить файлы необходимого размера. А на уровне вёрстки на HTML с использованием CSS при работе с адаптивными сайтами задача решается при помощи медиа‑запросов CSS, аттрибутов srcset и sizes у тега img или использованием тега picture с ещё более гибкой настройкой.
В зависимости от типа изображений выбор формата может иметь большое значение. Из «классических» форматов для сжатия фотографий больше подходит JPEG, для рисунков, схем и других простых иллюстраций больше подходит PNG. Из недавно появившихся новых форматов изображений стоит обратить внимание на AVIF и WebP — AVIF больше подходит для фотографий, а WebP достаточно универсален. Новые форматы поддерживаются только в современных браузерах, но их поддержка на сегодняшний день уже досточно хороша.
Фотографии и другие многоцветные изображения (с тенями и с градиентами) лучше всего сохранять и сжимать в формате JPEG или использовать более современные форматы — WebP или AVIF, если браузер клиента их поддерживает.
Иллюстрации с небольшим количеством используемых цветов (логотипы, иконки, схемы) лучше всего сохранять и сжимать в формате PNG или использовать более современный формат — WebP, если браузер клиента его поддерживает.
В случае логотипов, иконок, рисунков и схем также стоит посмотреть в сторону SVG — векторного формата изображений для сайтов. Если изображение возможно преобразовать в «вектор», то сделать это — хорошая идея.
Параметры сохранения есть у каждого из форматов. И они тоже важны. Например, при сохранении в JPG есть возможность указать уровень качества. Как правило, разница между самым высоким качеством (100%) и просто высоким (90%) визуально не заметна, а вот на размере файлов сказывается весьма существенно. Тоже самое касается и настроек сохранения изображений в других форматах — размер цветовой палитры в PNG8 и GIF, прогрессивные JPЕG и т.д. Также существуют алгоритмы оптимизации этих параметров и программы, осуществляющие эту оптимизацию в автоматическом режиме.
Файлы изображений часто содержат избыточную мета‑информацию: например, информацию о том, где снята фотография, на какую камеру, с какими параметрами съёмки и т.д. Мета‑данные изображений почти никогда не нужны при публикации на сайте, а удаление этих данных не сказывается на качестве изображения, но может сократить размер файлов.
Правильный выбор формата и сжатие (даже lossless — без потери качества) позволяет сократить размер файлов в среднем на 20-30%, а в некоторых случаях и в разы.
Тематические статьи
Выбор правильного формата изображения — ключевой аспект оптимизации веб‑страниц. От него зависят скорость загрузки, качество контента и пользовательский опыт. Рассмотрим популярные форматы, поддерживаемые современными браузерами, их особенности и сферы применения.
Изображения на сайтах могут адаптироваться как под разрешение экрана устройства для корректного отображения на мобильных устройствах, так и под экраны с высоким DPI для более детализированного отображения. Есть несколько вариантов реализации адаптивных изображений, отличаются они по сложности реализации, кроссбраузерностью и по создаваемой нагрузке на интернет-соединение. Рассмотрим самые распространённые.
JPEG и PNG — это два основных формата для изображений, которые используются на сайтах. В некоторых случаях лучше использовать JPEG, а в некоторых — PNG. Неверный выбор формата обычно приводит к кратному возрастанию размера изображения и, следовательно, к долгой загрузке изображений на медленном интернет-канале (мобильный интернет, например).
Кеширование статических ресурсов (картинок, скриптов, стилей) и неизменяющихся страниц на стороне браузера может сэкономить время загрузки страниц, если пользователь посещает сайт многократно или при посещении просматривает несколько страниц, которые используют одинаковые ресурсы.
Бывает так, что некоторое содержание страницы нужно не всем или не всегда, но на генерацию этого материала или для его передачи тратится много ресурсов. В этом случае имеет смысл сделать загрузку «ленивой», то есть не генерировать и не загружать в браузер информацию до тех пор, пока она не понадобится.