RICG — что это такое во frontend-разработке

Коротко

Открытое сообщество (community group) при W3C, которая продвинула в стандарт HTML элемент picture и атрибуты srcset и sizes — механизм выдачи разных картинок под разные экраны.

Что такое «RICG»

В начале 2010-х сайты начали массово переходить на гибкую вёрстку, и выяснилось, что для картинок в HTML нет нормального решения. Телефон скачивал ту же фотографию шириной 2000 пикселей, что и большой монитор, а на экранах высокой плотности маленькие картинки выглядели мыльными. Разработчики обходили проблему скриптами, которые подменяли адрес изображения уже после начала загрузки, — это было медленно и ненадёжно.

Responsive Images Community Group собрала разработчиков, которые хотели решить задачу на уровне языка разметки. Группа работала в формате community group — открытого сообщества при W3C, куда может вступить любой желающий. Её предложения в итоге вошли в спецификацию HTML и были реализованы во всех основных браузерах. Позже группа сменила название на Responsive Issues Community Group и занималась другими задачами адаптивной вёрстки.

Что получилось в результате

srcset — список файлов одной картинки с шириной или плотностью пикселей; браузер выбирает подходящий сам.
sizes — подсказка, какую ширину картинка займёт в макете при разных размерах окна.
picture — обёртка с несколькими source, когда нужно показать другой кадр или другой формат файла.

Пример разметки

<picture>
  <source type="image/avif" srcset="hero-800.avif 800w, hero-1600.avif 1600w">
  <img src="hero-800.jpg"
       srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
       sizes="(min-width: 1024px) 50vw, 100vw"
       width="1600" height="900" alt="Офис компании">
</picture>

Браузер, который понимает AVIF, возьмёт файл из source, остальные — JPEG из img. Нужный размер выбирается по sizes и плотности пикселей экрана, а старый браузер просто покажет src.

Почему это важно сейчас

Пока браузеры не поддерживали новые атрибуты, многие пользовались полифилом Picturefill. Сегодня он не нужен: поддержка есть везде. Работа группы — пример того, как стандарт рождается из практики разработчиков, а не только из предложений производителей браузеров. Для владельца сайта результат вполне ощутимый: правильно размеченные картинки экономят трафик на телефонах и ускоряют загрузку страниц, что учитывается в Core Web Vitals.