WordPress Wednesdays – Image formats for the web (GIF, JPG, PNG)

Wordpress WednesdaysWhen using images on the web, there are typically three file formats, each has its own advantages and disadvantages. By saving images in the correct format, you’ll have the best results, as well as the smallest file sizes.

GIF – Graphics Interchange Format

GIF images are limited to 256 colours, but allow you to add transparent areas. When creating GIF images, select a matte colour which matches the background you’ll be placing the image over. GIFs work really well for logos and other images which have a few crisp colours. If your image has many colours or any photographic elements, GIF likely isn’t the best choice.

The gradient image contains limited colours, so you don’t get a smooth transition between each colour block, and it is larger than the JPG and PNG versions. The logo looks clear, as long as it is displayed on the correct background colour. The kitten looks washed-out, as we don’t have enough colours to display it properly, even though it is slightly larger than the JPG version.
File sizes:
1) Gradient: 2Kb
2) Logo: 4Kb
3) Kitten: 11Kb

JPG – Joint Photographic Experts Group

JPG images are most popularly used for photos, though you may see some illustrations as JPGs as well. JPG format supports many colours, but blocks of colour can easily degrade and look a bit fuzzy, rather than the solid block of colour you might expect. JPG also works really well for gradients, as you tend to get a good transition between colours, opposed to GIF which tends to look blocky.

As you can see, the gradient looks good, as long as the background colour in the image matches the site background. The logo (which is about the same size as the JPG version) looks blocky, and the colours aren’t solid blocks. The photo has a small file size, but is very clear.
File sizes:
1) Gradient: 1Kb
2) Logo: 4Kb
3) Kitten: 10Kb

PNG – Portable Network Graphics

This is a newer file format which wasn’t used much in the early days of the Internet, but has experienced a surge of popularity of late. Earlier browsers didn’t support these images well, which is why they’ve taken longer to become mainstream. These days, most visitors should be able to see PNG files the way you intend.

PNG images have the best of both worlds. They are transparent like GIFs, but they also support opacity, so you can use their transparent abilities to overlay the same image across multiple backgrounds. For example, we’ve used this image for our logo at the top of the page, so you can see the background colours coming through the drop shadow around the image, and it transitions seamlessly over the various colours we’ve used on our site.

This flexibility comes at a cost though: PNG images tend to have the largest file sizes and, as such, take the longest to download for visitors.

As you can see, the gradient works fantastically here, as it smoothly fades the colour away. Because of the small size, this is comparable to GIF and JPG sizes. The logo is bigger, but works better as PNG if used on a multi-coloured background. The kitten is almost 6 times larger than the jpg version, with no appreciable gain in quality.
File sizes:
1) Gradient: 1Kb
2) Logo: 11Kb
3) Kitten: 57Kb
In the end, your site will likely need a variety of different image formats, but if you keep these rules in mind, you can optimize your image use, which will mean your site loads more quickly for visitors. This is becoming increasingly important as more and more visitors are using hand-held devices to access your website.
Comments Off on WordPress Wednesdays – Image formats for the web (GIF, JPG, PNG)
Posted on by Sue
Categories: WordPress