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

Почему оптимизация изображений важна для сайта

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

Для поисковых систем скорость тоже имеет значение. Google оценивает удобство страниц через показатели Core Web Vitals: LCP (время загрузки самого крупного элемента первого экрана), CLS (сдвиги макета) и INP (отзывчивость). На многих сайтах именно главное изображение или баннер становятся элементом LCP, поэтому лёгкие и правильно подключённые картинки напрямую улучшают этот показатель. Само по себе сжатие не гарантирует рост позиций, но медленная страница проигрывает при прочих равных.

Третья причина — поиск по картинкам и понимание контента. Понятные имена файлов, описательные alt-тексты и изображения, которые действительно относятся к теме страницы, помогают поисковикам и ИИ-ассистентам правильно понять, о чём страница, и показывать её в Google Картинках.

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

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

Практическое правило: фотографии и баннеры отдавайте в WebP (или AVIF с запасным WebP/JPEG), логотипы и иконки — в SVG, а PNG оставляйте для случаев, где важны чёткие края и прозрачность и нет возможности использовать WebP.

Как сжимать изображения без потери качества

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

Сжатие с потерями и без потерь

Сжатие без потерь убирает служебную информацию и оптимизирует кодирование, не меняя ни одного пикселя. Сжатие с потерями отбрасывает детали, которые глаз почти не замечает, и даёт гораздо больший выигрыш. Для фотографий почти всегда используют сжатие с потерями: качество в районе 75–85% для JPEG и WebP обычно выглядит так же, как оригинал, но весит намного меньше. Точное значение лучше подбирать на глаз, сравнивая результат на реальном экране.

Инструменты

• Squoosh — бесплатный онлайн-инструмент, позволяет сравнить оригинал и сжатую версию и сразу сохранить в WebP или AVIF;
• TinyPNG / TinyJPG — быстрое сжатие PNG, JPEG и WebP;
• ImageOptim (macOS) и аналоги — пакетная обработка без потерь;
• плагины для CMS, которые сжимают и конвертируют изображения автоматически при загрузке (о них ниже).

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

Какие размеры изображений использовать

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

Ориентиры по ширине

• полноширинный баннер или первый экран — 1600–1920 px для больших мониторов, плюс уменьшенные версии для мобильных;
• изображение в тексте статьи — по ширине колонки контента (часто 800–1200 px);
• карточки товаров, превью, миниатюры — 300–600 px;
• для экранов с высокой плотностью пикселей (Retina) — версия примерно в 2 раза шире отображаемого размера, но только через srcset, а не для всех устройств сразу.

Адаптивные изображения: srcset и sizes

Атрибут srcset позволяет указать несколько версий одной картинки разной ширины, а sizes — подсказать браузеру, какую ширину изображение займёт на экране. Браузер сам выберет подходящий файл: телефон скачает лёгкую версию на 480–800 px, широкий монитор — большую. Так один и тот же сайт остаётся быстрым на мобильных и чётким на больших экранах.

Указывайте width и height

Атрибуты ширины и высоты (или заданное в CSS соотношение сторон) резервируют место под картинку до её загрузки. Без них текст «прыгает», когда изображение появляется, — это ухудшает CLS и раздражает пользователей, которые уже начали читать или собирались нажать кнопку.

Lazy loading: как правильно настроить отложенную загрузку

Отложенная загрузка (атрибут loading=»lazy») откладывает скачивание картинок, которые находятся ниже первого экрана, до момента, когда пользователь до них прокрутит. Это экономит трафик и ускоряет первую отрисовку страницы, особенно на длинных страницах с галереями, каталогами и статьями.

Важное исключение — изображения первого экрана. Главный баннер, фото товара или обложку статьи, которые пользователь видит сразу, лениво загружать нельзя: браузер начнёт их скачивание позже, и LCP ухудшится. Для такого изображения, наоборот, полезно указать fetchpriority=»high», чтобы браузер загрузил его в первую очередь. Обычно достаточно не применять lazy loading к первым одному–двум изображениям страницы.

Alt-тексты и названия файлов

Alt-текст нужен прежде всего людям: его зачитывают программы экранного доступа, и он показывается, если картинка не загрузилась. Поисковые системы используют его, чтобы понять содержание изображения. Хороший alt коротко и конкретно описывает, что изображено и зачем картинка на этой странице.

• плохо: «img_2041», «фото», «купить диван купить диван недорого»;
• хорошо: «Угловой диван серого цвета в интерьере гостиной»;
• декоративным элементам (фоновые узоры, разделители) alt можно оставить пустым, чтобы не засорять страницу.

Название файла тоже стоит делать понятным, латиницей, через дефис: uglovoj-divan-seryj.webp вместо IMG_2041.JPG. Ключевые слова уместны, если они честно описывают картинку, — перечислять запросы в alt и имени файла не нужно.

CDN и кеширование изображений

Даже оптимизированные картинки грузятся медленнее, если сервер далеко от пользователя или каждый раз отдаёт их заново. Две вещи заметно помогают:

• кеширование в браузере — сервер отдаёт изображения с долгим сроком хранения, и при повторных визитах и переходах между страницами они берутся из кеша;
• CDN (сеть доставки контента) — копии файлов хранятся на серверах в разных регионах и отдаются с ближайшего к посетителю; многие CDN умеют на лету конвертировать картинки в WebP или AVIF и уменьшать их под нужный размер.

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

Оптимизация изображений в WordPress

WordPress сам создаёт несколько уменьшенных копий каждой загруженной картинки и выводит их через srcset, а с версии 5.5 добавляет loading=»lazy» к изображениям в контенте. Но этого недостаточно: исходный файл по-прежнему нужно загружать разумного размера, а конвертацию в WebP и дополнительное сжатие обычно берут на себя плагины.

• плагины сжатия и конвертации (например, WebP Express, EWWW Image Optimizer, ShortPixel, Imagify) — оптимизируют новые загрузки и могут обработать уже существующую медиатеку;
• плагины кеширования — помогают с заголовками кеша и отложенной загрузкой;
• проверка темы — часто проблема в самом шаблоне: тема выводит полноразмерный оригинал вместо подходящей миниатюры или ставит lazy loading на первый экран.

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

Как проверить, что изображения оптимизированы

Проверку удобно начать с бесплатного сервиса PageSpeed Insights от Google. Введите адрес страницы и посмотрите мобильную версию отчёта:

• показатель LCP и то, какой элемент им является, — если это картинка, именно её нужно ускорять в первую очередь;
• рекомендации «Настройте подходящий размер изображений», «Используйте современные форматы изображений», «Настройте эффективную кодировку изображений»;
• предупреждение о том, что изображение LCP загружается с отложенной загрузкой;
• показатель CLS — если он высокий, проверьте, заданы ли размеры у картинок.

Дополнительно полезно открыть вкладку «Сеть» (Network) в инструментах разработчика браузера, отфильтровать изображения и отсортировать их по размеру: самые тяжёлые файлы сразу будут видны. Для регулярного контроля стоит проверять ключевые страницы после каждого крупного обновления — это удобно делать в рамках регулярной технической поддержки сайта.

Типичные ошибки при работе с изображениями

• загрузка фото «как есть» с телефона или камеры, с огромным разрешением и весом;
• использование PNG для фотографий;
• одна большая версия картинки для всех устройств без srcset;
• lazy loading на главном изображении первого экрана;
• отсутствие width и height, из-за чего вёрстка сдвигается при загрузке;
• пустые или бессмысленные alt-тексты на важных изображениях — или, наоборот, alt, набитый ключевыми словами;
• названия файлов вида IMG_2041.JPG;
• фоновые изображения огромного размера, подключённые через CSS, о которых забывают при оптимизации;
• отсутствие кеширования изображений на сервере.

Чек-лист оптимизации изображений

• размер файла соответствует размеру отображения (с версией для Retina через srcset);
• фото и баннеры — в WebP или AVIF с запасным форматом, логотипы и иконки — в SVG;
• файлы сжаты перед загрузкой или автоматически плагином;
• есть srcset и sizes для изображений, которые меняют размер на разных экранах;
• у картинок заданы width и height или соотношение сторон;
• lazy loading включён для изображений ниже первого экрана и выключен для главного;
• у важных изображений понятный alt, у файлов — понятные имена;
• настроено кеширование, при необходимости подключён CDN;
• ключевые страницы проверены в PageSpeed Insights на мобильной версии.

Частые вопросы

Какой формат изображений лучше всего использовать на сайте?

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

Сколько должна весить картинка для сайта?

Единого лимита нет — ни у Google, ни в стандартах. Изображение должно быть настолько лёгким, насколько возможно без видимой потери качества в том размере, в котором оно показывается. Обычно для этого достаточно уменьшить разрешение до нужной ширины и сохранить файл в WebP с качеством около 75–85%.

Влияет ли оптимизация изображений на SEO?

Да, косвенно и напрямую. Лёгкие картинки ускоряют загрузку и улучшают Core Web Vitals, прежде всего LCP, а это один из сигналов удобства страницы. Понятные alt-тексты и названия файлов помогают показываться в поиске по картинкам и дают поисковикам дополнительный контекст о содержании страницы.

Нужно ли включать lazy loading для всех изображений?

Нет. Отложенную загрузку стоит включать для картинок ниже первого экрана. Главное изображение, которое пользователь видит сразу после открытия страницы, должно загружаться без задержки — иначе ухудшится LCP. Для него, наоборот, можно указать fetchpriority=»high».

Как быстро проверить, какие картинки тормозят сайт?

Откройте страницу в PageSpeed Insights и посмотрите элемент LCP и рекомендации по изображениям. Затем во вкладке «Сеть» инструментов разработчика отсортируйте файлы по размеру — самые тяжёлые изображения будут в начале списка, с них и стоит начинать.

Лёгкие изображения — быстрый сайт и больше заявок

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

Начните с ключевых страниц — главной, услуг, популярных товаров и статей: проверьте их в PageSpeed Insights, исправьте самые тяжёлые картинки и настройте автоматическое сжатие новых загрузок. А если нужно комплексно ускорить сайт и улучшить его видимость в поиске, это хорошо сочетается с SEO-продвижением сайта.