Why not gzip images

Gzip has been in widespread use for over 20 years now. Its ubiquity on the server side has prompted basically every web browser to support gunzip, the DEFLATE operation, meaning the browser can accept a gzip compressed payload and decompress it on the client side. This offers an opportunity to reduce bandwidth between a web server and a web client which results in faster page load times.

Because the client can automatically handle gzip compressed content, the web server can be configured to gzip content responses prior to transmitting them to the client.

Each time a resource is compressed on the server, the CPU must perform the work to apply the compression. If you can avoid pointless compression, you can make better use of your server hardware. There are two primary cases you want to avoid:. You should not allow your web server to compress image files or PDF files. One notable exception here are SVG file types.

While not technically an image file, it can sometimes be lumped in with image content types. You can also set a minimum required file size, which prevents lower compression ratios or even larger file sizes for smaller files. This is also true for many audio and video formats. Not only would these not benefit from gzip, but their sizes could actually increase. In some cases, proxy servers e. Content Delivery Networks can interfere with how gzipped content is delivered.

Some proxies might cache gzipped resources without also caching their Content-Encoding, or even try to re-compress compressed content. The Vary HTTP response header specifies how proxies and caches handle compressed content and should be enabled whether dynamic or static compression is enabled. Before you can use static compression, you will need to create a gzipped copy of each file you want to serve. To load the plugin, add the following line to your Apache configuration file:. As with Nginx, you can enable gzip for the entire web server or for a specific configuration block.

Apache also supports compression for certain file types, setting compression levels, and managing proxy settings. This example uses this method to serve pre-compressed CSS files:. To show the difference between compressed and uncompressed websites, we ran a page speed test on a website with three different configurations: one with compression enabled, one with compression completely disabled, and one serving only pre-compressed content.

We created a basic website using Hugo and hosted it on an f1-micro Google Compute Engine instance running Nginx version 1. For the gzip-enabled versions, we used the default settings for both Nginx and the gzip command-line application. To run the test, we used a recurring page speed check to contact the site every 30 minutes. After four runs, we reconfigured and restarted the Nginx server for the next test. We dropped the first run to allow time for the Nginx server to warm up.

We verified that Nginx was using static compression and not dynamic compression by using strace to see which files were being accessed:. With dynamic compression, the web server transferred For some files, such as bootstrap. Although this was a small site with few optimizations, simply enabling gzip on the web server allowed for a significant savings in load time. The fact that static compression performed roughly the same as dynamic compression also shows that for smaller sites, the cost of dynamic compression on system resources is minor.

Websites with larger files and higher traffic volumes will likely see a more significant amount of CPU usage, and would benefit more from static compression. Gzip is a fast and easy way to improve page speed performance while still delivering a high-quality experience to your users. For IIS, enable compression in the settings. In Apache, enabling output compression is fairly straightforward. Add the following to your. However, some older browsers may have trouble more below and there are special directives you can add to correct this.

Give your HTML file a. This is almost like building your own webserver what fun! But really, try to use Apache to compress your output if you can help it. Online: Use the online gzip test to check whether your page is compressed. Refresh your page, and click the network line for the page itself i. Be prepared to marvel at the results. If your site absolutely must work with Netscape 1. Already-compressed content : Most images, music and videos are already compressed.

Usually this is a great tradeoff given the speed of compression. There are ways to pre-compress static content and send over the compressed versions.