What image format should I use on my website?

The final piece of the puzzle that we need to have a really good understanding of before we embark on our website, is imagery.

You could create a website without images, but it would be a pretty bleak place to be.

We’re visual animals, and if you want your content to be engaging, you need to include images. Which means you need to have an understanding of different image formats and sizes.

I’m not a graphic designer, and when I started out building my first websites in 2002, understanding image formats had me in a spin. I couldn’t get my head around what was the difference between a .gif and a .jpg. When was one more appropriate to use than the other? How could I save something on a transparent background, and why was my text looking pixelated?

So here’s the run down of the most popular image formats. Trust me, you’re about to learn something here!

What image format should I use on my website?

JPG

JPG is probably the most common image format used on the web, and it may be the one that you’re most familiar with, as most of the photos saved on our cameras and phones are in this format.

It’s popular because it can be saved to a small file size with very little noticeable quality loss.

Things you should know about JPGs

• They are compressed using what is called “lossy” compression. This means there is always a loss of quality when you save the file. This loss is especially visible on text and fine details. Have you ever saved a file which you have added text to, and been frustrated because the text looks a little fuzzy? This is why.
• You should always save the original version of your JPG, because each time you save it, it reduces in quality slightly.
• You can’t have a transparent background on an image which is saved as a JPG.
• This is the most suitable format for photographs.

PNG

You will have undoubtedly come across PNGs if you spent any time on your computer. If you save screenshots, this is usually the format that they are saved in. And the reason is that, unlike JPGs, they boast “lossless” compression. This means that they’re perfect for text, as you don’t experience any fuzziness around type and fine details.

Things you should know about PNGs

• Because they are lossless, their file sizes are usually around double that of a similar JPG.
• They support transparent backgrounds which is great for things like logos.
• They’re perfect for images and graphics which include any kind of type.

GIF

Often used for animation, these are nifty file formats, most suitable for images or graphics with solid colour blocks. They are not at all suitable for photographs, as you will experience a large loss of image quality when saved as a gif as they can’t handle the variety of gradients in a photograph.

Things you should know about GIFs

• They can support transparent backgrounds.
• They are wholly unsuitable for photographs.
• They can be saved as small file sizes, which makes them suitable for animation.

TIF

TIF is the highest quality image format, and is usually used for commercial print work.  If you happen across a TIF which you’re wanting to use on a website, you should export it as a JPG first.

Things you should know about TIFs

• They have huge file sizes.
• They are not suitable for use on a website.

Resolutions

So now you know about the popular file formats, now you need to know a little about resolutions. I’ll keep it simple.

First, we need to understand a little something about pixels.

A pixel itself is a single block, and in simple terms, it’s the smallest element that your image can be divided into. A pixel can be only one colour, and a photograph or image is usually made up of thousands of pixels, each of various colours that, when placed together, compose your image.

If you enlarge an image, you can clearly see the single pixels creating the entire image.

Images which are used on screen, require far fewer pixels than those needed for print purposes. This is because the density of pixels required on the screen are far less than those needed for printing. So for printing we use high resolution images (typically 300dpi) and for websites, we use low resolution images (typically 72dpi). Dpi stands for dots per inch – it’s a printing term but we use it to talk about resolutions generally.

You should be sure to be using low resolution images on your website, because they are smaller file sizes than their high resolution equivalents, and small file sizes mean faster page load speeds. That’s important from a user perspective, but also for search engine visibility.

Resizing images

If you try to increase the size of an image, you’re likely to experience a loss of quality. As you can see in the image below, I took a section of the leaf, and expanded it. The result is that the section appears blurred.

You can reduce the size of an image without loss of quality, therefore you need to be sure you always start off with a large enough image before you resize it.

Cropping

There will be instances where you need to crop an image to make sure that it fits within a certain space. For example, you may want the image to be square. Most images which start their life as photographs are rectangular, so you will need to crop part of the image in order to achieve a square.

Take this apple for example.

Simply resizing it so that it is square, results in a distortion of the image.

Achieve the correct outcome by cropping, rather than resizing.

Tools and resources you can use

Logos

In my opinion, there’s no substitute for a professionally created logo, and when working with clients, I won’t start work on their websites, until they have a professional logo in place. That’s not me being snobby, it’s just that I have seen so many small business rush into building a website without a proper visual identity, and regreting it 6 months later when they realise that they shouldn’t have cut corners at the outset. They now need to revamp their website, redo all their business cards and letterhead, and all this, whilst their business is growing and they don’t have time for it. Honestly, it’s a false economy.

That being said, I know that may of you undertaking the challenge are setting up personal blogs, and may not be wanting the investment of a graphic designer. This is an alternative option for you:

EvoDesign – a free online logo maker for creating logos quickly.

If you’re wanting some tips on branding, head over to the WordPress Happy Community Facebook page and look for the #brandingweek tutorials which Cass Cassidy from Cap & Anchor gave, as they give you some terrific insights.

Image Editors

Not everyone has Photoshop, so resizing or cropping images can become a headache. Canva is a great resource for creating terrific graphics for your website and social media accounts, but not many people know that it has a photo editor too.

Stock Images

It’s great to use unique images for your website, but most of us don’t have the time or resources for professional photoshoots. So we need to use royalty free imagery from stock image libraries. It’s really really important that we don’t simply lift images from other websites and use them on our own sites. You can find some great resources for free stock images in a post that I wrote some time back.

Summary

Understanding image formats and resolutions is a really critical component to getting the visuals right on your website. There’s nothing worse than seeing stretched or pixelated imagery, and it gives out the wrong message from the outset.