Сжатие изображений для сайтов с потерями и без потерь
Сжатие изображений — это один из способов ускорения загрузки сайта. Сделать изображения более «легкими» можно как путём уменьшения их физического размера в пикселях, так и путём выбора используемого формата и оптимизации параметров сохранения.
На «широких» каналах размер изображений на сайте не очень сильно влияет на скорость загрузки сайта, но для пользователей, просматривающих сайт через мобильный интернет (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 — векторный формат изображений для сайтов
В случае логотипов, иконок, рисунков и схем также стоит посмотреть в сторону SVG — векторного формата изображений для сайтов. Если изображение возможно преобразовать в «вектор», то сделать это — хорошая идея.
Оптимизация параметров сохранения
Параметры сохранения есть у каждого из форматов. И они тоже важны. Например, при сохранении в JPG есть возможность указать уровень качества. Как правило, разница между самым высоким качеством (100%) и просто высоким (90%) визуально не заметна, а вот на размере файлов сказывается весьма существенно. То же самое касается и настроек сохранения изображений в других форматах — размер цветовой палитры в PNG8 и GIF, прогрессивные JPEG и т.д. Также существуют программы, которые оптимизируют эти параметры в автоматическом режиме.
Файлы изображений часто содержат избыточную мета‑информацию: например, информацию о том, где снята фотография, на какой камере, с какими параметрами съёмки и т.д. Мета‑данные изображений почти никогда не нужны при публикации на сайте, а удаление этих данных не сказывается на качестве изображения, зато может сократить размер файлов.
Правильный выбор формата и сжатие (даже lossless — без потери качества) позволяют сократить размер файлов в среднем на 20-30%, а в некоторых случаях и в разы.
Программы для сжатия изображений для Windows:
- Caesium
- FileOptimizer
- jStrip
- OptiPNG
- PNGOUTWin
Программы для сжатия изображений для MacOS & Linux:
- ImageOptim (только MacOS)
- JPEGmini (только MacOS)
- PNGOUT
- AdvPNG
- Pngcrush
- OptiPNG
- JpegOptim
- jpegrescan
- jpegtran
- Gifsicle
Тематические статьи
Выбор правильного формата изображения — ключевой аспект оптимизации веб‑страниц. От него зависят скорость загрузки, качество контента и пользовательский опыт. Рассмотрим популярные форматы, поддерживаемые современными браузерами, их особенности и сферы применения.
Изображения на сайтах могут адаптироваться как под разрешение экрана устройства для корректного отображения на мобильных устройствах, так и под экраны с высоким DPI для более детализированного отображения. Есть несколько вариантов реализации адаптивных изображений, отличаются они по сложности реализации, кроссбраузерностью и по создаваемой нагрузке на интернет-соединение. Рассмотрим самые распространённые.
JPEG и PNG — это два основных формата для изображений, которые используются на сайтах. В некоторых случаях лучше использовать JPEG, а в некоторых — PNG. Неверный выбор формата обычно приводит к кратному возрастанию размера изображения и, следовательно, к долгой загрузке изображений на медленном интернет-канале (мобильный интернет, например).
Кеширование статических ресурсов (картинок, скриптов, стилей) и неизменяющихся страниц на стороне браузера может сэкономить время загрузки страниц, если пользователь посещает сайт многократно или за визит просматривает несколько страниц, которые используют одинаковые ресурсы.
Бывает так, что часть содержимого страницы нужна не всем или не всегда, но на генерацию или передачу этого материала тратится много ресурсов. В этом случае имеет смысл сделать загрузку «ленивой», то есть не генерировать и не загружать в браузер информацию до тех пор, пока она не понадобится.