От создателя: в этом посте я обрисую 8 способов оптимизации загрузки изображений, чтоб минимизировать внедрение для отображения изображений как пропускного канала, так и ЦП. Я представлю их в виде аннотированного примера HTML, чтоб людям было легче воспроизвести результаты.
Некие из этих способов наиболее устоявшиеся, остальные в некой степени новы. В эталоне, ваш возлюбленный механизм для публикации веб-документов (к примеру, CMS, генератор статических веб-сайтов либо фреймворк) реализует все эти готовые способности. В конце этого поста я буду обновлять перечень технологий, обеспечивающих все описанные тут оптимизации.
Вкупе эти способы улучшают все элементы Core Web Vitals от Гугл за счет:
Сведения к минимуму Largest Contentful Paint (LCP) при помощи уменьшения количества байтов, кэширования и отложенной загрузки.
Сохранения кумулятивного сдвига макета (CLS) равным нулю.
Уменьшения задержки первого ввода (FID) за счет уменьшения загрузки ЦП (основного потока).
Способы оптимизации
Адаптивный макет
Это отлично понятный способ, позволяющий употреблять доступное горизонтальное место до наибольшего размера изображения при сохранении соотношения сторон. Новеньким в 2020 году будет то, что веб-браузеры резервируют правильное вертикальное место для изображения до его загрузки, если атрибуты width и height верно заданы для элемента img. Это дозволяет избежать кумулятивного сдвига макета (CLS).
img { max-width: 100%; height: auto; }
| 12345678 | img { max-width: 100%; height: auto; } |
Отложенный рендеринг
2-ая техника наиболее животрепещуща. Новейший атрибут CSS content-visibility: auto показывает браузеру не волноваться о макете изображения, пока оно не приблизится к экрану. Это имеет все виды преимуществ, но более принципиальным из их быть может то, что браузер не будет волноваться о декодировании нашего размытого изображения-заполнителя либо самого изображения, если это не надо, понижая нагрузку на микропроцессор. К огорчению, если мы не предоставим сопутствующее свойство CSS contain-intrinsic-size, это вызовет CLS. И еще, к огорчению, оно не поставляется с выводом соотношения сторон от атрибутов width и height и, как следует, мы должны обеспечить относительно сложное значение, которое вычисляет место для изображения, которое должен резервировать браузер.
Яндекс предоставит издателям мобильных приложений существенные бонусы
Формула в этом случае обязана работать, если вы предоставите переменную CSS —main-width, которая обрисовывает ширину основного раздела документа. 1280px это наибольшая ширина изображения, 853px наибольшая высота и 0.66640625 соотношение сторон.
/* This probably only makes sense for images within the main scrollable area of your page. */ main img { /* Only render when in viewport */ content-visibility: auto; }
| 1234567 | /* This probably only makes sense for images within the main scrollable area of your page. */ main img { /* Only render when in viewport */ content-visibility: auto; } |
AVIF
AVIF — это самый крайний формат изображений, который получил распространение в веб-браузерах. В истинное время он поддерживается в браузерах Chromium и доступен с пометкой в Firefox. Поддержка Safari пока недосягаема, но, беря во внимание, что Apple является членом группы, стоящей за форматом, мы можем ждать поддержки в будущем.
AVIF примечателен тем, что он повсевременно превосходит JPEG по весьма значимым показателям. Это различается от WebP, который не постоянно делает изображения наименьшего размера, чем JPEG, и по сути может привести к дилеммам из-за отсутствия поддержки прогрессивной загрузки.
Чтоб воплотить прогрессивное улучшение для AVIF, используйте элемент picture. Практически элемент img вложен в picture. Это может сбивать с толку, поэтому что img время от времени описывается как запасный вариант для браузеров без поддержки изображений, но в основном этот элемент picture помогает лишь при выбирании src, но не имеет самого макета. Отрисовываемый элемент (и стиль, который вы задаете) является элементом img.
До недавнешнего времени было относительно трудно кодировать изображения AVIF на стороне сервера, но с крайней версией библиотек, таковых как Sharp, это сейчас просто.
Flexbox и абсолютное позиционирование
| 1234567891011121314 | |
Загрузка подходящего количества пикселей
Вы, может быть, увидели атрибуты srcset и sizes в фрагменте выше. Используя селектор w, он докладывает браузеру, какой URL-адрес употреблять на базе физических пикселей, которые будут употребляться, если изображение будет выводиться на устройстве юзера с учетом ширины, рассчитанной на базе атрибута sizes (который является выражением медиа-запроса).
При всем этом браузер постоянно будет загружать изображение малого размера, обеспечивающее лучшее качество отображения для юзера. Либо он может избрать изображение наименьшего размера, если, к примеру, юзер избрал какой-нибудь режим сохранения данных.
Запасные
Предоставьте больше начальных частей при помощи srcset для браузеров, которые поддерживают лишь устаревшие форматы изображений.
| 1234567891011121314151617181920 |
Кеширование / неизменяемые URL-адреса
Указание хэш байтов в изображение в URL-адрес изображения. В приведенных выше примерах я делаю это с URL-адресами Z1s3TKV в изображениях. Таковым образом, URL-адрес поменяется, если изображение поменяется, и, соответственно, вы сможете применить нескончаемый срок деяния кеша для изображений. Вы желаете, чтоб ваши заглавия кеширования выглядели приблизительно так cache-control: public,max-age=31536000,immutable.
Immutable – семантически правильное значение cache-control, но, к огорчению, оно не поддерживается обширно в браузерах (я имею в виду, Chrome). max-age=31536000 – это откат к кешированию на год. public принципиально, чтоб ваш CDN мог кэшировать изображение и доставлять его. Но используйте это лишь в том случае, если это целенаправлено исходя из убеждений конфиденциальности.
Отложенная загрузка
Добавление loading=»lazy» к img показывает браузеру начинать подборку изображения лишь по мере того, как оно приближается к экрану и, возможно, будет практически отображаться.
Полное руководство по созданию форм с автосохранением в Angular
| 1 |
Асинхронное декодирование
Добавление decoding=»async» к img дает браузеру разрешение на декодирование изображения вне основного потока, избегая действия на юзера процессорного времени, применяемого для декодирования изображения. У этого не обязано быть приметных недочетов, кроме того, что это не постоянно быть может значением по дефлоту.
| 1 |
Размытый заполнитель
Размытый заполнитель — это встроенное изображение, которое дает юзеру некое представление о изображении, которое в конечном итоге загрузится, не требуя подборки байтов из сети.
Некие примечания по реализации представлены тут:
Он вставляет размытый заполнитель как часть изображения background-image. Это дозволяет избежать использования второго элемента HTML и, естественно, прячет заполнитель при загрузке изображения, потому для реализации этого не требуется JavaScript.
Он обертывает URI данных фактического изображения в URI данных изображения SVG. Это изготовлено поэтому, что размытие изображения производится на уровне SVG, а не через фильтр CSS. В итоге размытие производится лишь один раз для всякого изображения при растрировании SVG.
| 1234567891011 |
Оптимизация JavaScript (необязательно)
Браузеры могут ощущать себя обязанными растрировать размытый заполнитель, даже если изображение уже загружено. Удалив его при загрузке изображения, мы решаем эту делему. Не считая того, если ваши изображения содержат прозрачность, то это по сути не является неотклонимым, так как в неприятном случае заполнитель будет просвечивать.
document.body.addEventListener( «load», (e) => { if (e.target.tagName != «IMG») { return; } // Remove the blurry placeholder. e.target.style.backgroundImage = «none»; }, /* capture */ true );
| 12345678910111213 | document.body.addEventListener( «load», (e) => { if (e.target.tagName != «IMG») { return; } // Remove the blurry placeholder. e.target.style.backgroundImage = «none»; }, /* capture */ true ); |
Инструменты
Это перечень узнаваемых технологий и инструментов, реализующих все эти оптимизации: высокопроизводительный блог одиннадцати.
Создатель: Malte Ubl
Редакция: Команда webformyself.
Источник