It's already challenging enough to create a website that is blazing fast, adheres to all the latest best practices and offers optimal experience for various network conditions and device types.
As the website and its codebase evolves over time, it can become even harder to maintain the desired user experience over time. To prevent UX deterioration, it’s often a good idea to place guardrails which ensure that crucial website elements, such as images, hold to a certain criteria. In this article, we are going to look at a robust mechanism which helps to steer your website in the right direction - an HTTP header called Feature Policies.
Note: Feature Policies are soon to change name to "Permission Policies". In the following, we'll continue to talk about Feature Policies as this is what is still implemented in the wild.
Feature Policy Overview
Feature policies comprise a set of rules you can selectively define in relation to various browser features and APIs to enforce the desired best practices for your website. For instance, you can ensure that under no conditions a user on a device with a small viewport will receive an oversized, unoptimized image - this effectively prevents layout thrashing and avoids wasting user’s bandwidth.
Feature Policy might remind you of Content Security Policy - you control which origins can use which features, both in the top-level browsing context and in any embedded frames. It’s worth noting that preventing the use of the sub-optimal functionality requires explicitly specifying a policy that disables the features as everything is allowed by default to maintain backwards compatibility.
Here’s an example of a policy which covers all bases when it comes to optimal image delivery:
Feature-Policy: legacy-image-formats ‘none’; oversized-images ‘none’; unoptimized-images ‘none’; unsized-media
legacy-image-formats
Prevents browser from displaying any images in legacy formats:
oversized-images
Disables the use of images whose sizes that are much bigger than the containers.
unoptimized-images
Detects and blocks any images with large byte-per-pixel ratio.
unsized-media
Allows developers to enforce that image/video elements have explicit dimensions.
If any image matches any of the first three rules, a lightweight placeholder will be rendered in place of it. As to image and video elements without explicitly defined dimensions, the browser will set the default size of 300x150.
You are also allowed to split one statement into several headers, like so:
Feature-Policy: legacy-image-formats ‘none’; Feature-Policy: oversized-images ‘none’; Feature-Policy: unoptimized-images ‘none’; Feature-Policy: unsized-media ‘none’;
For each rule, you can define a list of allowed origins. none in the example above is a keyword denoting that the rule is enforced across all browsing contexts. Adding your website could be done via another keyword called self, while other origins must be spelled out:
Feature-Policy: legacy-image-formats ‘self’ https://third-party-service.com
As you can imagine, we don’t want to block it from accessing the images, hence you need to include CDNs origin into the list of allowed origins:
Let’s take a look at a practical example of picking and adding an origin to the allowlist. When serving your image assets through an Image CDN, you have a single high-resolution image included as a source in your markup. Image CDN picks it up and applies optimizations on-the-fly, returning the most suitable variation to the end user. To ensure this mechanism continues to function smoothly after introducing the aforementioned policies, you’d have to add your Image CDN’s origin to the allowlist:
Feature-Policy: legacy-image-formats https://img.cdn.imgeng.in;
Feature-Policy: oversized-images https://img.cdn.imgeng.in;
Feature-Policy: unoptimized-images https://img.cdn.imgeng.in;
Feature-Policy: unsized-media https://img.cdn.imgeng.in;
Conclusion
Feature Policy is a powerful tool that allows you to control the use of a variety of browser features and APIs, both on your own website and within iframes.
Policies fall into two broad categories:
- Enforcing best practices for good user experiences and avoid using outdated APIs
- Providing granular control over sensitive features with security and privacy implications
Deciding which policies to apply and to what extent depends on your circumstances. For new content, you can start developing with all the features turned off. This approach ensures that none of the undesired functionality sneaks into your codebase. When applying a policy to the existing content, you need to test and verify that it continues to work as expected. This is especially important for embedded content: it’s a good idea to first observe effects on your own content before extending the rules to the third-party content that you do not control.
As for image-related policies, using an Image CDN saves a considerable amount of time, freeing you from all the heavy-lifting associated with efficiently delivering optimized, responsive images which comply with your image policies. Everything is handled for you behind the scenes automatically, without cutting corners: choosing the most appropriate format, resizing and reducing file size by applying smart refinements. The only thing you have to do is to add Image CDN’s origin to the list of allowed hosts - who wouldn’t want to instantly take a leap above the competition in just a few minutes?
Top comments (0)