Spread the love

The ultimate guide to photos for your website

Written by Nadin Thomson

March 2022

The ultimate guide to photos for your website

Why do I need photos on my website?

Check out the statistics on the Semrush website:

  • 90% of bloggers include images in their blog posts.
  • Bloggers who added more than 10 images to a blog post reported stronger results.

Photos are not only important for blog posts, but for your website in general.

In this article, you’ll learn:

  • Why you need photos on your website
  • How to optimise header images for your website
  • How to show product photos
  • Product photo guidelines
  • Product “breathing” space
  • When to use JPG and when to use PNG
  • When not to use PNG
  • How to achieve a crisp, white background for product photographs
  • How not to show product photos
  • How to take photos of products
  • How to take photos with your mobile phone
  • If you need to buy an expensive camera
  • Background tricks for product photos and
  • How to order your own photo backgrounds online
  • How to optimise images for your website
  • Understand file size
  • How to name your image files best for SEO
  • How to use image ALT tags for SEO
  • How to resize photos for your website
  • How to optimise photos you already uploaded

Why do I need photos on my website?

Your website needs photos to show your potential customers what you sell, who you are and what your business, products and services are all about.

Just recently, my husband and I went to a local garden centre to look at garden furniture. We were looking forward to testing out some sun loungers and chairs for the garden. We had every intention of buying sun loungers.

They had this amazing 2-person swing on display which looked super inviting. But… It had a huge sign on: “Do not sit on the display. Ask a member of staff for assistance.”

So I looked around, but no staff member was in sight. Two questions I had in my mind immediately:

  • Is this swing too flimsy so it could break when I sit on it?
  • How can this store convince me to buy this when I cannot try it out?
wrong image of products for sale

I don’t know about you, but I couldn’t ever buy furniture without trying it out – touching it, checking the sturdiness, sitting on it etc. I want to touch it or hold it and feel as if it’s mine.

However, on your website – the only chance you have to convince people is to show them photographs of your products or services.

How to optimise header images for your website

  • Keep the file size below 250 KB
  • Dimensions: For a full-width header image, use 2000 px width and amend the height to your requirements.
  • Make sure the image allows text and the text is still readable on your header image
  • Decrease file size by cropping the image to a narrower format, for example crop 2000 px x 1000 px to 2000 px x 700 px (please see below the video for the different file sizes in the two versions).
How to size header images for your website
How to size header images for your website

How to show product photos

Your website photos need to be high quality, bright and sharp

If you sell products and people can buy them on your website, make sure your photos show your product properly.

Your product photos need to be high quality and show your products clearly. On your main product page, the first photo should be 100% clear what it is you’re selling. So a photo of the product on a clean white background or on a neutral coloured background would work well.

You can see a few great examples of product-based businesses here:

Chocolate Tree

Visit website

  • There is a great consistency across the images.
  • The chocolates have been photographed all the same way and then cut out from the background
  • The background is crisp white
  • Each image is a square white image with the chocolage displayed in the centre of the image
How to show product photos on your website - a great example

Quirky Chocolate

Visit website

  • There is a fantastic consistency across the photos in this shop.
  • The chocolates have been arranged and photographed all the same way.
  • A light grey (off white) background is used which remains in place
  • Each image is a square white image with the chocolate displayed both wrapped and unwrapped
  • An additional badge is added at the same position in each photo
How to show product photos on your website - a great example

1ere Avenue

Visit website

  • As these are clothes, they have chosen a portrait format of their photos which works well
  • All photos are consistent.
  • The models have been photographed the same way.
  • A light grey (off white) background is used which remains in place.
How to show product photos on your website - a great example

Product photo guidelines

If possible, the first image should be a clear image of your product and only your product. No distractions, no additional things in the photograph. 

Additional gallery images can show the product in its surroundings (lifestyle photos). However, if your one and only photo is a lifestyle photo, it might not be completely clear what you’re selling.

Lifestyle photos can show your product in context – let your customers imagine what your product would look like in their own home, living room or garden. If you sell clothing – show them on different models and you might want to include a small video of the person walking towards the camera and walking away, but make sure the background is not distracting.

Furthermore, try to stick to the same format for your product photos. If you decide that the square format is best for you, make sure all product images are square.

good product photography guidelines
good product photography guidelines
good product photography guidelines
good product photography guidelines

If your product is super simple (such as pencils), one or two photos are fine. But if your product is more complex, such as a garden swing example, show a full photo of the swing and then add more photos showing the product from different angles. 

good product photography guidelines

This could be the first and main product image.

guide for simple website product photos

This could be used as an additional product photo to show the pencils in a pencil case.

 

product photography dos and donts

This could be an additional lifestyle photograph for the pencils. Unless all your photos have a similar colour range, I would recommend using lifestyle images as additional product photographs rather than the main product image.

Give your products space to “breathe”

Great photos try not to display the product as big as possible in the photograph, but give it space around it. Let me show you: 

Negative Space in Product photography

The product is way too large in the image.

Negative Space in Product photography

The product is still too large in the image.

Negative Space in Product photography

This is much better. The product has space to “breathe”.

Negative Space in Product photography

Ultimately, it’s down to personal preference, but I’d choose this one or the second last one.

Here’s how Tiffany displays there rings:

Here’s how Verragio displays there rings:

When to use JPG and when to use PNG?

99% of the photos for your website are best in JPG format. JPG is a lossy format which means it can be compressed and optimised to have a substantially smaller file size.

Use JPG for any photograph where you show the full photograph.

Use PNG files if you need to preserve transparency. Move your mouse up and down to see that the 2nd image is transparent.

Negative Space in Product photography

This is a “normal” JPG image – i.e. you can see a proper square (or rectangle) and you can see the background too.

The filesize of this photograph is 37 KB.

This is a transparent & compressed PNG image. You don’t see the image border, the background is removed and you can see whatever is “behind” the photograph, such as colour or other images.

The filesize of this photograph is 36 KB.

Don’t use PNG files for “normal” photographs

The JPG format was developed to compress images to a smaller file size. However, PNG files cannot be compressed in the same way.

When it comes to websites, website speed is super important. Therefore, anything you can do to reduce the filesize of your images should be a top priority.

I have saved the following image in both JPG and PNG format. While they both look the same to you, look at the filesize differences!

product photography as JPG file

This is a JPG file and the file size is 30 KB (tiny!!).

If you had 20 photos on your shop page, all photos together would be 600 KB. The page would load really fast.

product photography as PNG file

This is a PNG file and the file size is 282 KB – over 9 times the size of the JPG file! 

If you had 20 product photos on your shop page, the photos alone as PNG files would be 5.6 MB and take substantially longer to download.

How to achieve a crisp white background for product photographs

The simple answer is – you don’t! It’s almost impossible to take photos of products on a white background for them to look super crisp and white when you upload them to your website.

Whenever you see them online, they will have been edited, with the images cut out and the background removed.

Thankfully there is a lot of software available nowadays that allows you to remove the background with a mouse click. Canva has this option available. Check out the following short video to see this in action:

How not to show product photos on your website / Common product photo mistakes

Bad web photos:

  • The background is messy
  • The product has a similar colour to your chosen background and is hard to distinguish
  • The photo is blurry
  • There are other things in the photo and it’s not clear what you’re selling
  • The photo is too dark
  • The photo is cropped at the wrong part
  • Photos are too big
  • Photos are too small
  • Photos are saved as PNG files
  • Photos are displayed in a slideshow (read this article to find out the top 5 reasons why you don’t want to use slideshows on your website)

Check out the following examples:

common product photography mistakes

While this is a nice photograph, it’s not suitable for product photography. The contrast between bag and background is too small and it’s hard to see what’s what.

common product photography mistakes

This is quite a dull photograph and it’s not clear what’s for sale: shoes or handbag. 

common product photography mistakes

If you want to show how much fits into the handbag, it’s better to show this separately. It’s not clear what’s being sold here. Check out the House of Flynn website for a great display of handbags. 

common product photography mistakes

A strange attempt of table top photography. The scarf or blanket does not add anything to the photo here. It makes the whole composition look messy.

How to take photos of products

When you start out, you may not have the budget to hire a professional photographer. With a bit of time and experimentation you can create photos that are good enough for your website and enticing enough for your customers to learn about your products and/or services. 

Can you take product photos with your mobile phone?

Absolutely! The main thing about your product photos is that they are bright and in focus

Here are a few top tips about taking photos on your mobile phone:

  • Don’t zoom in on your mobile, but move your phone closer to the product (i.e. walk closer!)
  • Use a clean and neutral background for your product (see below about neutral backgrounds).
  • If you want, you can use a light tent. Depending on the size of your products, you can buy a smaller one, or invest in a larger light tent. When they’re not in use, you can fold them and store them away.
  • Don’t use the flash on your phone, but use available daylight.
  • Take the photos during the day in a bright area of your home – preferably near a window, but avoid harsh sunlight shining on your products
  • Take the photo from the same direction the light is coming from (i.e. you are standing near your window pointing the phone into the room. Don’t point your phone at the window). 
  • Take different angles of your product.
  • Check out photos on Pinterest and see how other businesses display products that are similar to yours. Which one do you like best? Could you replicate this?
  • Table-top photography is hard and takes time to learn. The best way to get started is by NOT adding additional things (they are called “props”), such as flowers, ribbons etc. as they can make the photo look messy.
  • You can take photos looking straight down or holding your phone straight towards the product.
  • Give your product space to “breathe”, i.e. don’t squash it in at the corners 

 

product photography straight on

This is an example of “straight on” product photography. Your product is right in front of your camera. You’re not looking up or down at the product.

common product photography mistakes

Here’s an example of “top down” product photography. Your product is below your camera and you’re looking down on top of your product.

product photography 45 degrees

Here’s an example of “45-degree” product photography. Your camera is angled at roughly 45 degrees above your product. This means you see the front of the product and part of the top too.

product photography camera angles tutorial

Do I need to buy an expensive camera for website product photographs?

The thing most people get wrong is this: They think an expensive camera will take amazing photos, whereas professional photographers invest in professional lenses. The lens is what makes the difference, not the camera!!

You could easily buy a second hand DSLR for a very low price – either on Ebay or from a good dealer such as Ffordes in the UK. Spend your budget on the best lens you can get. For product photography, you don’t need a zoom lens. You could buy a fixed 35 mm or 50 mm lens (for smallish products – like handbags), or a 28mm or 35 mm lens for bigger products (like chairs, furniture), or a Macro lens (90 mm) for jewellery photography. 

Have a look at this overview video which explains how camera lenses are priced and what to look out for:

Background tricks for product photos

The main thing is to keep your background – if you can – the same across all your product photos. This creates a consistent and professional look on your website shop page.

If you want to vary backgrounds, I’d recommend keeping the same background for the main product image that’s displayed on the shop overview pages (where several products are displayed). 

You can easily create your own photo backgrounds without having to buy expensive backdrops. Simply watch the video below to see how easily you can create your own foam board backgrounds.

Simply go to a website like Pixabay or Canva and search for a background you like.

Then open Canva and create a new design in square format. Either use a Canva background or one you found on Pixabay and upload it into Canva. 

If your products are small (jewellery, candles etc.), you can create a background that’s 16×16 inches in size.

Once you’ve created it, download the image file in the highest JPG quality to your computer. Now look for a professional photography lab in the country you live in and order a square photo with a 5 mm foam board. 

Most professional photography labs allow you to register an account and order from them – even though you’re not a professional photographer.

The one I use in the UK is Loxley Colour. Simply search in Google for “professional photography lab + your country” or “photo prints with foam board backing + your country”.

You then usually have the choice of different sizes.

Check out the video below of how it all works:

How to optimise your photos for your website

  • Rule 1: If you can, use your own photos.
  • Rule 2: Never upload photos straight from your camera or your phone to your website without resizing them!
  • Rule 3: Always amend the dimensions of the photo to the space where you want to use it.
  • Rule 4: Always optimise your images so that the file size is less than 250 KB so that your website speed is not affected.

Understanding file size

Trying not to get too geeky here… The rough things to know:

1 MB has 1000 KB
1 GB has 1000 MB

 

Photo Rule of thumb: Don’t exceed 250 KB per photo – regardless of how big the photo is on your website!

How to name your image files best for SEO

When you download a photograph from your phone or your camera, chances are the file name looks like this:

  • IMG_4205.JPG
  • DSC04957.JPG
  • DSC04357.RAW
  • DSC04957.NEF

Before you upload an image to your website, make sure you rename it! The image file name should be short(ish), but you can include SEO keywords in the file name!

