Фотографии делают сайт убедительнее: показывают товар, команду, интерьер или результат работы. Но если загрузить исходники прямо с камеры, страница может стать тяжёлой даже при хорошем хостинге. При этом простое уменьшение качества «до минимума» часто портит детали, которые помогают посетителю принять решение.
Разберём практический процесс: как подготовить изображения, выбрать форматы, отдать подходящий размер на телефоне, правильно настроить загрузку и проверить результат. Советы подходят для сайта услуг, интернет-магазина, портфолио и блога.
Сначала найдите изображения, которые действительно замедляют страницу
Откройте важную страницу в браузере, затем инструменты разработчика и вкладку Network / Сеть. Включите фильтр Img, отключите кеш на время теста и перезагрузите страницу. Отсортируйте запросы по переданному размеру. Так видно, какие файлы браузер фактически скачивает, а не только какие размеры указаны в медиабиблиотеке.
Сравните три вещи: размер файла в килобайтах, реальные размеры картинки в пикселях и размер блока на экране. Если миниатюра шириной 320 CSS-пикселей скачивает изображение 4000 пикселей, это кандидат на оптимизацию. Но учитывайте плотность экрана: для чёткого отображения на некоторых устройствах понадобится источник крупнее размера блока в CSS.
Не оценивайте скорость по одному открытию страницы: кеш, сеть и устройство влияют на результат. Сначала зафиксируйте исходные данные, затем повторите тест в сопоставимых условиях.
Какой формат выбрать: JPEG, PNG, WebP, AVIF или SVG
Универсального формата для всех изображений нет. Выбор зависит от содержимого, требований к прозрачности и поддержки в используемом браузере или CMS.
| Тип изображения | Практичный выбор | На что смотреть |
|---|---|---|
| Фотографии товаров, помещений и людей | WebP или AVIF; JPEG как запасной вариант | Детали, фактура, размер файла |
| Скриншоты с мелким текстом | PNG или WebP без заметных потерь | Читаемость интерфейса и тонких линий |
| Логотипы, иконки, простые схемы | SVG, если файл получен из надёжного источника | Чистота кода, масштабируемость, безопасность |
| Картинки с прозрачным фоном | WebP, PNG или AVIF | Корректные края и прозрачность |
WebP часто удобен как основной формат для фотографий на современном сайте. AVIF тоже может давать компактные файлы, но итог зависит от конкретной картинки и параметров кодирования. Сравнивайте визуальное качество при одинаковых размерах отображения, а не выбирайте формат по названию.
Для SVG есть отдельное правило: не загружайте в сайт произвольные SVG от посетителей без проверки и очистки. В отличие от обычной фотографии SVG содержит разметку, и обработка недоверенных файлов требует дополнительных мер.
Подготовьте несколько размеров вместо одного огромного файла
Предположим, фотография услуги показывается в карточке шириной около 360 пикселей, а на отдельной странице — в блоке шириной 900 пикселей. Хранить единственную копию на 5000 пикселей и отдавать её везде нерационально. Подготовьте, например, версии шириной 480, 960 и 1440 пикселей. Это пример набора, а не обязательный стандарт: конкретные размеры определяются макетом и плотностью экранов.
Обрезку и сжатие выполняйте от качественного исходника, а не многократно пересохраняйте уже сжатую картинку. Перед массовой обработкой сохраните оригиналы отдельно. Если в CMS есть автоматическая генерация миниатюр, проверьте, какие размеры она создаёт и какие реально используются шаблоном.
Для товарных фотографий особенно важно проверить мелкие детали: маркировку, фактуру, цвет и границы объекта. Слишком сильное сжатие может ухудшить восприятие товара даже при небольшом выигрыше в скорости.
Как работают srcset и sizes
Атрибут srcset перечисляет версии изображения, а sizes подсказывает браузеру предполагаемую ширину области отображения. Браузер учитывает ширину экрана и плотность пикселей, чтобы выбрать подходящий источник.
Для страницы услуг можно подготовить три версии фотографии шириной 480, 960 и 1440 пикселей. В srcset указывают ширину каждого файла с суффиксом w, а в sizes — ширину изображения в макете при разных размерах экрана. Это не команда всегда скачивать маленькую версию на телефоне: браузер также учитывает плотность пикселей и другие условия.
Проверяйте выбор файла во вкладке Network при разных ширинах окна. Если на телефоне загружается неоправданно тяжёлый файл, сравните реальные размеры блока с указанными в sizes. Наличие адаптивной разметки само по себе не гарантирует экономию трафика.
Зачем задавать width и height, даже если размеры контролирует CSS
Когда браузер заранее знает соотношение сторон изображения, он может зарезервировать место ещё до завершения загрузки. Это уменьшает вероятность сдвигов текста, кнопок и соседних карточек. Поэтому в HTML полезно указывать width и height в пропорциях исходника, а в CSS задавать ширину 100% и автоматическую высоту.
Если карточки намеренно имеют одинаковую высоту, используйте object-fit: cover для фотографии внутри ограниченного блока. Но проверьте кадрирование: важный предмет, лицо или надпись могут оказаться за краем. Иногда лучше подготовить отдельную композицию для узкого экрана.
Lazy loading: какие картинки откладывать, а какие — нет
Атрибут loading со значением lazy позволяет браузеру отложить загрузку изображения, которое находится вне видимой области. Это полезно для длинных статей, галерей и карточек далеко внизу страницы. Однако применять ленивую загрузку ко всем картинкам подряд — ошибка.
Главную фотографию, которая видна сразу и может стать крупнейшим элементом первого экрана, обычно не стоит помечать как lazy. Её поздняя загрузка может ухудшить показатель LCP — время появления крупнейшего содержательного элемента в видимой области. Для действительно важного изображения можно рассмотреть fetchpriority со значением high, но не раздавайте высокий приоритет всем фотографиям.
После настройки посмотрите в Network, когда начинаются запросы к изображениям. Если главная фотография появляется с задержкой, проверьте не только атрибуты, но и то, не создаётся ли она поздно с помощью JavaScript. На большинстве страниц важнее правильно загрузить одно главное изображение, чем выставить десятки приоритетов.
Когда нужен picture и отдельная мобильная обрезка
Обычного srcset достаточно, когда на всех экранах показывается один и тот же кадр в разном разрешении. Элемент picture полезен, если на телефоне требуется другая композиция: например, вертикальный фрагмент широкого интерьерного снимка или крупный план товара вместо общего вида.
У такого решения есть цена — нужно поддерживать дополнительные файлы и следить за актуальностью каждого варианта. Применяйте отдельную обрезку только там, где она действительно улучшает восприятие, а не ко всем изображениям автоматически.
Alt-текст: описание изображения, а не набор ключевых слов
Атрибут alt помогает передать смысл изображения, когда оно не отображается или когда страницу читает вспомогательная технология. Для фотографии результата работы полезно написать, что именно изображено: «Кухня после ремонта с деревянными фасадами и островом». Фраза вроде «ремонт кухни недорого заказать ремонт» не описывает изображение и ухудшает читаемость.
Если изображение исключительно декоративное и не добавляет смысла, уместен пустой alt. Не дублируйте рядом стоящий текст без необходимости. Для изображений-ссылок особенно важно, чтобы доступное название объясняло действие перехода.
Практический сценарий: оптимизация страницы с 12 фотографиями
Представим страницу портфолио, где размещены 12 фотографий. Сначала выясняем, какие из них видны на первом экране, и измеряем суммарный объём запросов. Затем готовим версии под реальные размеры блоков, выбираем подходящий формат и сравниваем качество на телефоне и компьютере.
- Сохраните исходники. Оптимизированные копии должны быть отдельными файлами, чтобы при необходимости можно было вернуться к оригиналу.
- Выберите приоритетные кадры. Главная фотография загружается без искусственной задержки; остальные, расположенные ниже, можно загружать лениво.
- Сгенерируйте размеры. Для карточек и крупных просмотров подготовьте разные версии, не отдавая оригинал во все блоки.
- Проверьте пропорции. Укажите размеры в HTML и убедитесь, что изображения не сдвигают контент.
- Настройте адаптивную разметку. Проверьте в браузере, какой файл выбирается при разных ширинах экрана.
- Сравните до и после. Посмотрите количество переданных данных, момент загрузки главного изображения и визуальное качество.
Например, если 12 исходных фотографий весили по 1,5 МБ, их общий объём составлял 18 МБ. Если после подготовки каждая из выбранных браузером версий весит в среднем 180 КБ, сумма составит около 2,16 МБ. Это только арифметический пример, а не обещание конкретного результата: фактический объём зависит от содержимого снимков, настроек сжатия и выбранных вариантов.
Типичные ошибки после оптимизации изображений
- Сжатие без проверки: мелкие подписи и текстуры становятся нечитаемыми.
- Один размер для всех экранов: смартфон загружает файл для большого монитора.
- Ленивая загрузка главного баннера: важное изображение появляется позже, чем могло бы.
- Отсутствие размеров: карточки прыгают при загрузке.
- Неправильный sizes: браузер выбирает неоправданно тяжёлую версию.
- Обрезка без проверки: на телефоне пропадает значимая часть кадра.
- Замена всех файлов сразу: трудно найти причину ошибки и быстро откатить изменение.
После изменения формата проверьте кеширование и пути к файлам. Если адреса изображений поменялись, обновите разметку и убедитесь, что на страницах нет запросов с ошибкой 404. О том, как проверять такие ошибки и восстанавливать полезные переходы, есть отдельный материал: страница 404 и битые ссылки.
Контрольный список перед публикацией
- На странице нет неоправданно больших исходных фотографий.
- Качество изображения проверено при реальном размере отображения.
- Для разных экранов доступны подходящие размеры файлов.
- Адаптивная разметка соответствует CSS-макету.
- У картинок заданы размеры или заранее определённое соотношение сторон.
- Главное изображение не загружается лениво без причины.
- Картинки ниже первого экрана не конкурируют за сеть с важным содержимым.
- Alt-тексты описывают смысл изображений, а не повторяют ключевые слова.
- После обновления проверены мобильная версия, сеть и ошибки загрузки.
Итог: ускорение изображений — не один переключатель «сжать всё», а последовательность решений: правильный кадр, формат, разрешение, приоритет и проверка. Начните с самой тяжёлой страницы и главной фотографии, затем распространите удачные настройки на остальные шаблоны. Для общей проверки интерфейса после изменений пригодится чек-лист мобильной версии сайта.