Ср. Дек 1st, 2021

Наибольшая оптимизация загрузки изображений для Интернета в 2021 году

От создателя: в этом посте я обрисую 8 методов оптимизации загрузки изображений, чтоб минимизировать использование для отображения изображений как пропускного канала, так и ЦП. Я представлю их в виде аннотированного примера HTML, чтоб людям было легче воспроизвести результаты.

Некие из этих методов более устоявшиеся, другие в некой степени новы. В идеале, ваш возлюбленный механизм для публикации веб-документов (например, CMS, генератор статических веб-сайтов или фреймворк) реализует все эти готовые способности. В конце этого поста я буду обновлять перечень технологий, обеспечивающих все описанные здесь оптимизации.

Вкупе эти методы оптимизируют все элементы Core Web Vitals от Гугл за счет:

Сведения к минимуму Largest Contentful Paint (LCP) с помощью уменьшения количества байтов, кэширования и отложенной загрузки.

Сохранения кумулятивного сдвига макета (CLS) равным нулю.

Уменьшения задержки первого ввода (FID) за счет уменьшения загрузки ЦП (основного потока).

Способы оптимизации

Адаптивный макет

Это отлично понятный метод, позволяющий использовать доступное горизонтальное место до максимального размера изображения при сохранении соотношения сторон. Новым в 2020 году является то, что веб-браузеры резервируют правильное вертикальное место для изображения до его загрузки, если атрибуты width и height верно заданы для элемента img. Это позволяет избежать кумулятивного сдвига макета (CLS).

Отложенный рендеринг

2-ая техника более актуальна. Новый атрибут CSS content-visibility: auto показывает браузеру не беспокоиться о макете изображения, пока оно не приблизится к экрану. Это имеет все виды преимуществ, но более важным из них может быть то, что браузер не будет волноваться о декодировании нашего размытого изображения-заполнителя либо самого изображения, если это не необходимо, уменьшая нагрузку на процессор. К огорчению, если мы не предоставим сопутствующее свойство CSS contain-intrinsic-size, это вызовет CLS. И еще, к огорчению, оно не поставляется с выводом соотношения сторон от атрибутов width и height и, как следует, мы должны обеспечить относительно сложное значение, которое вычисляет место для изображения, которое должен резервировать браузер.

Формула в этом случае должна работать, если вы предоставите переменную CSS —main-width, которая обрисовывает ширину основного раздела документа. 1280px это наибольшая ширина изображения, 853px максимальная высота и 0.66640625 соотношение сторон.

AVIF

AVIF — это самый последний формат изображений, который получил распространение в веб-браузерах. В текущее время он поддерживается в браузерах Chromium и доступен с пометкой в Firefox. Помощь Safari пока недоступна, но, учитывая, что Apple является членом группы, стоящей за форматом, мы можем ждать поддержки в будущем.

AVIF примечателен тем, что он повсевременно превосходит JPEG по очень значительным показателям. Это отличается от WebP, который не всегда делает изображения меньшего размера, чем JPEG, и на самом деле может привести к дилеммам из-за отсутствия поддержки прогрессивной загрузки.

Чтоб реализовать прогрессивное улучшение для AVIF, используйте элемент picture. Практически элемент img вложен в picture. Это может сбивать с толку, поэтому что img иногда описывается как запасный вариант для браузеров без поддержки изображений, но в основном этот элемент picture помогает только при выборе src, но не имеет самого макета. Отрисовываемый элемент (и стиль, который вы задаете) является элементом img.

До недавнешнего времени было относительно сложно кодировать изображения AVIF на стороне сервера, но с последней версией библиотек, таких как Sharp, это сейчас просто.

Загрузка подходящего количества пикселей

Вы, может быть, заметили атрибуты srcset и sizes в куске выше. Используя селектор w, он докладывает браузеру, какой URL-адрес использовать на базе физических пикселей, которые будут использоваться, если изображение будет выводиться на устройстве юзера с учетом ширины, рассчитанной на базе атрибута sizes (который является выражением медиа-запроса).

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

Запасные

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

Кеширование / неизменяемые URL-адреса

Указание хэш байтов в изображение в URL-адрес изображения. В приведенных выше примерах я делаю это с URL-адресами Z1s3TKV в изображениях. Таким образом, URL-адрес поменяется, если изображение изменится, и, соответственно, вы сможете применить бесконечный срок действия кеша для изображений. Вы желаете, чтобы ваши заголовки кеширования выглядели приблизительно так cache-control: public,max-age=31536000,immutable.

Immutable – семантически правильное значение cache-control, но, к огорчению, оно не поддерживается широко в браузерах (я имею в виду, Chrome). max-age=31536000 – это откат к кешированию на год. public принципиально, чтобы ваш CDN мог кэшировать изображение и доставлять его. Но используйте это только в том случае, если это целенаправлено с точки зрения конфиденциальности.

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

Добавление loading=»lazy» к img показывает браузеру начинать выборку изображения только по мере того, как оно приближается к экрану и, возможно, будет фактически отображаться.

Асинхронное декодирование

Добавление decoding=»async» к img дает браузеру разрешение на декодирование изображения вне основного потока, избегая воздействия на юзера процессорного времени, используемого для декодирования изображения. У этого не должно быть приметных недостатков, за исключением того, что это не всегда может быть значением по умолчанию.

Размытый заполнитель

Размытый заполнитель — это встроенное изображение, которое дает юзеру некоторое представление об изображении, которое в конечном итоге загрузится, не требуя подборки байтов из сети.

Некие примечания по реализации представлены здесь:

Он вставляет размытый заполнитель как часть изображения background-image. Это позволяет избежать использования второго элемента HTML и, естественно, прячет заполнитель при загрузке изображения, поэтому для реализации этого не требуется JavaScript.

Он обертывает URI данных фактического изображения в URI данных изображения SVG. Это изготовлено потому, что размытие изображения выполняется на уровне SVG, а не через фильтр CSS. В итоге размытие выполняется только один раз для каждого изображения при растрировании SVG.

Оптимизация JavaScript (необязательно)

Браузеры имеют возможность чувствовать себя обязанными растрировать размытый заполнитель, даже если изображение уже загружено. Удалив его при загрузке изображения, мы решаем эту делему. Кроме того, если ваши изображения содержат прозрачность, то это на самом деле не является неотклонимым, поскольку в противном случае заполнитель будет просвечивать.

Инструменты

Это перечень известных технологий и инструментов, реализующих все эти оптимизации: высокопроизводительный блог одиннадцати.

Создатель: Malte Ubl

Редакция: Команда webformyself.

Докладывает webformyself.com

от Admin

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *