Оптимизация изображений
Тема дорожной карты · Frontend разработчик
Оптимизация изображений — это процесс уменьшения размера файлов изображений и накладных расходов на их доставку без ощутимой потери качества, и это одна из наиболее результативных техник улучшения Largest Contentful Paint (LCP) и общих показателей Core Web Vitals. Современная оптимизация изображений начинается с выбора правильного формата: WebP и AVIF обеспечивают значительно меньший размер файлов по сравнению с JPEG или PNG при том же визуальном качестве и поддерживаются всеми основными браузерами. HTML-элемент <picture> с атрибутами srcset и sizes обеспечивает адаптивные изображения — отдавая подходящие по размеру варианты в зависимости от viewport, — тогда как атрибут loading="lazy" откладывает загрузку внеэкранных изображений до их появления в поле зрения. Фреймворки Next.js предоставляют встроенный компонент <Image>, автоматизирующий изменение размера, конвертацию форматов и ленивую загрузку; аналогичные возможности предлагает интеграция @astrojs/image для Astro; подтвердить улучшение помогут аудиты Lighthouse «Properly size images» и «Serve images in next-gen formats».
Как это работает
Оптимизация изображений меряется Core Web Vitals: LCP (Largest Contentful Paint, цель < 2.5s), INP (Interaction to Next Paint, цель < 200ms), CLS (Cumulative Layout Shift, цель < 0.1). Инструменты: Chrome DevTools Performance + Lighthouse, WebPageTest, real-user monitoring (Sentry, web-vitals lib). Победы: минимизация JS-бандла (code split, tree shake), современные форматы (AVIF/WebP для картинок, woff2 для шрифтов), lazy-load below-the-fold, preconnect к API, CDN.
Когда применять
Оптимизируйте по реальным данным юзеров (RUM), не только lab-тестам на гигабитном wifi. Performance-бюджеты в CI (bundle-size-action); вальте PR при превышении. Performance — это фича: каждый квартал спринт на неё. Lighthouse < 80 на mobile = оставляете платящих юзеров за бортом.
Типичные ошибки
Ловушки Оптимизация изображений: оптимизация на "100 Lighthouse" без реальных юзеров (другие боттлнеки); preload всего ("preconnect/prefetch-шум" жрёт bandwidth); JS-тяжёлые "loading"-state маскируют реальный баг (большой бандл); анимация layout-затрагивающих свойств (используйте transform + opacity для дешёвого GPU compositing). Профилируйте на реальных mid-range mobile, не на M-series Mac.