Технологии и изменения рынка
Эффективные способы оптимизации изображений
Скорость загрузки сайта была в числе моих основных приоритетов еще до настойчивых рекомендаций Google. Один из факторов, влияющих на скорость, — вес изображений. Меньше вес — браузер быстрее показывает страницу. Я пробовал разные способы оптимизации изображений и в результате выбрал несколько, которые использую сам и рекомендую другим.
Стандартный подход к оптимизации изображений
Перед публикацией фотографии на сайте я уменьшаю ее вес. Делаю это в графическом редакторе (Gimp + плагин «gimp-plugin-saveforweb») или сервисе Optimizilla.
Пример
автор фото — www.flickr.com/photos/simon50000/
открыл фото и сохранил для веб. настройки программы — по умолчанию
настройки онлайн сервиса — по умолчанию
Уменьшили размер фото — можно публиковать. В код html-страницы добавляем такую строку:
<img src="путь к изображению" alt="описание" width="ширина" height="высота" >
Раньше этих действий было достаточно. Сейчас — нет. Назову три причины:
-
Иногда оптимизированные фото на «ретине» выглядят плохо → Для мобильных устройств и экранов с высокой плотностью пикселей важно предоставлять адаптивные изображения, которые сохраняют четкость и загружаются быстро.
-
Появился формат изображений — WebP, который делает вес фото еще меньше. Пока формат поддерживается не всеми браузерами → для браузеров, которые «видят» WebP, следует предлагать WebP, а остальным — другие форматы.
updated. Сегодня WebP поддерживается всеми актуальными браузерами, однако появляются новые форматы, такие как AVIF и JPEG XL, которые используются все чаще.
-
Чтобы браузеры в смартфонах не отвлекались на адаптацию картинок под размер экрана, нужно предлагать картинки нужного размера сразу. Один размер для смартфонов, другой — для планшетов, третий — для десктопов.
Вместо одной фотографии, одной строчки кода с адресом и описанием следует готовить набор фотографий (разного размера и формата) и указывать в html-коде условия, при которых должна показываться та или иная фотография из набора. Для каждого экрана должно загружаться наиболее релевантное изображение — нужного размера, формата и разрешения.
Адаптивные изображения: как отдать браузеру нужный файл
В адаптивных изображениях есть две разные задачи, и для них нужны разные инструменты.
-
Первая — выбрать подходящее изображение по ситуации. Например, на большом экране показать широкую фотографию, а на смартфоне — более крупный фрагмент с главным объектом. Или отдать современный формат тем браузерам, которые его поддерживают, и запасной вариант остальным.
-
Вторая — выбрать подходящий размер одного и того же изображения. Кадр не меняется, но браузеру не нужно загружать файл шириной 1400px, если в макете картинка занимает только 650px.
Для первой задачи нужен ручной контроль над выбором изображения. Для второй — список файлов разной ширины и подсказка браузеру, какой размер картинка займет в макете. Ниже разберем оба случая.
Когда нужен контроль: <picture>
Когда для разных условий нужно показать не просто файл другого размера, а другое изображение — например, другой кроп, композицию или формат, — используют <picture>.
Если вы читаете статью со смартфона, ниже вы видите котенка, который спит, свернувшись калачиком. Если читаете с большого экрана — ваш кот зевает и потягивается. Еще есть кот, который сидит и смотрит на вас. Поэкспериментируете с гаджетами или размером окна браузера и убедитесь, что так и есть.
А вот как это работает:
<picture>
<source media="(min-width: 650px)" srcset="...kitten-large.png" >
<source media="(min-width: 465px)" srcset="...kitten-medium.png" >
<img src="...kitten-small.png" alt="кот" >
</picture>
Атрибут srcset указывает путь изображения для загрузки. Тег <source> и атрибут media указывают условия появления каждой из картинок. Если ширина экрана больше 650px, показывается зевающий кот, если от 465px до 650px — кот сидит. Если экран меньше 465px или если браузер не распознает тег <picture>, вы увидите спящего кота.
В блоге Opera есть 15 примеров использования тега <picture> (англ.). Я заглядываю туда как в шпаргалку по синтаксису: какой код нужен, чтобы для ретины загружать изображения с высоким разрешением, чтобы показывать разные фото для разных экранов, чтобы предлагать WebP там, где браузеры распознают этот формат, чтобы все эти условия указать разом для одного изображения.
Когда кадр тот же, а размер разный: srcset и sizes
Если изображение не нужно кадрировать по-разному для разных экранов, <picture> чаще всего не нужен. Достаточно обычного <img>: в srcset перечисляем несколько файлов разной ширины, а в sizes подсказываем браузеру, сколько места картинка займет в макете.
Например, в статье изображение занимает всю ширину экрана на смартфоне, но не становится шире 700px на больших экранах:
<img src="image-960.jpg" srcset="image-650.jpg 650w, image-960.jpg 960w, image-1400.jpg 1400w" sizes="(max-width: 700px) 100vw, 700px" width="700" height="467" alt="Описание изображения">
Атрибут srcset говорит браузеру: «Вот несколько версий одного изображения, и вот их ширина». Значения 650w, 960w и 1400w — это не ширина показа на странице, а реальная ширина файлов в пикселях.
Атрибут sizes описывает не сами файлы, а место изображения в макете. В примере выше запись читается так: «если ширина окна до 700px — изображение занимает всю ширину окна; если больше — занимает 700px».
После этого браузер сам выбирает подходящий файл из srcset. Он учитывает ширину изображения в макете, плотность экрана и другие условия. На обычном смартфоне может подойти файл 650px, на ретине — 960px или 1400px. Вы не задаете жесткое правило, а даете браузеру набор вариантов.
Главная сложность — sizes нужно поддерживать в актуальном состоянии. Если после редизайна картинка стала занимать не 700px, а 900px, значение sizes тоже нужно изменить. Иначе браузер будет выбирать файл по устаревшей подсказке.
Упрощение для lazy-изображений: sizes="auto"
В отличие от предыдущего случая, для изображений с loading="lazy" ситуация другая: браузер откладывает запрос до момента, когда уже знает фактический размер элемента. Это открывает возможность передать задачу браузеру:
<img loading="lazy" src="image-960.jpg" srcset="image-650.jpg 650w, image-960.jpg 960w, image-1400.jpg 1400w" sizes="auto, (max-width: 700px) 100vw, 700px" width="700" height="467" alt="Описание">
sizes="auto" — браузер выбирает вариант из srcset сам. Fallback-значения после запятой подхватывают браузеры без поддержки auto.
Где не работает:
- Hero-изображения и все, что открывает страницу выше первого экрана: там loading="lazy" замедляет LCP (метрика скорости загрузки первого экрана). Для них — обычный sizes и, при необходимости, атрибут fetchpriority="high".
- Safari пока не поддерживает sizes="auto" (актуально на май 2026). Именно поэтому формат sizes="auto, <fallback>" безопаснее, чем просто sizes="auto".
- Атрибуты width и height обязательны: без них браузер не рассчитает место под изображение до загрузки.
Согласно рекомендациям Piccalilli для изображений в теле статей, карточек, галерей — этот шаблон теперь базовый.
Автоматизация и простота: инструменты оптимизации
Ручная подготовка изображений работает, пока картинок мало. Для одной статьи можно заранее сделать несколько размеров, прописать srcset, sizes или <picture> и проверить результат в браузере.
Проблемы начинаются, когда изображений десятки или сотни. Например, в интернет-магазине, каталоге, блоге с архивом материалов или фотогалерее. Нужно не только сжать файлы, но и подготовить версии разных размеров, выбрать форматы, не сломать качество и следить, чтобы разметка соответствовала макету.
Все это вынудило меня искать другое решение. И я его нашел — Cloudinary (ссылка реферальная).
C Cloudinary работа по оптимизации изображений сводится к корректировке адреса картинки, загруженной в облако сервиса. Поясню на примере. Давайте войдем в Cloudinary, добавим фотографию монеты из примера выше и скопируем url картинки.
Адрес фото:
https://res.cloudinary.com/bartoshevich/image/upload/v1538423803/coin_original.jpg Все, что требуется, — это после upload/ в адресе добавить q_auto,f_auto/. Новый адрес:
https://res.cloudinary.com/bartoshevich/image/upload/q_auto/f_auto/v1538423803/coin_original.jpg
Сервис автоматически изменит качество и формат изображения в зависимости от экрана, на котором открывают адрес картинки. Не нужно готовить много вариантов изображения, прописывать условия для «ретины» и WebP. Все это уже «зашито» в адресе.
Ниже — оптимизированная с помощью Cloudinary фотография монеты. Если вы откроете статью в разных браузерах (Firefox и Chrome) и сохраните фото, вы получите файл разных форматов и веса.
Сотрудники Cloudinary подготовили Cookbook, где описывают возможности сервиса: что можно добавить в адрес изображения и какой результат получить. Например, можно улучшить фотографию, если после upload/ написать в адресе e_improve/. Результат:
Сервис не отменяет <picture>, srcset и sizes. Он снимает часть ручной работы: помогает генерировать и доставлять оптимизированные файлы. Но решение о том, где нужен другой кроп, какие размеры нужны в макете и как изображение влияет на LCP, все равно остается за автором или разработчиком.