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: HTTP
Feature-Policy:
  legacy-image-formats ‘none’;
  oversized-images ‘none’;
  unoptimized-images ‘none’;
  unsized-media ; 'none' 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: HTTP
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. ` ` 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 ` `, while other origins must be spelled out: none self 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 I , 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: mage CDN Feature-Policy: legacy-image-formats https: Feature-Policy: oversized-images https: Feature-Policy: unoptimized-images https: Feature-Policy: unsized-media https: //img.cdn.imgeng.in; //img.cdn.imgeng.in; //img.cdn.imgeng.in; //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? Alos published at https://dev.to/jonarnes/comply-with-permission-policies-feature-policies-with-an-image-cdn-3m71

Instantly

Progressive

Speed up AMP pages with an Image CDN

How to Keep Your e-Store Core Web Vitals Healthy with an Image CDN

My other place

Nominated for 2022 - HackerNoon Contributor of the Year - Django

Too Long; Didn't Read

Make resilience your competitive advantage

Feature/Permission Policies Overview

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Generate Dynamic Preview Images for Social Media Sharing

5 Tips for Website Image Optimization

Automatic Image Optimization Using the Nuxt Image Component with imgix

Core Web Vitals: How To Improve To Rank Higher On Google And Succeed In Your Business

How to Integrate an Image CDN in Your React Application

How to Generate Dynamic Preview Images for Social Media Sharing

5 Tips for Website Image Optimization

Automatic Image Optimization Using the Nuxt Image Component with imgix

Core Web Vitals: How To Improve To Rank Higher On Google And Succeed In Your Business

How to Integrate an Image CDN in Your React Application

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps