Image tests: format and size

This is James / experimenting

Update 7 June 2023

When I did these experiments I didn’t include the webp format, which may be a better one than any of these. More experiments needed.

I now have a good process for creating images for use in my visual essays. From a technical perspective, which is the best way to display them on the page? There are two criteria:

• I want the images to be as high quality and crisp as possible.
• The file size should be as small as possible, so the pages are quick to display.

It’s good to have small file sizes from an SEO perspective, but I’m not too worried about SEO for this site because I don’t really want visitors from Google. I’m not aiming for high traffic numbers.

There are various test images below. These are the conclusions I have come to doing these tests:

1. Rather than using images that have been scaled to the exact size viewed on the page, I should use larger images. This is because on some systems (particularly Apple) the displays actually render the images at a higher resolution that that specified in the CSS. The resulting image is much crisper.

2. My chosen full-width image size is 1920px wide. This is the width of HDTV images.

3. Although it’s a very old technology, GIF images are still ideal for the type of illustrations I create, which have a small colour palette and lots of flat colour.

4. I should export images as GIF from Photoshop, then run them through ImageOptim.

5. I must remember to properly crop static images before export.

Swarm intelligence title

Animated version, 50% size (1.1Mb)

Animated version, 50% size, lowest quality (972Kb)

PNG export from Photoshop (1.1Mb)

8bit PNG export from Photoshop (403Kb)

PNG export from Photoshop, then processed with ImageOptim (337Kb)

GIF export from Photoshop (337Kb)

GIF export from Photoshop then ImageOptim (273Kb)

Notice the sharpness difference between this one and the one below. There is a huge difference in file size between the two, but is it worth the reduction in sharpness? I think I’m going to put sharpness above file-size and declare this one the winner 🏆.

GIF export from Photoshop then ImageOptim, scaled to displayed size (80Kb)

Steal this idea illustration

Animated version (397Kb)

As above displayed at 50% width of containing DIV

Animated version, resized to 50% size (137Kb)

PNG export from Photoshop (143Kb)

Curiously the blue of the liquid in this PNG export is not accurate - the colour in the exported GIF below is correct.

GIF export from Photoshop (100Kb)

As above displayed at 50% width (100Kb)

GIF export from Photoshop, properly cropped, plus ImageOptim (95Kb)

GIF export from Photoshop, properly cropped, plus ImageOptim, displayed at 50% width (95Kb)

Again the sharpness difference between this one and the one below is very noticeable to me, so I declare this one the winner 🏆.

GIF export from Photoshop at 50%, properly cropped, plus ImageOptim (34Kb)

Brand colours

Surprisingly I can see zero difference between these four different exports of my brand colours.

PNG export from Photoshop (11Kb)

PNG export from Photoshop (8bit) (7Kb)

GIF export from Photoshop (31Kb)

GIF export from Photoshop then ImageOptim (31Kb)