Картинки: размеры, подписи, сжатие

Картинки делают страницу живой — но легко превращают её в «тормоз». Задача простая: дать смысл и качество без лишнего веса. Ниже — правила, по которым сайт остаётся и красивым, и быстрым.

1) Правильный размер (не больше, чем нужно)

Готовьте изображение под тот блок, где оно будет. Не грузите «обои на 8К», если картинка занимает половину экрана.

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

• обложка/герой: 1600–2000 px
• картинка в тексте: 1000–1400 px
• превью/карточки: 400–800 px

Как понять: увеличьте страницу до 125–150%. Картинка остаётся чёткой? Размер ок. Если размыто — дайте больше ширину (но без фанатизма).

2) Сжатие без потери смысла

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

Ориентиры по весу:

• обложка: до ~300–400 КБ
• в тексте: 120–250 КБ
• превью: 40–100 КБ

Как понять: страница с 5–8 картинками грузится быстро по мобильной сети — хорошо. Видны артефакты — чуть поднимите качество.

3) Форматы по задаче

• Фото: JPG или WebP.
• Логотипы/иконки: SVG (идеально) или PNG при прозрачности.
• Скриншоты/схемы: часто лучше PNG/WebP, чтобы текст оставался резким.

Как понять: нужен прозрачный фон — не JPG. Лого мылится при увеличении — делайте SVG.

4) Подписи и alt-тексты: смысл не исчезает

Подпись поясняет, что на картинке и зачем она здесь.
Alt-текст — для тех, кто картинку не видит (читалки/медленный интернет).

Шпаргалка для alt: «Что?» + «Зачем?» — коротко, без “картинка того-то”.
Пример: «Схема этапов записи: заявка → подтверждение → оплата».

Как понять: «спрячьте» картинку (DevTools/бумажка). Смысл остаётся из подписи и alt? Отлично.

5) Единые пропорции и аккуратное кадрирование

Выберите 1–2 формата для карточек (например, 4:3 или 1:1) и держитесь их — сетка не «скачет».

Кадрирование: важное — в центре (safe area). Для портретов — чуть выше центра.

Как понять: быстро прокрутите ленту. Блоки одной высоты? Ряды не «пляшут»? Значит, пропорции выдержаны.

6) Имена и порядок — экономят часы

Давайте файлам понятные имена: uslugi-prices-2025-hero.jpg, а не IMG_8392.jpg.
Храните по разделам: /images/blog/2025/....

Как понять: найдёте нужную картинку через месяц за 30 секунд? Значит, структура удачная.

7) Маленькие бонусы скорости

Если платформа умеет — включите ленивую загрузку (ниже экрана подгружается позже) и адаптивные размеры (для телефона — меньший вариант).

Как понять: на мобильной сети верх страницы появляется быстрее низа — это «ленивая» загрузка.

---

Мини-чеклист на 10 минут

• Картинки не шире, чем нужно под блок.
• Вес: обложки ≤ 400 КБ, обычные ≤ 250 КБ, превью ≤ 100 КБ.
• Форматы: фото — JPG/WebP; логотипы — SVG/PNG; скриншоты — PNG/WebP.
• У важных картинок есть подпись и/или alt-текст.
• Карточки держат одну пропорцию (например, 4:3).
• Имена понятные, папки — по разделам.
• На мобильной всё грузится быстро и выглядит аккуратно.

С такими правилами изображения «работают» на смысл и скорость — сайт остаётся приятным и живым даже на слабом интернете.