Какие изображения использовать на сайте, какие должны быть размеры, форматы, что лучше. Коротко и по делу.
Лучший формат — WebP
WebP обеспечивает лучшее сжатие без потери качества. Файлы на 25–35% легче, чем PNG и JPG.
Другие форматы (когда использовать)
JPEG/JPG — для фотографий и сложных изображений с градиентами. Не подходит для логотипов и текста (будут артефакты).
PNG — для логотипов, иконок, скриншотов, изображений с прозрачностью. Весит больше, чем WebP.
SVG — для логотипов, иконок, простых иллюстраций. Масштабируется без потери качества, весит мало.
AVIF — новый формат, сжимает ещё лучше WebP (на 20–30%). Но поддерживается не всеми браузерами (Chrome, Firefox, Safari — да, старые версии — нет).
Какие должны быть размеры файлов?
Оптимальные значения
Фоновые и крупные изображения (на всю ширину экрана) — до 200–300 КБ, в идеале 100–150 КБ.
Изображения в карточках товаров/статей — до 50–100 КБ.
Иконки и мелкие элементы — до 10–20 КБ.
Общий вес всех изображений на странице — не более 1–2 МБ.
Почему это важно
Страница тяжелее 2–3 МБ загружается медленно, особенно на мобильном интернете. Это увеличивает отказы и снижает позиции в поиске.
Физические размеры (ширина × высота)
Баннер на всю ширину (десктоп) — 1920×600–800 px
Изображение в статье (внутри контента) — 800х800 (квадратное лучше), 800×500 px или 1200×800 px
Карточка товара/поста — 800х800 (квадратное лучше), 400×300 px или 500×500 px
Аватарка/логотип — 200×200 px или 300×300 px
Миниатюра (preview) — 150×150 px
Иконка (favicon) — 32×32 px, 64×64 px, 180×180 px (для мобильных)
Важное правило
Не загружайте изображение 2000×1500 px, если на сайте оно отображается в размере 400×300 px. Это лишний вес и медленная загрузка.
Атрибут alt — обязателен
alt — текстовое описание изображения. Нужен для:
— Слепых пользователей (скринридеры зачитывают alt).
— Поисковых систем (понимают содержание картинки).
— Случаев, когда картинка не загрузилась (показывается текст).
Как правильно писать alt
Коротко и по делу — 3–7 слов, без «картинка», «фото», «изображение».
Примеры:
Верно - data-alt="Красный кроссовок Nike Air Max"
Не верно - data-alt="Картинка кроссовка"
Верно - alt="Логотип компании Ромашка"
Не верно - alt="Лого"
Способ вставки (HTML)
Для обычного изображения:
<img src="/images/shop/krossovok.webp" alt="Красный кроссовок Nike Air Max" width="400" height="300" loading="lazy">Для адаптивных изображений (разные размеры под разные экраны):
<picture>
<source srcset="/image.avif" type="image/avif">
<source srcset="/image.webp" type="image/webp">
<img src="/image.jpg" alt="Описание" width="800" height="600" loading="lazy">
</picture>Итог: чек-лист хорошего изображения
- Формат WebP (или AVIF с fallback)
- Размер файла не более 100–200 КБ (для крупных)
- Физические размеры соответствуют месту на странице
- Атрибут alt заполнен осмысленно
- Добавлен loading="lazy" (отложенная загрузка)
- Указаны width и height (чтобы не прыгала вёрстка)
Как добавить изображения в конструкторе сайтов
Вы можете посмотреть видео в личном кабинете клиента:
