Go to top

How to use images on your website

Website images blog post

Disclaimer: Hive of Design is not the owner of any of these website resources and are not responsible for the use of them or any images downloaded from them.

Images you need on your website and how to format them so they can be uploaded onto your website.

This guide applies to you whether you’re either getting a website set up or you’re adding new content to it to keep your website fresh and up-to-date. 

Images you need on your website

In order to capture the attention of the website visitor, you need to include images on your website pages. As a minimum, you should have these images on your website:

  • Your logo (if you don’t have this, check out our logo design services[link to page]).
  • A large hero image or video for the home page (this needs to summarise what you offer).
  • An image that summarises each of your product/service categories.
  • About five images for each product, service or case study.
Fashion Point UK website
As a minimum, you need your logo, a large hero image and an image for each service/product.

These are also very good images to have:

  • Photos of your premises and/or equipment.
  • Photos of your staff, or a headshot if you are a sole trader.
  • Logos of your most notable clients for your home page (if you are B2B) 
  • Photo of the person cited to go with their testimonial.
  • Logos of awards/qualifications acquired for your website footer.
  • At least one image for each news article or resource.

Make sure you are allowed to use the image

Copyright image

Make sure you do the following when using images:

  • Get permission to use logos or photos that aren’t your own. You can usually do this by sending them a quick email.
  • Get permission to publish a photo from all of the people in the photo.
  • Check copyright and get the appropriate licence for all images. 

If you’ve found an image using Google Search, you probably won’t have copyright. Find out where you can find free images that you’re allowed to use.

Alternatively, you can download cheap but good quality stock photos from these websites:

Use the correct image format

File types to use:

  • JPG/JPEG for photos;
  • PNG for illustrations with transparent backgrounds; 
  • GIF for animations; or
  • vector files like EPS or SVG for logos and icons.

You can use PNG or JPG/JPEG files for logos, but this may limit the design options available and they may look blurry on the website.

Use the correct image size

You can use Pixlr to resize your images.

The maximum size you can upload onto most websites is 2 MB. Large images are bigger than this, so you’ll need to edit them. Do this in the free image editor on Pixlr by doing the following:

  1. Go to pixlr.com and open your image.
  2. Select “Save” at the bottom of the screen.
  3. Select “JPG” as the format in the pop-up window. To compress your image use the slider to adjust the quality. Lower the number as much as possible without compromising the quality of the image.
  4. Keep an eye on what the output file size is (this is shown in the middle of the pop-up window). When the file size is less than 2 MB, select “Download”.

You can also use the image editor in Pixlr to crop images or resize them.

Name images properly

Rename images with descriptive file names, replacing any spaces with hyphens. For example, instead of “image_01.jpg” use “company-owner-john-smith.jpg”.

Using descriptive file names is essential if you’re passing your images to a website designer (so that they know what the image is). Naming images in this way also makes it easy to:

  • search for the image in your website’s media library;
  • add the image’s Alt text (this is for SEO as well as visually impaired visitors); and
  • add an image caption.

Find out more about Alt text:
https://moz.com/learn/seo/alt-text
https://uxdesign.cc/the-art-of-alt-text-35f10a7d5cf6

Sort and file images

Before uploading your images to your website or passing your images to your website designer, organise the images into folders. Use the website page name as the folder name (you can get the page names from your sitemap). For example, we’d put our headshot in a folder named “about page”.

image sorting

Save and send images

Send all the images you’ve collected to the website designer as individual files in the properly named folders. Zip the files together and send them via your preferred file transfer service (WeTransfer offers a great free file transfer service).

To show the layout of a page, you might want to add the images to a document – either a Microsoft Word file, Google Docs file or PDF. But if you supply the images in a document remember that you also need to send the individual image files.

Get website images

Our team at Hive of Design offers a range of graphic design services, including illustration, photo editing, product photography and sourcing stock images. We also love to work with photographers and illustrators, whether it’s someone you know or someone we’ve recommended to you. If you need images for your website, get in touch.

More articles

Why your small business needs a free Google account
Get consent to set tracking cookies on your website