At some point you have probably heard (or miss-heard) one or more of these phrases during conversations with designers and developers. You might have wondered what plastic lemons or household cleaners have to do with anything, or why you need to send your designer your soiled jeans in an attachment.

So what are they?

JPEG, GIF, PNG and SVG are the main image formats for the web. Put another way, they are different ways of storing your image in a file. They are all abbreviations (naturally) that aren’t particularly relevant to understanding what they are or when to use them, so we won’t cover that here.

Great. So which one is best?

As with most things, the answer is: it depends. They all have their strengths and weaknesses and which one you should use depends on the image you are storing.

JPEGs are excellent at storing photos at reasonable file sizes. They store an approximation of your photo which, to the naked eye, is indistinguishable from the original. This technique is referred to as “lossy compression”. Each time you open and re-save a JPEG a new approximation is calculated and eventually your photo will look terrible. It’s lossy because information about the original is lost each time you re-save it, no matter how big the image is or that you used a £900 52 megapixel camera.

Lossy compression is also used in other file formats, such as MP3, where an approximation of audio is stored with frequencies removed that are inaudible to the human ear. Re-encode an MP3 1,000 times and apart from wasting your time, your favourite Bee Gees track is going to sound terrible too.

So JPEGs are good as long as we don’t keep re-saving them, why do we need the others?

JPEGs are not so good at storing images with solid colours, crisp edges or text. A logo or an icon might be good examples of where a JPEG is not the ideal choice. You’ll often see a logo or icon saved as a JPEG which looks muddy or blurry or has colours that appear to have run in to each other. Edges that were supposed to be sharp appear to have distortion or noise around them known as “artefacts”. Not the sort of artefacts that might excite Tony Robinson, either; the sort that make developers and designers everywhere cry inside.

In contrast, PNG and GIF (pronounced however you like) are great at storing images of solid colours, text and lines at small file sizes. They are referred to as “lossless compression” formats as they store the image exactly as the original. Lossless compression for images is what ZIP is for text files; they will both be able to retrieve your file pixel-perfect as you intended.

GIF has one notable drawback; it’s limited to 256 colours. It’s also not as efficient at storing images as PNG and will almost always result in larger files. GIF does have an ability to store frames for animations though, something that was popular in the 90s and has come back in to vogue in recent years due to its prolific use on social media.

So why not just store everything as PNG?

File size. If you store your photos as PNGs the file size will be HUGE as every pixel and bit of information is stored. There are better formats for “losslessly” storing photos so that they can be edited or worked on later, RAW and TIFF to name just two. For serving images on websites the key is smallest file size with the best quality possible and so JPEG is the appropriate compromise.

Okay so JPEG for photos and PNG for icons, text, solid colours and lines. What about SVG?

Scalable Vector Graphics differ quite a lot from the above formats. It’s also the only format of those covered here that has a remotely sensible name. The formats we have covered thus far have been “raster”, whereas SVG is “vector”. In short this means instead of storing information about pixels, vectors contain numbers and coordinates that allow a program to draw (or plot) the shape on a screen. You can open an SVG in your favourite text editor and see lots of scary numbers and coordinates. You can edit them there too although there are vector editor applications that make this easier. SVGs are excellent for line drawings, shapes, gradients and cartoon illustrations and because they only contain instructions for drawing a shape they do not take up much file space either. They are the format of choice for icons and logos on websites because no matter how big your display, how zoomed in you are, or whether you have a fancy 140″ Retina notebook, they always look sharp.