Оптимизация изображений для сайта: как уменьшить вес картинок

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

В этой статье разберем подготовку отдельных картинок, правильную загрузку на странице и автоматизацию обработки. Для небольшого сайта достаточно ручной подготовки, а для большого архива или регулярных публикаций пригодятся инструменты CMS и сервисы оптимизации.

Что влияет на вес изображения

У изображения есть несколько характеристик, которые легко перепутать:

• Размеры в пикселях — ширина и высота, например 1600 × 1000.
• Размер файла — объем данных в килобайтах или мегабайтах.
• Размер отображения — область, которую картинка занимает на странице.
• Формат и параметры сжатия — способ хранения изображения.

Фотография может отображаться в блоке шириной 400 пикселей, но загружаться из файла шириной 4000 пикселей. Уменьшение через CSS не сокращает объем скачиваемого файла: браузер получает исходник и только затем показывает его в заданном размере.

Поэтому оптимизация тяжелого изображения начинается не с максимального сжатия, а с проверки его назначения.

Можно ли уменьшить вес без потерь

Есть два разных подхода.

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

Сжатие с потерями изменяет данные изображения. При удачных настройках разница может быть незаметна в обычном просмотре, но технически это не сжатие без потерь.

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

Практическая цель для сайта — не обещание «никакой потери качества», а приемлемое качество при меньшем объеме загрузки.

Как подготовить изображение для сайта

Работайте с копией исходника. Сохраненный оригинал позволит заново подготовить версии для другого размера или формата.

Шаг 1. Подберите размеры

Посмотрите, какую область занимает изображение в шаблоне. Для превью в каталоге, иллюстрации в статье и полноэкранного просмотра нужны разные версии.

При выборе учитывайте плотность пикселей экрана. Например, для изображения шириной 800 CSS-пикселей на экране с плотностью 2× может понадобиться файл шириной 1600 пикселей. Это не значит, что всем посетителям нужно отправлять именно его.

Подготовьте несколько разумных размеров и дайте браузеру выбрать подходящий. Не создавайте десятки вариантов без необходимости.

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

Шаг 2. Выберите формат

WebP и AVIF часто позволяют получить меньший файл по сравнению с JPEG или PNG при сопоставимом визуальном качестве. Но результат зависит от изображения и параметров кодирования.

Не переводите все файлы в один формат только ради расширения. Сравните несколько вариантов: маленький исходный файл после конвертации иногда становится больше.

Переименование photo.jpg в photo.webp не меняет формат. Нужна настоящая конвертация редактором, инструментом CMS или сервисом.

Шаг 3. Настройте сжатие

Универсального значения качества для всех изображений нет. Фотография, скриншот панели управления и логотип по-разному реагируют на сжатие.

Начните с умеренных настроек, затем сравните результат с исходником:

• Не размылся ли мелкий текст.
• Не появились ли пятна вокруг контрастных границ.
• Не потерялись ли важные детали товара.
• Не изменились ли прозрачность и цвет.

Проверяйте изображение в реальном размере на странице и при увеличении. Не выбирайте самый маленький файл, если он перестал выполнять свою задачу.

Как уменьшить вес изображения онлайн

Для подготовки отдельных файлов можно использовать Squoosh. Он позволяет сравнивать варианты и выполнять сжатие в браузере. Обработка изображения происходит локально, без отправки самого файла на сервер.

1. Откройте Squoosh и выберите копию изображения.
2. При необходимости включите изменение размеров и задайте подходящую ширину с сохранением пропорций.
3. Выберите формат, например WebP или MozJPEG.
4. Настройте качество и сравните результат с исходником.
5. Скачайте подготовленный файл.
6. Проверьте его на странице сайта.

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

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

Как правильно загружать изображения

Подготовить легкий файл — только часть работы. Шаблон должен использовать подходящую версию и не задерживать загрузку важных изображений.

Адаптивные версии через srcset

Атрибут srcset перечисляет доступные варианты, а sizes описывает ширину отображения. Браузер учитывает эти подсказки и характеристики устройства при выборе файла.

Пример для изображения, которое занимает не более 800 пикселей по ширине:

<img
  src="/images/photo-800.webp"
  srcset="
    /images/photo-400.webp 400w,
    /images/photo-800.webp 800w,
    /images/photo-1600.webp 1600w
  "
  sizes="(max-width: 832px) calc(100vw - 32px), 800px"
  width="1600"
  height="1000"
  alt="Фотография товара"
  style="display: block; width: 100%; max-width: 800px; height: auto;"
