Производительность
Как сжать картинки для сайта без заметной потери качества
Чтобы сжать картинки для сайта, начните с нужного размера на экране, а потом выбирайте формат и степень сжатия. Файл в четыре раза шире блока страницы расходует сеть без пользы для читателя. Сравнивайте исходник и новую версию на телефоне и компьютере: цель — меньший файл при сохранённой читаемости и деталях.
Найдите самые тяжёлые изображения
Откройте типовую страницу в PageSpeed Insights или инструментах разработчика браузера и отсортируйте загруженные файлы по размеру. Начните с изображения первого экрана и крупных фотографий каталога. Запишите для каждого файла исходные пиксели, размер отображения и объём передачи: тогда будет ясно, что именно нужно менять.
Учебный пример: карточка товара отображает фотографию шириной 600 пикселей, но скачивает файл 4000 на 4000 пикселей. В первую очередь подготовьте версию под реальную ширину блока и плотность экрана. Уменьшение пикселей часто приносит больше пользы, чем агрессивная настройка качества.
Выберите формат по содержимому
Для фотографий сравните JPEG, WebP и AVIF. Современные WebP и AVIF нередко дают меньший файл при похожем виде, но итог зависит от изображения и настроек. Для логотипа или простого значка лучше использовать исходный векторный SVG, если он есть. Для схем с мелким текстом проверяйте резкость после сжатия: иногда PNG или режим без потерь подходит лучше.
Не меняйте расширение файла без перекодирования: переименованный .png не становится WebP. Для совместимости можно предложить браузеру несколько форматов через <picture> и оставить запасной <img>. Выбирайте не модный формат, а проверенное сочетание размера, качества и поддержки нужных браузеров.
Настройте качество и проверьте глазами
Сохраните копию исходника. Экспортируйте несколько версий с разным уровнем качества и сравните волосы, мелкий текст, контрастные границы и плавные переходы цвета. Нет одного значения сжатия, которое подходит всем изображениям: фотография и схема реагируют по-разному.
Оценивайте изображение в том размере, в котором его увидит посетитель, и на обычном телефоне. Если контуры стали мутными, вернитесь на шаг назад. Для важной обложки или товара приемлемость качества решает редактор или владелец каталога, а не только автоматический показатель.
Отдавайте подходящую версию каждому экрану
Для разных ширин подготовьте несколько размеров и укажите их в srcset и sizes. Тогда браузер сможет выбрать файл, подходящий для своего экрана, вместо единственного большого оригинала для всех. Проверьте в инструментах разработчика, какой вариант действительно загрузился на узком и широком экране.
Задайте изображениям width и height или эквивалентное соотношение сторон. Это резервирует место до загрузки и помогает избежать сдвигов макета. Размеры в HTML не заменяют физическое уменьшение файла: браузер может показать огромный исходник маленьким, но скачать всё равно весь исходник.
Не откладывайте главное изображение
Изображения далеко ниже первого экрана можно загружать лениво. Главное изображение первого экрана, которое влияет на LCP, должно быть доступно браузеру сразу; бездумное loading="lazy" может задержать его показ. Ориентируйтесь на реальную страницу, а не на универсальное правило для всех картинок.
Сжатие не заменяет описание изображения. Атрибут alt нужен для смысла и доступности, а не для уменьшения файла; как написать его для разных ситуаций, разбираем в отдельной статье об alt. После замены проверьте также правильность миниатюр, обложек при публикации ссылки и отсутствие битых адресов.
Как проверить результат
Повторите замер того же URL на телефоне и компьютере. Сравните объём переданных изображений и LCP; убедитесь, что новая версия видна и не стала размытой. В браузерной сети проверьте, что загружается нужный размер из srcset, а не старый оригинал из кеша.
Откройте карточку товара, каталог и статью после публикации. Проверьте обрезку, адаптивный размер, подпись, alt и ссылку на изображение. Если оптимизация ухудшила внешний вид или сломала страницу, исправление не готово, даже если файл стал в несколько раз легче.
Первоисточники
FAQ
Частые вопросы
Что сначала уменьшать: размер в пикселях или качество?
Сначала подготовьте изображение под реальный размер блока и экранов, затем подберите формат и качество по видимому результату.
Всегда ли WebP лучше PNG?
Нет. Для фотографии WebP часто выгоден, а у схемы с мелким текстом важнее проверка резкости; сравнивайте конкретные файлы.
Нужно ли ставить ленивую загрузку на все картинки?
Нет. Для главного изображения первого экрана она может задержать показ. Лениво загружайте прежде всего изображения ниже первого экрана.
Проверьте себя
Вопрос 1 из 2. Результат увидите только вы.
Обсуждение
Какое изображение на вашем сайте оказалось самым тяжёлым и удалось ли уменьшить его без заметной потери качества?
Войдите, чтобы оставить комментарий. Читать обсуждение могут все. Комментарии проходят автоматическую и редакционную проверку.