The basics - image Formats for the Web

10 Sept

According to my clients, images are very often a sticking point when it comes to updating the website. What format should you use? Her is a summary illustrating the main differences between the image formats to use on your website:

JPG

JPG stands for Joint Photographic Expert Group image.

Photos a generally saved as JPGs. The raster image is a made out of pixels.

You can see on the example how an image looks when it is enlarged. The lines become very blurry. You never enlarge photos, you can make it smaller though.

PNG

PNG stands for Portable Network Graphics.

If you need to show a transparent background, or you require a very detailed display of a photo, export your photos as PNG. This format is becoming more and more popular, although the final size of an exported photo will be bigger than a JPG. Please make sure you compress the file well after exporting it.

If you need to export any graphics with limited colours and bigger colour blocks, PNG is the way to go. This will keep the file size very low and ensures fast loading.

The ‘new’ kids on the block SVG and WebP

these new file formats are faster but still not used as widely and JPG and PNG and are more involved to generate.

SVG

The Scalable Vector Graphics is used for buttons and graphs on a page, the cool thing is that these formats are line drawings (vectors) and scale seamlessly to different sizes. You need to add some tags to the source code of your page to display SFG files, I find this quite cumbersome to be honest.

WebP

I started to play with this Web Picture format myself and am very happy with the result so far. The result of an image exported as WebP is crisp, offers more depth in colour and allows to export transparencies too. I’ll get back to you about this web format once I have gained some more experience.

If you have experimented with this file format, let me know about your impression.