Сжатие изображений с потерями и без потерь

Сжатие изображений — это один из способов ускорения загрузки сайта. Сделать изображения более «легкими» можно как уменьшив их физический размер в пикселях, так и путём оптимизации параметров сохранения.

На «широких» каналах размер изображений на сайте на скорость загрузки сайта влияет не очень сильно, но для пользователей, просматривающих сайт через мобильный интернет (EDGE или 3G), большие изображения могут быть проблемой. На посещаемых сайтах также могут быть сложности с загрузкой канала сервера — неоптимизированные изображения могут существенно сказываться на объёме трафика (это проблема, если он платный) или просто «забивать» канал.

Основых способа сокращения «веса» изображений всего два — уменьшение размера в пикселях и выбор параметров сохранения.

Уменьшение размера в пикселях

На уменьшении размера в пикселях подробно останавливаться не будем, это очень простой в применении способ.

Если изображение показывается на сайте в небольшом размере (как иконка, например), то нет смысла передавать его пользователю в размере для печати на A0 с разрешением 300 DPI.

Обычная практика — размер изображения должен для обычных экранов совпадать с размером контейнера, а в случае с дисплеями с высокой плотностью пикселей — быть больше размера контейнера в 2 раза. То есть на уровне подготовки изображений всё просто — мы знаем размер контейнера и легко можем подготовить файлы необходимого размера. А на уровне вёрстки на HTML с использованием CSS при работе с адаптивными сайтами задача решается при помощи медиа-запросов CSS, аттрибутов srcset и sizes у тега img или использованием тега picture с ещё более гибкой настройкой.

Оптимизация параметров сохранения

Во-первых, важен выбор формата. Есть два наиболее часто используемых формата — JPEG и PNG. Если простыми словами, то JPEG больше подходит для фотографий, а PNG — для логотипов, иконок, рисунков и схем. В случае логотипов, иконок, рисунков и схем также стоит посмотреть в сторону SVG — векторного формата изображений для сайтов.

Во-вторых, важны параметры сохранения. Например, при сохранении в JPG есть возможность указать уровень качества. Как правило, разница между самым высоким качеством (100%) и просто высоким (90-95%) визуально не заметна, а вот на размере файлов сказывается весьма существенно. Тоже самое касается и других настроек сохранения изображений в графическом редакторе (размер цветовой палитры в PNG8 и GIF, прогрессивные JPЕG и т.д.)

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

Обычно правильный выбор формата и сжатие (даже lossless — без потери качества) позволяет сократить размер файлов в среднем на 20-30%, а в некоторых случаях и в разы. 

Программы для сжатия изображений:

  • Caesium (Windows)
  • FileOptimizer (Windows)
  • jStrip (Windows)
  • OptiPNG (Windows)
  • PNGOUTWin (Windows)
  • ImageOptim (Mac OS X)
  • JPEGmini (Mac OS X)
  • PNGOUT (Mac OS X & Linux)
  • AdvPNG (Mac OS X & Linux)
  • Pngcrush (Mac OS X & Linux)
  • OptiPNG (Mac OS X & Linux)
  • JpegOptim (Mac OS X & Linux)
  • jpegrescan (Mac OS X & Linux)
  • jpegtran (Mac OS X & Linux)
  • Gifsicle (Mac OS X & Linux)

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

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

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

Узнать больше →

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

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

Неверный выбор формата обычно приводит к кратному возрастанию размера изображения и, следовательно, к долгой загрузке изображений на медленном интернет-канале (мобильный интернет, например).

Узнать больше →

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

PNG оптимальнее для рисунков, схем, иконок, логотипов или в случаях, когда для изображения нужна прозрачность.

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

Все технологии фронтенд-разработки: язык разметки HTML, таблицы стилей CSS и язык программирования JavaScript
Содержание и внешний вид каждой страницы сайта определяется HTML-кодом и содержанием таблицы стилей CSS, а поведение интерфейса — скриптами JavaScript.
Валидность и семантичность HTML
Валидность и семантичность HTML кода определяет качество сайта с точки зрения поисковых систем.
Адаптивный и отзывчивый дизайн
​Для обеспечения хорошего отображения сайтов на мобильных устройствах (планшетах и смартфонах) обычно создаётся отзывчивый или адаптивный дизайн. Суть подхода заключается в изменении размера и расположения блоков, коррекции размера шрифтов, а также в отключении не самых важных блоков в случае, если пользователь заходит на сайт с устройства с небольшим экраном.
Поддержка устаревших браузеров
Поддержка устаревших браузеров, как правило, накладывает ограничения на функционал и гарантированно увеличивает стоимость разработки и сопровождения.
Кроссбраузерность — корректная работа сайта в разных браузерах
Браузеров много и они несколько по-разному отображают страницы. Способность сайта корректно отображаться в разных браузерах называется кроссбраузерность.
HTML5 — новая версия стандарта
HTML — это язык для структурирования и представления содержимого, HTML5 (HyperText Markup Language, version 5) — это пятая версия стандарта, которая ещё находится в разработке, но уже является вполне рабочей. Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий при сохранении удобочитаемости кода для человека и простоты анализа для парсеров (в частности, поисковых систем).
Twitter Bootstrap — фронтенд-фреймворк
Клиентский html-, css- и js-фреймворк, использование которого позволяет существенно ускорить разработку клиентской части сайта или веб-приложения. Из основных возможностей — динамический дизайн по сетке, типографика, множество компонентов (веб-формы, таблицы, навигационные элементы, кнопки и прочие контролы), javascript-плагины (выпадающие меню, слайдеры, оповещения и прочее)...

Тематические технологии:

Язык разметки HTML
CSS — каскадные таблицы стилей
Язык программирования JavaScript
Библиотека React
Библиотека MobX
Библиотека MobX State Tree
Система сборки WebPack
Платформа NodeJS