В каком формате хранить картинки на сайте?

Фотографии — в WebP или AVIF (они на 25–50% легче JPEG) с запасным JPEG через тег picture; иконки и логотипы — в SVG (векторные, минимальный вес); PNG — только где нужна прозрачность и нет WebP.

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

Сначала уменьшите фото до реального размера отображения (не грузите 4000px на место под 800px), затем сожмите до качества 75–85% — визуально это неотличимо от 100%, но вес в разы меньше. Конвертируйте в WebP/AVIF и уберите EXIF-метаданные.

Зачем нужен loading="lazy" и width/height у картинок?

loading="lazy" откладывает загрузку изображений вне экрана — страница показывается быстрее (улучшает метрику LCP). Атрибуты width и height резервируют место под картинку, чтобы вёрстка не «прыгала» при загрузке — это улучшает метрику стабильности CLS.

Влияет ли вес картинок на SEO?

Да, косвенно, но сильно. Тяжёлые изображения замедляют загрузку, ухудшают Core Web Vitals (LCP) и повышают отказы, а скорость и поведенческие факторы влияют на позиции. Оптимизация картинок — один из самых эффективных способов ускорить сайт.

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

Ориентир: крупное фото на всю ширину — 100–300 КБ после сжатия, картинка в тексте — десятки килобайт, иконка в SVG — единицы. Вся страница в идеале укладывается в пару мегабайт. Если одно фото весит больше мегабайта, его почти наверняка забыли уменьшить и сжать.

Что такое адаптивные картинки (srcset)?

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

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

Картинки — обычно самая тяжёлая часть страницы: они занимают больше всего веса и сильнее всего тормозят загрузку. А скорость влияет и на позиции (Core Web Vitals), и на поведение посетителей. Хорошая новость: вес фото можно сократить в разы почти без потери качества. Разберём как.

Почему это важно

Непережатая фотография с телефона может весить 3–8 МБ. Десяток таких на странице — и она грузится секундами, особенно на мобильном интернете. Это бьёт по метрике LCP из Core Web Vitals, повышает отказы и косвенно тянет позиции вниз. Оптимизированные изображения часто весят в 5–10 раз меньше при том же визуальном качестве.

Уменьшение размера, сжатие и WebP режут вес в разы — глазу разница незаметна.

Шаг 1: выберите правильный формат

Половина успеха — формат. Современные WebP и AVIF сжимают заметно сильнее старых JPEG и PNG:

Формат	Для чего	Вес
JPEG	Фотографии (без прозрачности)	Средний
PNG	Логотипы, скриншоты, прозрачность	Большой
WebP	Замена JPEG и PNG — фото и графика	−25–35%
AVIF	Самое сильное сжатие фото	−50%
SVG	Иконки, логотипы (векторные)	Минимальный

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

Шаг 2: сожмите и уменьшите

Подгоните размер. Не грузите фото 4000px, если место под него 800px. Уменьшите до реального размера отображения (×2 для Retina).

Сожмите. Качество 75–85% для JPEG/WebP визуально неотличимо от 100%, но весит в разы меньше.

Конвертируйте в WebP/AVIF. Отдавайте современный формат через тег <picture> с запасным JPEG.

Уберите метаданные. EXIF (гео, камера) не нужны на сайте и добавляют вес.

🛠

Уменьшить вес JPG, PNG и WebP прямо в браузере поможет сжатие изображений — без загрузки на сторонние серверы. Проверить общий вес и скорость страницы — скорость загрузки сайта.

Шаг 3: правильно подключите на странице

loading="lazy" — откладывает загрузку картинок вне экрана, страница показывается быстрее (улучшает LCP).
width и height — задавайте у каждого изображения: браузер резервирует место, и вёрстка не «прыгает» (метрика CLS).
alt — описание для поиска по картинкам и доступности.
<picture> с источниками WebP/AVIF и запасным JPEG — современные браузеры берут лёгкий формат, старые — обычный.

⚡

Сжатие картинок — один из главных рычагов скорости. Как это влияет на ранжирование и метрики LCP/CLS — в статье Core Web Vitals простым языком, а общий разбор скорости — как ускорить загрузку сайта.

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

Точных норм нет, но есть здоровые ориентиры. Крупное фото на всю ширину — обычно 100–300 КБ после сжатия, картинка в тексте — десятки килобайт, иконка в SVG — единицы. А вся страница целиком в идеале укладывается в пару мегабайт со всеми картинками, скриптами и стилями. Если одна фотография весит больше мегабайта — почти наверняка её забыли уменьшить и сжать. Простой ориентир: открыли страницу, она «думает» на загрузке — первым делом смотрите вес изображений.

Адаптивные картинки: одна на всех — плохо

Частая ошибка — отдавать телефону ту же огромную картинку, что и большому монитору. Зачем смартфону фото шириной 2000 пикселей, если экран в несколько раз уже? Решает это атрибут srcset: вы готовите несколько размеров одной картинки, а браузер сам выбирает подходящий под экран и плотность пикселей. Маленькому экрану — лёгкая версия, большому — крупная. Это особенно важно для мобильных, где и трафик дороже, и скорость критичнее.

Автоматизация: плагины и CDN

Сжимать каждую картинку руками утомительно, и на большом сайте это делают автоматически. На WordPress есть плагины оптимизации изображений, которые сжимают и переводят в WebP при загрузке. На любом сайте выручает image-CDN: он на лету отдаёт картинки в нужном формате и размере под каждое устройство, сам кэширует и сжимает. Один раз настроили — и новые изображения оптимизируются без вашего участия. Для небольшого сайта хватит ручного сжатия через инструмент, для крупного — автоматизация окупается быстро.

Частые ошибки со сжатием

Их немного, и все типовые. Грузят фотографии в PNG — он тяжелее JPEG и WebP в разы (PNG нужен только для прозрачности). Не уменьшают размер: картинка 4000 пикселей на месте под 800 — это балласт. Сжимают слишком сильно, до видимых артефактов и «замыленности» — золотая середина 75–85%. Забывают про lazy-load и width/height, теряя в скорости и стабильности вёрстки. И не задают alt, упуская трафик из поиска по картинкам.

Коротко

Изображения — самый тяжёлый элемент страницы, и их вес легко сократить в разы. Выбирайте формат (фото → WebP/AVIF, иконки → SVG), уменьшайте до реального размера отображения, сжимайте до качества 75–85% и убирайте EXIF. На странице добавляйте loading="lazy", width/height и alt, отдавайте современные форматы через <picture>. Это ускоряет сайт, улучшает Core Web Vitals и поведенческие факторы.