Webpage and image optimization howto

Date: November 5, 2019

This work-in-progress page is about optimizing webpages including images for faster downloads and resource savings.

  1. Image optimization
  2. Compression
  3. External resources

Image optimization

There are only three image formats to choose from: PNG, JPEG, and WebP.

To reduce PNG filesize, first use pngquant to reduce the color depth. Then, squeeze additional bytes using zopflipng. For example to reduce a PNG to 32 colors and then compress it, do:

$ pngquant -s 1 -o example.png 32 example.png.orig
$ zopflipng example.png example2.png
$ ls -lS example* | awk '{print $5, $9}'
68169 example.png.orig
19663 example.png
17116 example2.png

The resulting image is visually indistinguishable from the original but only 25% of the original size.

To reduce JPG filesize, first open the file in a graphics editor such as GIMP or Photoshop and reduce the color depth until you can tell a difference in quality. Then save the file at 1 point above that quality level. Next, remove any metadata with jhead using the command jhead -purejpg example.jpg.

For WebP images, use cwebp. If the resulting WebP file size is lower than the source PNG or JPG, you can use both in HTML5 with the following example code: 

<picture>
 <source type="image/webp" srcset="example.webp">
 <img src="example.png" alt="example image">
</picture>

Here, the browser will download and display the WebP image if and only if it supports WebP. Otherwise the browser will download and display the PNG image. Learn much more about HTML5 images using WebP and the picture tag.

Compression

IANIX compresses html and other text content with zopfli, a state of the art compression tool for compressing webpages. This is combined with the nginx config option gzip_static to serve pre-compressed content. Within an nginx.conf server block, set:

gzip_static on;

Then compress your desired file with a command such as:

zopfli index.html

Compare the result to gzip with compression levels 6 and 9:

$ gzip -c -6 curve25519-deployment.html > curve25519-deployment.html.gzipc6
$ gzip -c -9 curve25519-deployment.html > curve25519-deployment.html.gzipc9
$ zopfli curve25519-deployment.html
$ ls -lS curve25519-deployment.html* | awk '{print $5, $9}'
107876 curve25519-deployment.html
32413 curve25519-deployment.html.gzipc6
32255 curve25519-deployment.html.gzipc9
31193 curve25519-deployment.html.gz

Depending on your traffic, you may wish to use zopfli for all text resources, or perhaps some. For instance if your html changes frequently but your css changes infrequently, perhaps use gzip to compress html and zopfli to compress css.

External Resources

Check the following excellent sites for help in improving your website speed: