The ultimate guide to using images for your website

When it comes to adding images to your website it seems like a fairly straightforward process, right? Take a photo or grab an image somewhere online and upload it to your site and you’re done! Whilst this is the general gist of using images on your website, when you start scratching the surface you will begin to realise there’s a lot more to using images on your website than ‘upload, insert and publish’. Before we get into how to find, edit and optimise images for the web, let’s get a basic understanding of images, the different types you can get and some basic attributes of them. 

What type of image file types can I use on my website?

The answer to this question is ‘the best one for the job’. There are a few different types of images (jpgs, gifs, pngs, etc) so let’s dive into each of these different types of images and what they should be used for.  GIF stands for ‘Graphical Interface Format’. This type of format is best used for computer-generated images like logos and graphics and those funny animated gifs of cats we love so much. It’s best not to save photographs as a GIF as this will increase the file size of the image without giving you any gain in image quality. 

JPEG
JPEG (or jpg) stands for ‘Joint Photographic Experts Group’. This format is best used for photos on the web. Do not use this format for logos or graphical images as they will turn out pixelated and look really ordinary.

PNG
Stands for ‘Portable Networks Graphic’. PNGs are very useful if you need an image with a transparent background but they can tend to be larger in file size so you will want to make sure you optimise them for the web (more on that later).

BITMAP
Saving your image as a bitmap means that you will save the image as a series of dots or pixels. BITMAP is bad M’kay – don’t use BITMAP.

EPS
The EPS format is used mainly for print work. If you have an eps file you will need to convert it to a jpeg or gif for use on the web.

PSD
The psd format is a Photoshop file extension. If you have a PSD file you will need to convert it to a jpeg or gif for use on the web.

TIFF
The tiff format usually makes your images a higher resolution, so this file format is not great for the web.

The three types of images we predominately use on websites are GIFs, JPGs and PNGs. Keep to these formats and you’ll be A-OK. 

The difference between image size and file size

There’s two main elements when we’re talking about the size of images on a website. The file size and image size. It’s very important to know the difference between these two elements as they can make big changes to your site’s speed and load time. Let’s break them down. 

File size

Remember, the larger the file size the longer it will take for a browser to download, and the longer your visitors will have to wait before they can see the image. General images for your website pages should be around 100-200 Kb at the most.

The latest trend for websites is to have quite large, full-screen images in a banner or slideshow on the homepage and sometimes internal pages. If you have these, it’s not an issue but your image file size will undoubtedly be a little larger so you will want to ensure you optimise it as much as possible (more on optimising images later in the article). These will usually be creeping up to around 300-400kb, perhaps more if you need a transparent png. 

Don’t be fooled into thinking that you can simply download a photo from your digital camera and add this to your site. Most cameras will produce a photo of around 5-6Mb in size. 

Note: Some content management systems allow you to reduce the size of images in their WYSIWYG (what you see is what you get) editors. Usually, this does not change the file size – only the image size.

Image size

The image size is the size of the image on the screen. This is typically measured in pixels. One pixel is equal to the dot in this i. The image size will change depending on how you’re using your images. If it’s images of staff for example on an about us page, these could easily be around 200-300px wide. 

If you’re looking at using your images as a banner for the top of your blog articles, typically I will try to make these the size of your content area, so this is usually anywhere between 700-1200pixels. 

If you’re looking at using images as a large full-screen banner or slideshow, you will want these to be around 1500-1900 pixels wide to accommodate the different sized monitors available. 

Note: these are only a general guideline and not hard and fast rules. There are always slight exceptions and differences for each website.

How can I optimise images for the web?

Making your images the smallest file size possible is good practice. Not just for usability, but also for SEO. Google takes your website speed into account when ranking websites so ensuring that all your images are optimised for the web is a must. 

There are a few different ways you can crunch down the size of your images, but my favourite tool is www.tinyjpg.com. This online tool will reduce your image file size by a fairly large amount. In a test for writing this article, I uploaded a 1.6Mb photo and TinyJPG got it down to 424KB with no image quality loss. That’s pretty impressive!

Is there a program I can use to easily crop or resize images?

There are lots of different image manipulation programs out there, from top of the line programs like Photoshop or you could use a free program like Gimp – both are very good options. 

If you’re wanting to make quick little edits like resizing an image or cropping it to use on the web, you can’t go past Pixlr. Because it’s an online service, there’s no software to download and you can easily make edits, changes and manipulations to your images. 

Where can I get images to use on my website?

There’s a wide range of places you can get images for your website. Obviously you can get some photos taken by a professional photographer or take them yourself if you have an interest and talent in photography. 

If that’s not an option for you, you can always use paid services like iStockphoto or Shutterstock. Another alternative is to use some free services like Pixabay and you can even get some great images from Flickr or Google Images but please make sure you filter images to ensure you’re using images that are tagged ‘commercial use allowed’ and if the owner of the image has asked for attribution (recognition of their image in the way of a link) then please make sure you do this. 

Note: Please don’t go to Google Images, grab any old image you like and whack it up on your website. For more info about creative commons licenses, go here https://creativecommons.org/licenses/by-sa/2.0/.

If I delete an image accidentally is there a way of getting it back?

If your page has been online for a while and it’s been indexed by Google you can always try looking for the image on a cached version of your page. Simply get your page url, go to www.google.com.au and type
      cache:www.yourwebaddress.com.au/pageurl
into the search box. 

So for example, if I wanted to see the images used on the homepage of our Marketeam website, I would type
      cache:https://marketeam.com.au/
into Google’s search box.

Likewise, if I wanted to see the images used on our article ‘What is duplicate content’ I would type
      cache:https://marketeam.com.au/resources/articles/seo/what-is-duplicate-content
into Google’s search box. 

If you’re looking for an image from a website that’s perhaps not online anymore you can always try The Wayback Machine to check pages of websites that might not be around anymore. 

How can I tell how large the images are on my website?

There are a few ways to do this. You can run some diagnostics on individual pages using tools like Google’s Page Speed Insights, GTMetrix or the Pingdom Website Speed Test. These tools are great, however, they will only tell you the size of the images on the page URL that you plug into their tool. 

If you’re looking to find out the image size of all images on all pages of your site, I would suggest using Xenu Link Sleuth. This is a great little piece of software that will take a crawl of your entire website and will give you information about the pages, CSS files, javascript files and images on your site. Simply run a crawl of your site, then download it as a CSV and open it in your favourite spreadsheet editing program (for me that’s Google Sheets) and sort by type then size and you will have a list of all your images from smallest to largest!

That’s our ultimate guide to using images on your website. We hope you’ve found it helpful and gotten some useful tips from our experience of building websites for over 15 years!