0Pricing
Frontend Academy · Урок

Оптимизация изображений: ленивая загрузка и формат WebP

Добавляйте loading=lazy к изображениям, отдавайте современные форматы WebP и AVIF, используйте адаптивные изображения с srcset и sizes и задавайте явные width и height, чтобы предотвратить смещение макета.

«Оптимизация изображений: ленивая загрузка и формат WebP» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Изображения составляют основную часть веса страницы

Размер медианной веб-страницы составляет около 2 МБ, и примерно половина этого объёма приходится на изображения. Оптимизация изображений — самая эффективная задача для повышения производительности.

Современные форматы: WebP и AVIF

WebP на 25–35% меньше JPEG при сопоставимом качестве и поддерживается всеми современными браузерами. AVIF ещё меньше (объём сокращается на 50%), но медленнее кодируется. Используйте оба формата с резервным вариантом.

Элемент picture

Используйте <picture>, чтобы отдавать AVIF при наличии поддержки, затем WebP, а в качестве окончательного резервного варианта — JPEG.

<picture>
  <source srcset="/photo.avif" type="image/avif">
  <source srcset="/photo.webp" type="image/webp">
  <img src="/photo.jpg" alt="Description" width="800" height="600">
</picture>

Встроенная отложенная загрузка

Добавляйте loading="lazy" к изображениям, расположенным ниже видимой области. Браузер откладывает загрузку, пока изображение не приблизится к области просмотра, и для этого не требуется JavaScript.

<img src="/post-1.webp" alt="" width="800" height="450" loading="lazy">

<!-- Don't lazy-load the hero — it should load eagerly: -->
<img src="/hero.webp" alt="" width="1200" height="600" fetchpriority="high">

Адаптивные изображения с помощью srcset и sizes

Отдавайте изображения меньшего размера на небольших экранах. srcset перечисляет варианты изображений с указанием их ширины, а sizes сообщает браузеру, какой ширины будет изображение в каждой контрольной точке.

<img
  src="/photo-800.jpg"
  srcset="/photo-400.jpg 400w,
          /photo-800.jpg 800w,
          /photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="" width="800" height="600">

Зачем явно задавать width и height

Браузер резервирует место на основе атрибутов width и height, предотвращая смещение макета при загрузке изображения. Современные браузеры автоматически вычисляют соотношение сторон на основе этих атрибутов.

decoding="async"

Добавьте decoding="async", чтобы разрешить браузеру декодировать изображение вне главного потока и освободить его для отрисовки другого содержимого.

<img src="/photo.webp" alt="" width="800" height="600" loading="lazy" decoding="async">

CDN для изображений

CDN для изображений (Cloudinary, imgix, Vercel Image Optimization, Cloudflare Images) преобразуют изображения на лету: изменяют размер, конвертируют в WebP/AVIF, сжимают и отдают из пограничных кэшей.

<!-- Cloudinary auto-format and auto-quality -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/photo.jpg" alt="" width="800" height="600">

Компонент изображения Next.js

<Image> в Next.js из коробки обрабатывает адаптивный srcset, преобразование в WebP, отложенную загрузку и размытый заполнитель.

import Image from 'next/image';

<Image
  src="/photo.jpg"
  alt="Description"
  width={800}
  height={600}
  placeholder="blur"
  priority={isHero}
/>

Сжатие JPEG и PNG

Если вы не можете перейти на WebP, как минимум сжимайте изображения: используйте Squoosh (squoosh.app) для отдельных изображений, ImageOptim для пакетной обработки или sharp в скрипте сборки.

SVG для значков и логотипов

Используйте SVG для значков, логотипов и любых векторных изображений. SVG идеально масштабируются, занимают мало места и могут стилизоваться с помощью CSS. Встраивайте небольшие SVG непосредственно в страницу, чтобы избежать дополнительного HTTP-запроса.

Быстрая проверка

Какой атрибут HTML указывает браузеру отложить загрузку изображения, пока оно не приблизится к области просмотра?

Итоги: оптимизация изображений

Используйте современные форматы (AVIF, WebP) через элемент picture. Добавляйте loading="lazy" для содержимого ниже видимой области и fetchpriority="high" для главного изображения. Явно задавайте width и height, чтобы предотвратить CLS. Используйте srcset и sizes для адаптивных изображений. CDN для изображений автоматизируют преобразование. Компонент Image в Next.js обрабатывает всё это. Используйте SVG для значков.

Часто задаваемые вопросы

Урок «Оптимизация изображений: ленивая загрузка и формат WebP» бесплатный?

Да — полный текст урока «Оптимизация изображений: ленивая загрузка и формат WebP» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Оптимизация изображений: ленивая загрузка и формат WebP»?

Добавляйте loading=lazy к изображениям, отдавайте современные форматы WebP и AVIF, используйте адаптивные изображения с srcset и sizes и задавайте явные width и height, чтобы предотвратить смещение м… Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Оптимизация изображений: ленивая загрузка и формат WebP»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Основные веб-показатели: LCP, FID и CLS
  2. Аудиты и оценка Lighthouse
  3. Оптимизация изображений: ленивая загрузка и формат WebP
  4. Разделение кода и ленивые маршруты
← Назад к Frontend Academy