>

В этом примере все версии должны иметь одинаковые пропорции. Файлы нужно заранее создать: запись в srcset сама не выполняет ресайз.

Значение sizes рассчитано на макет с боковыми отступами по 16 пикселей на узком экране. Если ваш шаблон устроен иначе, измените его. Атрибут sizes не задает размеры блока вместо CSS.

WebP с резервным форматом

Если нужен резервный JPEG, можно использовать picture:

<picture>
  <source
    srcset="/images/photo.webp"
    type="image/webp"
  >
  <img
    src="/images/photo.jpg"
    width="1200"
    height="750"
    alt="Фотография товара"
    style="max-width: 100%; height: auto;"
  >
</picture>

Браузер, поддерживающий WebP, выберет соответствующий источник. Иначе используется JPEG из img. Оба файла должны существовать и соответствовать друг другу.

CMS или CDN может выбирать формат другим способом, без ручного picture. Не добавляйте вторую систему конвертации, пока не выясните, как работает существующая.

Размеры и отложенная загрузка

Указывайте width и height с правильными пропорциями изображения. Это помогает браузеру заранее зарезервировать место и уменьшает сдвиги содержимого при загрузке.

Для изображений ниже первого экрана используйте loading=»lazy»:

<img
  src="/images/example.webp"
  width="1200"
  height="750"
  loading="lazy"
  alt="Пример настройки"
  style="max-width: 100%; height: auto;"
>

Не добавляйте lazy loading к основному изображению первого экрана, особенно если оно является элементом LCP. Иначе браузер может начать его загрузку позже.

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

Как автоматизировать оптимизацию

Если изображения появляются регулярно, задайте единые правила обработки. Сотрудники должны загружать исходники, а сайт — выдавать подготовленные версии для конкретных областей шаблона.

Инструменты CMS

В WordPress сначала проверьте, какие размеры уже создает сайт и какие версии использует тема. Затем выбирайте плагин под недостающую задачу: сжатие, конвертацию, обработку старого архива или выдачу через CDN.

В MODX размеры превью можно готовить ресайзером. Но результат зависит и от шаблона: если в карточке по-прежнему выводится оригинал, наличие инструмента само по себе ничего не меняет.

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

Не включайте несколько оптимизаторов одновременно без необходимости. Сначала определите, какой инструмент отвечает за размеры, какой — за сжатие, а какой — за доставку.

Сервисы автоматического сжатия, например OptiPic

Если на сайте накопилось много изображений, ручная обработка может занимать больше времени, чем само подключение сервиса. В таком случае можно рассмотреть OptiPic.

Я использовал его для обработки архива изображений своего блога. Ниже покажу порядок подключения классического режима и сохраню результаты старого теста. Это мой исторический опыт, а не обещание такой же экономии или ускорения для другого сайта.

Какой режим выбрать

У OptiPic есть два разных подхода. Перед подключением определите, хотите ли вы обработать файлы на своем хостинге или выдавать подготовленные версии через CDN.

CDN сам по себе не уменьшает объем исходников на вашем хостинге. Классическая обработка, в свою очередь, не заменяет настройку адаптивных размеров в шаблоне.

Инструкция ниже относится к классическому режиму. Для CDN выбирайте отдельный способ интеграции в кабинете сервиса.

Что удобно в классическом режиме

• Можно обработать существующий архив, а не только новые загрузки.
• Имена и адреса обработанных изображений сохраняются.
• Сервис отслеживает новые и измененные файлы.
• Можно настраивать сжатие и ограничение размеров.
• Для сайтов на PHP предусмотрен универсальный модуль.

По умолчанию в OptiPic, исходные версии сохраняются рядом с обработанными файлами. Но перед массовой оптимизацией все равно сделайте собственную резервную копию и проверьте наличие свободного места.

Не включайте глобальное уменьшение размеров без проверки: большие фотографии могут использоваться в увеличенном просмотре, а не только в карточках.

Шаг 1. Добавьте сайт

Зарегистрируйтесь в OptiPic, подтвердите аккаунт и откройте раздел с вашими сайтами. Добавьте адрес проекта, который хотите оптимизировать.

Шаг 2. Установите модуль

Откройте вкладку «Скачать модуль», загрузите архив и распакуйте его. Для универсального PHP-модуля папку optipic.io нужно разместить в корне подключаемого сайта.

