What image format should I use on my website?

Last updated Jul 20, 2020

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.

thistle

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

pixels

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.

resizing image

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.

apple

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.

butterfly

Vicky Etherington

Vicky Etherington has been running her own online marketing agency since 2003, and in 2014 transitioned to working with coaches and therapists to teach them how to create their own client-attracting websites. 

Become Part of
The WordPress Happy Community

Join 1600 other service-based entrepreneurs
who are empowering themselves to DIY their WordPress websites and online marketing with confidence.

If you want to accelerate your website journey, side-step all the tech meltdowns, and create your own  client-attracting website from scratch, join my Rock That Website. You’ll get a proven step-by-step roadmap to build your own successful site with confidence.

Did you enjoy this?
Here are other articles you may like

What metrics should you track on your website?

What metrics should you track on your website?

In this two-part series, we are going to explore a topic some of you don’t like talking about at all: metrics.  Don’t click away because you’re already overwhelmed!  Metrics can seem complex at first, or maybe even unnecessary, but they are indispensable...

Setting up Google Analytics for Success

Setting up Google Analytics for Success

Without any kind of measure on our business, we're operating without any kind of navigation. Google Analytics is the tool that will help you come to grips with your users online behavior. Otherwise you will feel lost without any metrics. For so many years, I did...

Creating an effective website plan for your success online

Creating an effective website plan for your success online

How to create an effective plan for your website You’ve done it!  You have taken the leap, and you’re all set up with a nice, shiny new website!  Now you can sit back, relax, and wait for your inbox to get flooded with people asking how they can work with...

Why I love WordPress

Why I love WordPress

I might be a website designer (I know we sometimes get a bad rap), but actually, I'm a WordPress designer. Because it's the only website platform I work with. And there’s a very straightforward reason for that: I love WordPress!   I’ve used other CMS and...

Join the Discussion

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin
Share
Pocket
Email
Tweet
Share