Webpage and image optimization howto

Updated: December 21, 2025

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.

For avif images, you can use cavif-rs or in a pinch ffmpeg -i image.png -c:v libaom-av1 -crf 30 -pix_fmt yuv420p -y image.avif and display it using the <picture> tag as described above using "image/avif" as the mimetype. Order the files by file size with the smallest first, as browsers will load whichever they can and move on: 

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

Compression

IANIX compresses html and other text content with zopfli, a state of the art gzip compression tool, and brotli, a newer compression algorithm designed specificly for web use. Zopfli and other gzip usage can be enabled 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:

$ zopfli index.html
$ brotli index.html

Compare the results 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
$ brotli curve25519-deployment.html
$ ls -lS curve25519-deployment.html* | awk '{print $5, $9}'
118036 curve25519-deployment.html
35211 curve25519-deployment.html.gz6
35040 curve25519-deployment.html.gz9
33880 curve25519-deployment.html.gz
29337 curve25519-deployment.html.br

(Brotli is not supported by nginx, but it's supported by the IANIX webserver which is written in Go.)

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: