Используйте политику оптимизированных изображений, чтобы на вашем сайте использовались наиболее эффективные изображения.
Изображения часто занимают значительный объем визуального пространства и составляют большую часть загружаемых байтов на веб-сайте. Оптимизация изображений может улучшить производительность загрузки и уменьшить сетевой трафик.
Удивительно, но более половины сайтов в сети предоставляют плохо сжатые или неоправданно большие изображения. Это оставляет много возможностей для улучшения производительности просто за счет оптимизации изображений.
Вы можете спросить, как мне узнать, оптимизированы ли мои изображения и как мне их оптимизировать? Мы экспериментируем с новым набором политик функций для оптимизации изображений: 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 более интуитивными и простыми в использовании, или вместо этого нам следует использовать допуск на разницу накладных расходов. Ближе к концу судебного разбирательства мы разошлем опрос. Следите за обновлениями!