klionearly.blogg.se - Neat image compression

#Neat image compression install
#Neat image compression update

You will need to manually resize the image, but once again, don’t hesitate to add srcset and size attributes! You don’t need to specify which image to use on which density, the browser will do the maths. Same response: srcset and size attributes automatically deal with high density screens. The oversizing is still intentional and dedicated to high pixel density screens.You can handle this case by adding srcset and sizes attributes to your img tag. Think of a screen-wide image shown on a large screen for example. It is meant to keep a good image quality (not pixelated) when it is displayed larger. In the case of oversized images, there can be three reasons: The simplest way is to combine our current approach with Chrome Dev Tools’ built-in mobile simulator. Example: a 1000×1000 image should not weigh more than 800KB. This format keeps a neat image quality but is most of the time heavier. Same with this rule, but on PNG images and with a higher ratio. Example: if the loaded image is 1000×1000 pixels, its weight should not be more 1000*1000*0.3 = 300KB. This rule means that JPG images should not weigh more than 0.3 times the number of pixels in the image. Compression unoptimized-lossy-images *(0.3) It means that if your screen has a density of 2x (such as a Retina display), the browser will only complain if the loaded image is larger than 900×900. This rule takes in account higher density screens. Example: an image is displayed on 300×300 “CSS pixels” but the downloaded image is larger than 450×450, boom! It breaks the threshold and a gray rectangle shows up. This rule tells Chrome that an image dimensions should not exceed 1.5 times the number of physical pixels it is displayed on. Unoptimized-lossless-images *(0.8) Dimensions oversized-images *(1.5) 'none' Let’s review the three rules I suggested for your Feature-Policy header: oversized-images *(1.5) 'none' Click on the extension’s Pause button to disable it. Note: the HTTP header will stay enabled on every page you will visit later on.

In the new rule’s “value” field insert oversized-images *(1.5) 'none' unoptimized-lossy-images *(0.3) unoptimized-lossless-images *(0.8).

In the new rule’s “name” field, insert Feature-Policy.

Add a new “Response Header” rule (make sure you are not creating a “Request Header” rule).

Click on the extension’s logo on your browser’s top-right corner to open its settings.

#Neat image compression install

Then, find and install an extension called ModHeader (or click on this link).

Enter about:flags in a new browser’s tab, find the line “Experimental Web Platform features” and switch it on.

You need to activate an experimental feature on your computer, but don’t worry, it is without risk.

Let’s configure that! Configure your browser There are some Chrome extensions that allow you to add any header you want to any page you visit. You may tell me “Adding an HTTP header to the page, what a pain”. The browser also writes an error message in the console: Here is an example with four uncompressed images: If an image exceeds the rules, it shows as a gray rectangle. We will specify proportional thresholds on all images dimensions and weight. Using them can seem touchy but it is actually very easy. We will pay more attention to two of them: oversized-images and unoptimized-images.

No pending task on your browser, because you will have to restart itĪ Feature-Policy is an HTTP header that allows to enable or disable some browser options on a given page.

Let’s give credit where it is due, I have discovered the approach on Tim Kadlec’s blog. It uses a technology recently added to the web developer’s toolkit: Feature-Policies.

images loaded much larger than their display size,.

In this article, I will detail an easy way to spot problematic images while browsing on your pages.

#Neat image compression update

I will update the post once it works back.Īll Webperf experts will tell you, one of the major performance issues on websites is image weight. Update: Chrome is re-working its Feature-Policy headers and the tips in this article are not working anymore.