Картинки на сайте: как сжать и не потерять качество

Фотографии почти всегда самая тяжёлая часть страницы. Одна фотография прямо с телефона может весить больше, чем весь остальной сайт вместе: текст, стили и скрипты. Хорошая новость в том, что картинки проще всего облегчить, и для этого не нужен программист. В статье расскажем, какой размер и формат выбирать, как сжимать фото перед загрузкой и что должен делать сам сайт.

Общие причины медленного сайта мы разбирали в статье «Скорость сайта: почему это важно для заявок и как ускорить». Здесь только про изображения, подробно и по шагам.

Почему фото с телефона нельзя загружать как есть

Современный телефон снимает кадр шириной 4000 пикселей и больше. Файл весит несколько мегабайт. На сайте эта картинка показывается в блоке шириной, например, 800 пикселей на компьютере и 375 на телефоне. Получается, что посетитель скачивает в десятки раз больше данных, чем видит. На мобильном интернете это секунды ожидания, а часть людей закрывает страницу, не дождавшись.

Вторая проблема: такие фото занимают место на хостинге и раздувают резервные копии. Если на сайте сотни товаров или работ в портфолио, разница становится заметной.

Какой размер картинки нужен

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

Если не знаете, какой размер у блока, откройте страницу на компьютере, нажмите правой кнопкой на картинку и выберите «Просмотреть код». Браузер покажет, в каком размере картинка выводится на экран и какой у неё настоящий размер.

Какой формат выбрать

• JPEG (JPG) подходит для фотографий: люди, интерьеры, товары, работы. Хорошо сжимается, поддерживается везде.
• PNG нужен для картинок с прозрачным фоном, скриншотов с мелким текстом, схем. Фотографии в PNG весят в разы больше, чем в JPEG, без видимой пользы.
• WebP современный формат, который при том же качестве обычно легче JPEG. Его поддерживают все актуальные браузеры. Хороший вариант для сайта, особенно если сайт сам умеет отдавать WebP и подстраховываться JPEG для старых устройств.
• AVIF ещё легче, но не все системы управления сайтом и редакторы его поддерживают. Для малого бизнеса это не обязательный шаг.
• SVG для логотипов и иконок: векторный формат, чёткий на любом экране и очень лёгкий.

Частая ошибка: логотип или иконку загружают фотографией 2000 на 2000 пикселей. Логотип в шапке должен весить килобайты, а не мегабайты.

Как сжать фото перед загрузкой: пошагово

Если вы сами добавляете на сайт товары, новости или работы, достаточно завести привычку из трёх шагов.

1. Обрежьте лишнее. Уберите пустой фон, край стола, чужие предметы. Кадр, где объект занимает большую часть, смотрится лучше и весит меньше.
2. Уменьшите ширину. Для большинства картинок внутри страницы хватает 1200 пикселей по длинной стороне. Это можно сделать в любом графическом редакторе, во встроенном редакторе фото на компьютере или в онлайн-сервисе для изменения размера.
3. Сожмите с качеством около 75-85%. В большинстве программ при сохранении JPEG есть ползунок качества. При значениях около 80 разница на глаз почти незаметна, а файл становится в несколько раз легче. Есть и бесплатные онлайн-сервисы сжатия, которые показывают картинку «до» и «после» рядом.

Ориентир по весу: фотография внутри страницы обычно укладывается в 100-300 килобайт. Если файл весит несколько мегабайт, его почти наверняка можно облегчить без потерь для глаза.

Как назвать файл

Имя файла видят поисковики, и оно помогает вам самим не запутаться. Пишите латиницей, через дефис, по смыслу: kitchen-oak-facade.jpg лучше, чем IMG_20240512_143022.jpg. Без пробелов, кириллицы и спецсимволов: они превращаются в длинные нечитаемые адреса.

Что должен делать сам сайт

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

• Уменьшенные копии. Для телефона и для списков сайт должен отдавать маленькую копию картинки, а не полный файл. Технически это атрибут srcset: браузер сам выбирает подходящий размер.
• WebP с запасным JPEG. Сайт создаёт WebP-версию и отдаёт её тем браузерам, которые её понимают.
• Отложенная загрузка. Картинки ниже первого экрана загружаются, когда посетитель до них долистает (атрибут loading="lazy"). При этом главную картинку первого экрана откладывать нельзя: она должна грузиться сразу.
• Указанные размеры. У картинок прописаны ширина и высота, чтобы страница не прыгала при загрузке.
• Кэширование. Сервер разрешает браузеру сохранять картинки, чтобы при повторном визите они не скачивались заново.

На сайте notix-web.ru это устроено так: при выводе статьи для каждой JPG-картинки автоматически создаются WebP-версия и копия шириной 720 пикселей для телефонов, а исходный файл в базе не меняется. Владельцу достаточно загрузить нормальную фотографию, остальное сайт делает сам.

Как найти тяжёлые картинки на своём сайте

1. Проверьте страницу в PageSpeed Insights. В рекомендациях будут пункты про размер и формат изображений, со списком конкретных файлов и возможной экономией.
2. В Chrome нажмите F12, вкладка «Сеть» (Network), фильтр «Изображения» (Img), обновите страницу. Отсортируйте по размеру: сверху окажутся самые тяжёлые файлы.
3. Пройдитесь по разделам, которые наполняли вручную: портфолио, новости, товары. Там чаще всего лежат фото прямо с телефона.

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

Качество: как не перестараться

Сжатие ради цифр тоже бывает вредным. Признаки пережатой картинки: размытые края, «квадратики» на однотонном фоне, полосы на плавных переходах неба или градиента. Особенно критично для товаров, где клиент рассматривает детали: ткань, фактуру дерева, швы. Для таких фото оставьте качество повыше и дайте возможность открыть увеличенную версию по клику.

Проверяйте результат на телефоне и на большом мониторе. Если на глаз разницы нет, сжатие подобрано правильно.

Описание картинок: alt

У каждой содержательной картинки должен быть текст в атрибуте alt: что на ней изображено. Его читают программы для незрячих, его видит посетитель, если картинка не загрузилась, и его учитывают поисковики при поиске по картинкам. Пишите по смыслу: «Кухня с фасадами из дуба и столешницей из камня», а не «фото1» и не набор ключевых слов через запятую. Декоративным элементам вроде фоновых узоров описание не нужно.

Права на изображения

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

Вопросы и ответы

Испортит ли сжатие мои фотографии?

При разумных настройках нет. Качество около 80% для JPEG и уменьшение до нужной ширины на глаз почти незаметны. Исходники всё равно храните у себя: они пригодятся для печати и новых материалов.

Нужно ли переводить все картинки в WebP вручную?

Не обязательно. Удобнее, когда это делает сам сайт: создаёт WebP-копию и отдаёт её подходящим браузерам. Если ваш сайт так не умеет, это можно настроить.

Почему сайт тормозит, хотя я сжимаю фото?

Картинки только одна из причин. Медленным сайт делают ещё сторонние скрипты, слабый хостинг и отсутствие кэша. Как проверить, что именно тормозит, разобрали в статье о скорости сайта «Скорость сайта».

Какой вес картинки считается нормальным?

Для фото внутри страницы ориентир 100-300 КБ, для маленьких карточек меньше 100 КБ, для логотипа и иконок единицы килобайт. Широкий баннер может весить больше, но не мегабайты.

Что делать с картинками, которые уже загружены?

Найти самые тяжёлые через PageSpeed Insights или вкладку «Сеть» в браузере и заменить их облегчёнными версиями. Если файлов много, разработчик может пересжать их пакетно после резервной копии.

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