Image optimization and compression on React sites

Support
, , ,
1

I’ve worked on multiple sites using Netlify but I’ve seen that most of images that I use inside src/images folder don’t get compressed. How can I enable Netlify to serve them using gzip or doesn’t this feature exist?

I don’t think it’s related to React but I’m using create-react-app to bootstrap my project.

2

Hi, @lftoma, compression is enabled by default. If this isn’t working for a specific asset, would you please send us the URL for the asset which isn’t working?

3

Hi @luke! Thanks for your answer. This is the one image that should be compressed but it’s being served without any compression

image
image3296×1930 775 KB
It can be found on https://terapia.serenamente.mx/static/media/hero-1.be81a297.png

Thanks!

4

Hi, @lftoma, there is a thought experiment in data compression of:

  • Can a single compression algorithm compress all files?

As with all thought experiments the value is in solving the puzzle yourself but I’m going to reveal to the answer:

  • No single compression algorithm can compress all files.

Sometimes attempting to “compress” a file only makes it bigger. This is especially true for already compressed data and PNG files are already very well compressed.

I’m rambling a bit. Why do I mention all this?

Because if you brotli compress that particular PNG file it gets bigger. Really. :wink:

Here is the original file and the same file compressed with brotli:

-rw-r--r--  1 luke  staff  33214 Aug 12 23:06 hero-1.be81a297.png
-rw-r--r--  1 luke  staff  33218 Aug 12 23:06 hero-1.be81a297.png.br

This file is four bytes bigger with brotli so it isn’t used. You are likely to find the same with most if not all of your PNG files.

To summarize, if a file will be bigger using brotli compression (which is very common for PNGs), we won’t use it. If there are other questions, please let us know.