Политики изображений для быстрой загрузки и многое другое

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

Луна Лу
Luna Lu

Изображения часто занимают значительный объем визуального пространства и составляют большую часть загружаемых байтов на веб-сайте. Оптимизация изображений может улучшить производительность загрузки и уменьшить сетевой трафик.

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

Вы можете спросить, как мне узнать, оптимизированы ли мои изображения и как мне их оптимизировать? Мы экспериментируем с новым набором политик функций для оптимизации изображений: oversized-images , unoptimized-lossy-images , unoptimized-lossless-images и unoptimized-lossless-images-strict . Все они теперь доступны для первоначального тестирования .

Оптимизированные политики в отношении изображений

Политика разрешений вводит новый набор ограничений на изображения, которые могут быть применены во время разработки. Изображения, нарушающие любое из ограничений, будут отображаться как изображения-заполнители, которые легко идентифицировать и исправить. Эти политики можно указать в режиме «только отчеты», где изображения будут отображаться нормально без применения каких-либо мер, в то время как нарушения будут наблюдаться в отчетах. (Подробную информацию см . в разделе Режим «Только отчет» ниже.)

негабаритные изображения

Политика разрешений для oversized-images ограничивает внутренние размеры изображения относительно размера его контейнера.

Когда в документе используется политика oversized-images , любой элемент <img> , внутреннее разрешение которого более чем в X раз превышает размер контейнера в любом измерении, будет заменен изображением-заполнителем.

Почему?

Отображение изображений большего размера, чем то, что может визуализировать устройство просмотра (например, предоставление изображений с рабочего стола для мобильного контекста или отображение изображений с высокой плотностью пикселей на устройстве с низкой плотностью пикселей) приводит к потере сетевого трафика и памяти устройства. Прочтите «Подавать изображения с правильными размерами» и «Подавать адаптивные изображения» для получения информации об оптимизации изображений.

Примеры

Несколько примеров иллюстрируют это. Ниже показано поведение по умолчанию при уменьшении размера изображения вдвое.

Поведение при изменении размера по умолчанию.
Поведение при изменении размера по умолчанию.

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

Permissions-Policy: oversized-images *(2);

Когда изображение слишком велико для контейнера.
Когда изображение слишком велико для контейнера.

Я получаю аналогичные результаты, если уменьшаю только ширину или высоту.

Измененная ширинаИзмененная высота
Измените размер ширины и высоты.

Как использовать

Подводя итог, политику oversized-images можно определить одним из следующих способов:

  • HTTP-заголовок Permissions-Policy
  • <iframe> allow атрибут

Чтобы объявить политику oversized-images , вам необходимо предоставить:

  • Название объекта, oversized-images (обязательно)
  • Список происхождения (необязательно)
  • Пороговые значения (т. е. коэффициент уменьшения X) для источников, указанных в скобках (необязательно).

Мы рекомендуем коэффициент уменьшения 2,0 или ниже. Рассмотрите возможность использования адаптивных изображений с разным разрешением, чтобы лучше отображать изображения на экранах разных размеров, разрешений и т. д.

Больше примеров

Permissions-Policy: oversized-images *(2.0)

Политика применяется ко всем источникам с пороговым значением 2,0. Любой элемент <img> с изображением, коэффициент масштабирования которого превышает 2,0, запрещен и будет заменен изображением-заполнителем.

Permissions-Policy: oversized-images *(inf) 'self'(1.5)

Политика применяется к источнику сайта с пороговым значением 1,5. Элементы <img> в контекстах просмотра верхнего уровня и вложенных контекстах просмотра того же происхождения будут отображаться нормально только в том случае, если коэффициент уменьшения меньше или равен 1,5. Элементы <img> везде будут отображаться нормально.

неоптимизированные изображения с {с потерями, без потерь}

Политики функций unoptimized-lossy-images , unoptimized-lossless-images , unoptimized-lossless-images-strict ограничивают размер файла изображения в зависимости от его внутреннего разрешения:

unoptimized-lossy-images
Форматы с потерями не должны превышать соотношение байтов на пиксель X с фиксированным допуском накладных расходов в 1 КБ . Для изображения Ш x В порог размера файла рассчитывается как W x H x X + 1024.
unoptimized-lossless-images
Форматы без потерь не должны превышать соотношение байтов на пиксель X с фиксированным допуском накладных расходов в 10 КБ . Для изображения Ш x В порог размера файла рассчитывается как W x H x X + 10240.
unoptimized-lossless-images-strict
Форматы без потерь не должны превышать соотношение байтов на пиксель X с фиксированным допуском накладных расходов в 1 КБ . Для изображения Ш x В порог размера файла рассчитывается как W x H x X + 1024.

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

Почему?

Чем больше размер загрузки, тем дольше загружается изображение. Размер файла должен быть как можно меньшим при оптимизации изображения: удалении метаданных, выборе подходящего формата изображения, использовании сжатия изображения и т. д. Прочтите «Используйте Imagemin для сжатия изображений» и «Используйте изображения WebP» для получения информации об оптимизации изображений.

Пример

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

Сравнение оптимизированного изображения с неоптимизированным.
Сравнение оптимизированного изображения с неоптимизированным.

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

Permissions-Policy: unoptimized-lossy-images *(0.5);

Когда изображение не оптимизировано.
Когда изображение не оптимизировано.

Как использовать

Если вы новичок в политике разрешений, для получения более подробной информации ознакомьтесь с разделом «Введение в политику разрешений» .

Подводя итог, можно сказать, что политики unoptimized-{lossy,lossless}-images можно указать с помощью:

  • HTTP-заголовок Permissions-Policy
  • <iframe> allow атрибут

Чтобы объявить политику unoptimized-{lossy,lossless}-images , вам необходимо предоставить:

  • Имя функции, например, unoptimized-lossy-images (обязательно).
  • Список происхождения (необязательно)
  • Пороговые значения (т. е. соотношение байтов на пиксель X) для источников, указанных в скобках (необязательно).

Мы рекомендуем соотношение байтов на пиксель 0,5 или ниже для unoptimized-lossy-images и соотношение байтов на пиксель 1 или ниже для unoptimized-lossless-images и unoptimized-lossless-images-strict .

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

Если вы используете форматы WebP, попробуйте установить более строгие пороговые значения:

  • 0,2 для WEBPV8
  • 0,5 для ВЕБПЛ

Больше примеров

Feature-Policy:  unoptimized-lossy-images *(0.5);
                 unoptimized-lossless-images *(1.0);
                 unoptimized-lossless-images-strict *(1.0);

Эта политика применяется ко всем источникам с пороговым значением 0,5 (для форматов с потерями) и 1 (для форматов без потерь). Любой элемент <img> , чье изображение имеет соотношение байтов на пиксель, превышающее ограничение, запрещен и будет заменен изображением-заполнителем.

Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
                unoptimized-lossless-images *(inf) 'self'(0.8);
                unoptimized-lossless-images-strict *(inf) 'self'(0.8);

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

Режим «только отчет» в дикой природе

Публикация сайта с изображениями-заполнителями может оказаться не тем, что вам нужно. Вы можете использовать политики в принудительном режиме (с неоптимизированными изображениями, отображаемыми как изображения-заполнители) во время разработки и подготовки, а также использовать режим только для отчетов в рабочей среде. (Подробнее см. в разделе «Отчеты о политике разрешений» .) Подобно HTTP-заголовку Permissions-Policy , заголовок Permissions-Policy-Report-Only позволяет отслеживать отчеты о нарушениях в реальном режиме без какого-либо принудительного применения.

Ограничения

Политики изображений работают только с элементами изображений HTML ( <img> , <source> и т. д.) и пока не поддерживаются для фоновых изображений или сгенерированного контента. Если вы хотите, чтобы политика поддерживалась в отношении более широкого содержания, сообщите нам об этом.

Оптимизация ваших изображений

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

Пожалуйста, дайте нам отзыв

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

Вы можете оставить отзыв о каждой из функций, упомянутых в этой статье , в нашем списке рассылки: Feature-control@chromium.org .

Нам бы хотелось узнать, какие пороговые значения вы использовали и нашли полезными. Нам хотелось бы знать, являются ли unoptimized-lossless-images или unoptimized-lossless-images-strict более интуитивными и простыми в использовании, или вместо этого нам следует использовать допуск на разницу накладных расходов. Ближе к концу судебного разбирательства мы разошлем опрос. Следите за обновлениями!