It’s best practice to use dashes between the words, for example:

  • wedding-photos-at-Mansfield-Traquair-Edinburgh.jpg
  • luxury-wedding-cake-by-Sussex-cake-designer.jpg

Avoid using underscores and do not stick the words together, i.e. avoid file names that look like this:

  • wedding_photos_at_Mansfield_Traquair_Edinburgh.jpg
  • weddingphotosatMansfieldTraquairEdinburgh.jpg

How to rename photos you already uploaded to your WordPress website

The standard WordPress installation does not allow you to rename files in the media library. However, thankfully there is a plugin that allows you to do that. It’s called Media File Renamer by Jordy Meow.

 

wordpress plugin media file renamer

How to rename already uploaded photos in Wix, Squarespace, Shopify

How to resize photos for your website and why this is super important

  • Download a screen ruler app (Check here for Windows | Check here for Mac) and measure the space in pixels (height & width of the image) where you want to display your photo on your website.
  • Open Canva or your preferred photo editor app.
  • Create an image with the approximate required dimensions (for example 1080 px x 620 px)
  • Add your photo to the prepared canvas (i.e. empty white photo space you prepared)
  • Make sure your photo covers the canvas
  • Or: Open your image and crop or resize it to the required dimensions
  • Then save your photo as a JPG with a 60% compression.

Here’s how:

How to optimise photos you already uploaded to your (WordPress) website

If you’ve already added lots and lots of photos to your website and they’re all too big, it can seem super daunting and time-consuming having to a) find them all, b) re-size and optimise them all, c) re-upload them all and d) replace the existing photos.

In WordPress, thankfully there are Plugins that you can use to optimise already uploaded photographs.

Once the Plugin is installed, it will even optimise photos automatically that you will upload in the future.

However!!! – always optimise your photos BEFORE uploading them.

On this website, I use the Shortpixel plugin to optimise photos. Simply go to your Plugins, click Add New and search for “Shortpixel Image Optimizer”. The author is “Shortpixel”.

This plugin is free to use for 100 images per month.

Feel free to search for other plugins obviously. Simply search the plugins by keyword “optimze images”.

I purchased 10,000 images for $9.99 – no monthly fee, just a one-off fee. This will keep me going for a while! You can view their pricing page here.

 

Shortpixel price options

I have had Shortpixel installed for over a year and look at the statistics of how much bandwidth it saved over time!

how to optimise images for your website - file size saved with Shortpixel

How to add ALT text to your images for SEO?

What is ALT text?

ALT is short for “alternative text” (or alternative attribute). It’s meant to describe what is in the image. It’s not displayed, but only appears in the website code.

Why is ALT text important?

  • Your photos (and website!) are found in Search Engines.
  • Your website will have better SEO.
  • Your website is more accessible.

Who is ALT text for?

  • People: Initially, ALT text was mainly used for visually-impaired people. They use a device that reads website text to them. When they come across a photo, the ALT text would tell them that a) there’s an image and b) what’s in the image. That’s why the ALT text should be written in a readable manner (using proper spelling & grammar).
  • Search Engines: Search Engines are getting better, but they cannot “see” what’s in a photo. A search engine will read the code on your website to find out what’s on the photo. If you have good ALT text for each photo, people will find your website when they are looking for photos (using the Google Images tab).
    Search Engines also perceive your website as “better optimised” which is beneficial for your overall ranking.

Here’s an example of how people use image search in Google:

How do you write ALT text?

  • Keep it short.
  • Describe what’s in the image.
  • Add keywords without being spammy.

Image ALT text examples for SEO

Please see the below photos and how I have added a short description as well as keywords in the ALT tag:

Alt Text example

Alt Text for the cup cake image: product photography top down example photograph

Alt Text example

Alt Text for the plugin screenshot: wordpress plugin media file renamer

Nadin Thomson

Nadin Thomson started developing websites in 1999 as a hobby and started her business as a web developer in 2004. She has 18+ years of experience in helping businesses of all sizes to create an online presence and improve their website. She's also worked as a photographer in Scotland for 15+ years. The majority of her customers found Nadin through Google as she's continually optimised her website for SEO.

Nadin Thomson has a University Business degree and a Postgraduate Diploma in Digital Marketing.

Find out more about Nadin Thomson.