Файлы можно загрузить через SFTP, FTP или файловый менеджер хостинга. Не путайте корень конкретного сайта с домашним каталогом всего аккаунта.

Если используете модуль для конкретной CMS, следуйте его инструкции. Не устанавливайте несколько способов интеграции одновременно без необходимости.

Шаг 3. Запустите поиск изображений

После установки включите индексацию в настройках OptiPic. Здесь «индексация» означает поиск файлов самим сервисом, а не включение сайта в Google или Яндекс.

По официальной инструкции первая обработка списка изображений проходит в течение 24 часов. В кабинете также предусмотрен ручной запуск. Фактическое время проверяйте по состоянию задачи.

Когда поиск завершится, посмотрите обнаруженный объем и список файлов. Так проще выбрать пакет и проверить, что сервис работает с нужными изображениями.

Шаг 4. Проверьте настройки и включите сжатие

Начните с демонстрационного объема и нескольких характерных изображений: фотографии, скриншота с текстом и картинки с прозрачностью.

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

На момент обновления статьи на сайте OptiPic указаны 10 МБ бесплатно и возможность получить до 200 МБ по акции. Дополнительный объем не стоит считать безусловным бонусом: уточните условия в кабинете или поддержке.

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

Что получилось на моем блоге

В первоначальном обзоре я описывал обработку большого архива. По сохраненным данным, на оптимизацию примерно 19 000 изображений было израсходовано около 600 МБ пакета.

Это расход оплаченного объема обработки, а не утверждение, что сайт освободил ровно 600 МБ дискового пространства.

Тогда я воспользовался скидкой для некоммерческого проекта и потратил на пакет около 260 рублей. Это историческая покупка, а не действующая цена. Возможность аналогичной скидки сейчас нужно уточнять отдельно.

После обработки я повторно проверял страницы в прежней версии Google PageSpeed. В старом обзоре результат был назван «+5% к скорости», но такую формулировку корректно убрать: изменение балльной оценки не равно процентному ускорению загрузки.

Эти снимки показывают мой прежний тест. Их нельзя напрямую сравнивать с нынешними оценками PageSpeed Insights: инструменты и условия проверки изменились.

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

Перейти в OptiPic и проверить условия подключения.

Данная ссылка со встроенным купоном на 10% скидку в optipic: MYETIQnOvIUMdqTAwlq8FWAOO19A3FpF.

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

Как проверить результат

Сравнивайте не только размер подготовленного файла, но и то, что реально получает посетитель.

Проверка через браузер

1. Выберите несколько страниц: статью, карточку и каталог.
2. Откройте инструменты разработчика и вкладку Network.
3. Включите отключение кеша на время проверки и перезагрузите страницу.
4. Отфильтруйте запросы изображений.
5. Проверьте адреса, форматы и объем переданных данных.
6. Повторите проверку для узкого экрана.
7. После проверки верните обычные настройки кеша.

Если после создания превью браузер продолжает скачивать оригинал, исправляйте шаблон. Если используется srcset, смотрите фактически выбранный файл, а не только значение src.

Проверка качества и загрузки

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

Для оценки загрузки используйте PageSpeed Insights. Если основное изображение является элементом LCP, его оптимизация может помочь, но задержка также зависит от ответа сервера, момента обнаружения файла и других ресурсов.

Проведите несколько замеров в сопоставимых условиях. Рост оценки PageSpeed на 5 пунктов не означает ускорение сайта на 5%.

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

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

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

Не стремитесь любой ценой уложить каждый файл в один лимит. Уменьшайте избыточность и учитывайте общую загрузку страницы: десятки небольших изображений тоже могут создать большой объем данных.

Что делать с тяжелым архивом

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

Учитывайте, что старые страницы могут ссылаться на разные размеры и адреса. Не удаляйте оригиналы и подготовленные версии, пока не выясните, где они используются.

Почему WebP не уменьшил файл

Результат зависит от содержимого, исходного формата и настроек. Если исходник уже хорошо оптимизирован, другая версия может оказаться больше.

Сравните размеры в пикселях, качество экспорта и фактический размер файлов. Используйте вариант, который подходит для этой картинки, а не формат ради названия.

Нужно ли менять все картинки

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

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

← Предыдущая статьяЧто такое копирайтинг?

Следующая статья →Продвижение сайтов в сети: пошаговое руководство по SEO и GEO с нуля