A guide to using images on your website

by | Dec 9, 2019 | Websites, Divi, Website Planning

In this guide I am going to explain every thing you need to know when it comes to choosing and using images on your website.

Choosing images for your website

Home page hero image (image at the top of your homepage)

If you are your brand and your client will be working with you personally you can use an image of you for the home page hero image.

One of you in action will help people imaging working with you.
One of you looking directly into the camera helps to make the website visitor feel connected to you.

If you don’t have an image of you, then you can also use an image depicting the end result. E.g. if fitness is the end result then show someone who is fit. The helps the website visitor image themselves achieving the end result.

If you are not your brand then choose images of your product or service in use by your clients and customers.

About page images

If you want to reveal a little more about yourself on your about page this is where you can show more relaxed images of you and / or your family.

Ask yourself, what is relevant to the visitor? Is it important for them to see you as running marathons in your spare time? If you are a fitness instructor then this would be relevant.

Include relevant images that support the overall message you want to say.

Free Image Websites

Here is a list of websites where you can get free images for your website. Some ask for you to link to their site in return for the image. Check the licensing of the images so you understand how you are allowed to use the images.
  1. https://pixabay.com/
  2. https://unsplash.com/
  3. https://www.pexels.com/
  4. https://gratisography.com/
  5. https://morguefile.com/
  6. https://www.stockvault.net/
  7. https://picjumbo.com/
  8. https://pikwizard.com/
  9. https://www.rawpixel.com/
  10. https://www.reshot.com/
Tips on choosing images

Creating an overlay on your image if you have text over the image (in Divi)

If you have text on your image you may need to tone down your image to make the text stand out more.

Depending on the colours in your image you will either want light or dark text.

E.g if your image has dark colours you will want your text to be white. To make the text stand out you will want to use a dark overlay.

If your image is overall very bright you will want your text to be dark. To make the text stand out you will want to use a light overlay.

I demonstrated the steps below in the workshop. If you want me to do a video to demonstrate again just let me know.

To add an overlay to your background image do the following (once you have uploaded your background image);

Content tab -> Background -> Background colour (1st tab with a paintpot icon)

Select the colour for your overlay, if you want a dark overlay choose black (#000000), for a light overlay choose white (#ffffff).

Once you have selected the colour find the settings icon (the cog icon) and change the transparency until you get the desired effect.


Submit a Comment

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