How to Add Images to a Website

A web site needs great pictures, but where do the images come from? This page will show you how to add images to a website and where to source them.

Great images help keep visitors interested in your site.

Great images help keep people on your site

Golden Rule #1


Don’t copy images that you find on the web! You’ll be infringing on copyright laws and copying can get you and your website into serious trouble.

Instead, source legitimate places on the internet that supply free images for your use.

Free Website Images


There are three types of free images available for your website:

  • Completely free, no attribution required.
  • Free, but requiring an attribution.
  • Your own personal photos.

I prefer to use my own photos or free photos which don’t need attribution – simply because that way the reader isn’t distracted from the site content by the attribution.

If you find photos which you want to use that need an attribution that’s perfectly fine, just make sure you do post the source of the image.  

Taking your own photos is also a simple process, but you do have to have the subject matter available, so it often isn’t possible. If you have a decent mobile phone camera, taking the photos when you’re out and about can become easy.

Royalty Free Images


My favourite place for looking for beautiful images is Unsplash. You’ll find countless works of art in the form of photographs – and they’re all free to use.

Unsplash for free images

But when you’re looking for something a little more basic, like an image for a traffic light for example, then Unsplash may not be the best place to go. Because Unsplash is art.

My other favourite source for royalty free Images online is Pixabay.com

pixabay for free images

When you put in a search, be aware that the top line of pictures on this site are from Shutterstock, which is a sponsor site that will charge you for its images. To get the free images, scroll down the page.

With both Pixabay and Unsplash you can join the community and upload your own photos (if you wish) for other people to use. They’re great sharing platforms.

Once you find a picture you like, click on the image and it will open in a new screen, and to the right of the image you’ll see whether it’s available without restrictions:

Free for commercial use image

 

Other Image Sources


Affiliate images:

As an affiliate marketer you’re probably going to be promoting products and these will bring with them their own images, directly from the site that you’re affiliated with, such as Amazon.

Screen Shots:

As with this page, screen shots are a very important and useful way to source images that illustrate your content.

You Tube Video:

Video from YouTube is another source of imagery for you to use on your website.

How to Use Free Images in a Website


Once you’ve chosen your free image, click to download it. You’ll automatically be given an option of different sizes, with one size being recommended.

Make sure to use the right size when you post the image as large images will slow down your site. If you’re using your own images, also don’t forget to make sure they aren’t too big before uploading to your site.

On an Apple:


When you click download the picture will be pinged onto your desktop. Double click to open the picture, which will be opened by Preview.

Click on File – export. The pop-up menu will give you the option of which destination to save it to. Desktop is handy for finding it easily again and later on you can always move it into a folder. Change the format from ping to Jpeg and click save.

how to save an image

From your WordPress dashboard, place the curser where you want the image to appear and click on ‘add media’. You’ll be given the choice between a picture from your library or to upload. Click on upload and then click on the picture you have just saved to desktop.

The picture will then be uploaded into your library ready to be inserted into your page. Once is has uploaded you should give your image a relevant title, putting dashes between the words in the title and no spaces.

Fill in the alt text without dashes. Google takes notice of titles and Alt text so it’s best to fill those out before inserting into your page.

screen-shot-2016-12-14-at-22-29-31

What Happens If You Get the http Error Message?


The http error message comes up in WordPress when your photo can’t be uploaded and it can be very frustrating when you’re starting out and you don’t know what’s wrong.

Common causes are the internet going off or not being fast enough, or the photo being too large, or in the wrong format.

Also check that it isn’t a problem with the browser you’re using. So if you’re using Safari and having problems, try with chrome and vice versa.

Where to Place Your Images


Once your photo is installed on your page, simply click the image and choose from the icons at the top whether to place it to the left, right or centre and the text will automatically wrap around it.

I usually prefer to have a line of text above the photo so that the photo is framed by text, but it’s a matter of personal preference. I also prefer to keep the images to the same side as a general, but not hard-set rule.

If the text is the most important aspect of your site (say a blog) the text would go on the left and the image on the right – but if you’re writing reviews, or selling products, then I’d put the image on the left and the text on the right.

For a video or a commanding image, centre would work best.

If you have any questions about adding images to your site, leave them in the comments section below and I’ll get back to you.

Leave a Reply

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