duncanlock.net
Tag Icon in the shape of a luggage tag
Figure 1. This pages tag list is using this tag icon from FontAwesome. This is a 550 byte SVG file, 346 bytes gzipped.

If you want to use SVG icons on a website and style them with CSS - then the SVG needs to be inline - i.e. the SVG markup needs to be included with the rest of the pages HTML markup.

Unfortunately putting things inline means that they can’t be cached. In this article I’ll show one way to get around this - and get the best of both worlds: inline styleable SVG icons, with caching!

Continue reading “Styleable Inline SVG Icons, with Caching & Fallback”

Compressing Limited Colour PNG images

Most of the .PNG files on this site are the ‘blueprint’ style diagrams, like this one:

Blueprint style diagram showing an optical microscope. The sample inside is magnified in a bubble to 2500 times
Figure 1. This illustration is a large 5.6MB SVG file, mostly because of the very detailed paisley pattern that I used. Exported to PNG - and then compressed using the process below, you can get this down to 118.5kB.

I create these in Inkscape as vector .SVG files & export them to bitmap .PNG files. I then re-compress them, to ensure that the image files that are used on the live website are as small & quick to load as possible.

As these diagrams have a fairly limited colour palette, I can get lots of extra compression by reducing the colour depth of the final .PNG files from the default 32bit (millions of colours) to 8bit (256 colours) - without any …

Continue reading “How I compress PNG files on this website”