How to ensure things are compressed ? According to developper tools, they are not, and my lighthouse is terrible, 82, saying it’s not compressed.
The example below is for an image of 24kb.
This is pretty small for an image. I don’t know how much smaller you expect to compress to. Compression only removes the unnecessary pixels from an image. If you upload a high resolution/quality image, compression will reduce by what it can but ultimately it will still be a high resolution image with a large file size.
We are here to help you with things Netlify related. Optimizing a sites lighthouse score is a specific skill outside of this scope.
However here are a few things I’d suggest:
Ensure asset optimization is turned on in site settings
The lighthouse score is my goal but my wish to know how to configure the netlify server to get the compression done because it apparently is not the case.
that config was completely wrong,
[[headers]]
for = “/*”
[headers.values]
Content-Encoding = “br”
made the site wholly unavailable, with an error message on librewolf and a weird cached version from who knows where on chromium. The other lines are fine. This picture also was a bad one, this one is much bigger gif, 4.2mb.
Stop trying to force compression on images that are already small and don’t need additional compression. A < ~100KB image doesn’t need additional compression. It is small enough.
you can verify yourself:
Look on this page, open the <details> at “small mammals, up to young antelopes”, and click on the middle image with the developers tools on. It will display cephalope.webp which is a whopping 5.6Mb, and there is no “content-encoding”.
That’s as small in size as the image can get at Netlify. Netlify is not a image CDN. For runtime optimization of image, take a look at other CDNs dedicated for images like Cloudinary.
5.6mb is considered small ? Then what image on Earth is considered big enough to warrant compression ? I don’t understand you. I just want to know if the behavior I’m point at is normal or not.
I didn’t say so. I said, it’s as small as it can get on Netlify. Those two sentences are very different.
If you upload a ultra-HD image and expect Netlify to resize it by maintaining the image dimensions, that’s not going to happen. In case you’ve not noticed, Netlify’s image optimization tries for lossless compression, thus, in some cases it might not even compress the image if it’s already optimised. If you want a smaller image, upload a smaller image OR use a image CDN that can resize images for you on-the-fly like I mentioned. But, if you want the image dimensions to remain unchanged, you’re at an impasse.
With that being said, i didn’t find any 5.6 MB image on your site (even after loading the details that you mentiond).
No, it’s a link: clicking on the cephalope’s picture will open the original, 5.6 Mb one.
Maybe just click here.
I don’t need resizing , it’s done by my SSG already, I don’t know why you mention this Though I understand what you say, my question was simply if a “content-encoding” header should be present in this case, when downloading something of that size ? If not, then from what size is deflate/gz/brotli compression even supposed to occur ?
GZIP/Brotli is for text assets since text can be compressed really well. You have a WebP image which is already a highly compressed format. Adding another layer of Brotli would not make it any smaller and rather just increase the time to serve the asset.
I tried using 7-zip compression on the image with its ultra settings and the image size did not make a meaningful difference - because the image is already highly compressed.
So to answer this part, content-encoding is applied when we know it might help - for highly compressed assets like these, it doesn’t help.