Практическое руководство по <img>: от основ до LCP

Большинство проблем с перформансом на странице — это не сложные алгоритмы, а банально картинки. И часто — неправильно настроенный <img>. Джоан Леон в своём гайде разбирает элемент <img> не поверхностно, а системно — от базовых атрибутов до влияния на LCP и CLS.

Что внутри:

• 📐 width и height — почему они обязательны в 2026, если не хотите ловить CLS
• 🖼 srcset + sizes — как реально работает выбор источника браузером (и где чаще всего ошибаются)
• 🌐 <picture> + AVIF / WebP — стратегия постепенной деградации форматов
• 💤 loading="lazy" — когда он вредит LCP
• ⚡️ decoding и fetchpriority — тонкая настройка загрузки
• 🚀 Когда стоит добавить rel="preload" для LCP-изображения
• 🌍 И почему даже в эпоху HTTP/3 CDN всё ещё имеет смысл

Интересный инсайты:

• 🧠 fetchpriority="high" для hero-картинки иногда эффективнее, чем preload. Потому что preload может начать загрузку слишком рано и конкурировать с CSS, а fetchpriority просто корректно поднимает приоритет внутри текущей очереди браузера. Меньше риска «перестараться».
• 🧠 srcset без правильно рассчитанного sizes часто бессмысленен. Если sizes не соответствует реальной вёрстке, браузер выберет не тот ресурс, и вы либо переплатите за лишние килобайты, либо ухудшите чёткость.

В целом — это не просто «что такое img», а концентрат практики по тому, как не ломать Core Web Vitals из-за картинок.

Читать