HTML-элементы для мультимедиа в 2025: как использовать picture, audio и video с новыми форматами AVIF и WebM

Я веб-разработчик с 10-летним опытом. Сегодня мы разберем, как эффективно работать с мультимедиа в 2025 году. От адаптивной загрузки изображений до оптимизации видео. Вы узнаете, как использовать форматы AVIF и WebM, сравните их с классическими решениями и научитесь внедрять медиа так, чтобы сайты грузились мгновенно даже на слабых соединениях.

Почему мультимедиа это вызов для современного веба?

Современные пользователи ожидают, что сайты будут не только функциональными, но и визуально впечатляющими. Однако высокое разрешение изображений и 4K-видео увеличивают вес страниц, что приводит к долгой загрузке и потере аудитории. В 2025 году эта проблема решается за счет:

• Новых форматов (AVIF, WebM) с улучшенным сжатием.
• Адаптивной загрузки медиа через <picture> и атрибуты srcset.
• «Умного» управления ресурсами с помощью <audio> и <video>.

Давайте разбираться, как это работает.

Элемент <picture>: адаптивные изображения и AVIF

Элемент <picture> позволяет загружать разные версии изображений в зависимости от условий (размер экрана, плотность пикселей, поддержка форматов).

Пример кода с AVIF и WebP

<picture> 
  <source 
    srcset="image.avif" 
    type="image/avif" 
    media="(min-width: 1200px)" 
  > 
  <source 
    srcset="image.webp" 
    type="image/webp" 
  > 
  <img 
    src="image.jpg" 
    alt="Пример адаптивного изображения" 
    loading="lazy" 
  > 
</picture>

Как это работает:

1. Браузер выбирает первый подходящий <source>. Если разрешение экрана ≥ 1200px и поддерживается AVIF — загрузится image.avif.
2. Если AVIF не поддерживается, но есть WebP — будет использован image.webp.
3. В старых браузерах сработает fallback на <img>.

Почему AVIF?

• Сжатие на 30-50% эффективнее, чем WebP.
• Поддержка HDR и 12-битной глубины цвета.
• Открытый формат (разработан Alliance for Open Media).

<video> и WebM: оптимизация видео в 2025

Формат WebM (с кодеком AV1) стал стандартом для веба благодаря малому размеру и высокой четкости.

Пример встраивания видео с адаптивной загрузкой

<video controls width="800"> 
  <source src="video.webm" type="video/webm; codecs=av01"> 
  <source src="video.mp4" type="video/mp4"> 
  Ваш браузер не поддерживает HTML5-видео. 
</video>

Совет: Используйте атрибут preload="metadata", чтобы браузер загружал только метаданные видео до воспроизведения.

Сравнение форматов видео (2025)

<audio>: не забываем о звуке

Для аудио в 2025 актуальны форматы Opus (в контейнере WebM) и MP3 как fallback.

<audio controls> 
  <source src="track.weba" type="audio/webm; codecs=opus"> 
  <source src="track.mp3" type="audio/mpeg"> 
</audio>

Адаптивная загрузка

Для изображений: srcset и sizes

<img 
  srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" 
  sizes="(max-width: 600px) 480px, (max-width: 1200px) 768px, 1200px" 
  src="medium.jpg" 
  alt="Адаптивное изображение" 
>

Для видео: JavaScript + Media Queries

const video = document.querySelector('video'); 
const updateVideoSource = () => { 
  if (window.matchMedia('(max-width: 768px)').matches) { 
    video.src = 'mobile.webm'; 
  } else { 
    video.src = 'desktop.webm'; 
  } 
}; 
window.addEventListener('resize', updateVideoSource); 
updateVideoSource();

Инструменты для конвертации

1. AVIF: Используйте Squoosh или библиотеку sharp в Node.js.
2. WebM: FFmpeg с параметром -c:v av1.

Пример конвертации в AVIF через Node.js:

const sharp = require('sharp'); 
sharp('input.jpg') 
  .avif({ quality: 80 }) 
  .toFile('output.avif');

Рекомендации

1. Приоритет форматов. AVIF → WebP → JPEG для изображений; WebM → MP4 для видео.
2. Сжимайте медиа без потерь качества (порог PSNR ≥ 40 dB).
3. Тестируйте на реальных устройствах. iPhone 18 и бюджетных Android.
4. Ленивая загрузка. Добавляйте loading="lazy" для изображений вне вьюпорта.

У вас остались вопросы? Пишите в комментариях, помогу с реализацией!