Оптимизация изображений

Просмотров 223
Сложность:

Доля изображений в общем размере страницы сайта может занимать более 50%. Соответственно, работа с картинками может дать существенный эффект в ускорении загрузки страниц.

Размер

Самая распространённая ошибка - использование изображения в размере, существенно превышающем тот, в котором оно показывается на сайте.

Например, логотип отображается на сайте в разрешении 400х100 пикселей, а картинка с логотипом имеет размер 2000х500 пикселей. Или маленькая превьюшка в портфолио, которая показывается на сайте в размере 300х200 пикселей, а загружается огромная фотография в оригинальном размере 3000х2000 пикселей. И таких превьюшек на странице портфолио более 20 штук.

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

Я бы рекомендовал использовать такое правило. Размер на сайте = Размер изображения + 25%. Зачем +25%? Некоторые используют масштабирование в браузерах. И такой небольшой запас не сильно скажется на итоговом весе картинки, то даст запас для масштабирования в браузере.

Сжатие

После приведения размеров изображений в порядок нужно проверить их сжатием. Самый популярный формат JPEG имеет разные степени сжатия. И не всегда требуется использование максимального качества. Например, качество 70 от качества 100 отличить будет практически невозможно. Лично я сохраняю изображения через инструмент "Save for web" в фотошопе. Он существенно сжимает изображения по размеру, сохраняя приемлемое качество.

Если у вас нет фотошопа, то можно воспользоваться онлайн-сервисами по сжатию изображений. Я рекомендую TinyJPG.

Оптимальное сжатие может уменьшить итоговый размер картинки в несколько раз. Помните, что сжимать можно не только JPEG, но и другие форматы.

Формат

JPEG был разработан в 1991 году. Естественно, существуют более современные форматы. Например, Google в 2010 году выпустил формат WebP, который дополнительно сжимает изображение, без потери качества относительно JPEG.

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

<picture>
<source type="image/webp" srcset="assets/images/rocket.webp">
<source type="image/png" srcset="assets/images/rocket.png">
<img src="assets/images/rocket.webp" alt="Пример" width="60" height="60">
</picture>

WebP заменяет не только JPEG, но и PNG, так как поддерживает прозрачность фона.

Спрайты

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

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

Пример сервиса для генерации спрайтов - https://www.toptal.com/developers/css/sprite-generator/

SVG

Если JPEG, PNG и WebP - это растровая графика, которая не позволяет сохранять качество при масштабировании. Существует и векторный формат графики для веб-страниц, который можно бесконечно увеличивать без потери качества - SVG. Изображение формата SVG описывается формулами. Большинство иконок можно преобразовать в SVG.

Существует множество сервисов и плагинов для конвертации в формат SVG. SVG поддерживают все браузеры. Только не пытайтесь конвертировать фотографии в SVG - результат вас разочарует.

Видеоверсия

Автор: Александр Дергунов
Дата публикации:
Поделиться: