Тема: images
-
Адаптивные изображения с srcset, sizes и picture
srcset с дескрипторами ширины и атрибут sizes позволяют браузеру выбрать наименьший файл, заполняющий место изображения при текущих размере области просмотра и плотности пикселей. Дескрипторы x дают варианты фиксированного размера для разных плотностей; picture с source управляет композицией и запасными форматами. Сохраняйте width и height, чтобы загрузка не сдвигала макет.
-
Оптимизация изображений при сборке: оригиналы, ряд размеров, форматы кодирования и удаление метаданных
Храните оригиналы вне веб-корня, получайте из них все размеры и форматы на воспроизводимом этапе сборки, преобразуйте в sRGB и по умолчанию удаляйте метаданные (sharp делает это без keepMetadata, а cwebp ничего не копирует без указания -metadata), именуйте результаты по источнику и ширине либо хешу содержимого и проверяйте exiftool, что EXIF и GPS не сохранились.
-
Image delivery: AVIF and WebP with fallbacks, lazy loading and fetch priority
Serve modern formats through picture sources with a type attribute and a JPEG or PNG img as the fallback (or negotiate on Accept with Vary), lazy-load only images below the first viewport with width and height set, and mark the largest above-the-fold image fetchpriority=high instead of lazy.
Машиночитаемо: JSON