antipatternperformance

unoptimized-images

When optimizing images, the file size should be kept as small as possible. The larger the download size is, the longer it takes a page to load. Stripping metadata, picking a good image format, and using image compression, are all common ways to optimize an image's file size. unoptimized-images is a policy that restricts images to have a file size (in terms of number of bytes) no more than a specified ratio of the image size (width * height) on the web page.

When a document is disallowed to use unoptimized-images policy, its <img> elements whose file sizes are too big will be rendered as placeholder images.

Specification

The default maximum file size of an optimized image is calculated as following:

metadata size limit + byte-per-pixel ratio * image resolution

  • For images of one of the modern formats (JPEG, PNG, GIF, WEBP, and SVG)
    • The default metadata size limit is tentatively 1KB (1024 bytes).
    • The default byte-per-pixel ratio is tentatively 0.5.
  • For images of other legacy formats
    • The metadata size limit is set to 0KB.
    • The byte-per-pixel ratio is set to 0.

How to apply this policy

Send the following HTTP header to control the unoptimized-images policy, and disallow it on all origins:

Feature-Policy: unoptimized-images 'none'

Does it work?

Currently Firefox, and Chromium based browsers, such as Google Chrome, Samsung Internet, and Opera, are the only user-agents to support Feature Policy. The minimum version that correctly recognises the unoptimized-images policy is:

Mozilla Firefox

Not supported

Google Chrome

72+

Microsoft Edge

Not supported

Apple Safari

Not supported

Discussion