adding-images-to-your-website

There are two ways to have an image appear on your website: either upload a picture file from your computer or create a link to a picture on another website.

Firstly a few words of wisdom on copyright of images

In the UK there is a government guide in pdf form. Copyright Notice: digital images, photographs and the internet. This gives interesting advice such as you cannot use a photograph that you have taken of a painting that is owned by someone else, on your website, without permission of course. So it can be a little confusing as to just what the rules of copyright are.

If you use a picture on your website be aware of its copyright. As an example, a lady blogger, Roni Loren, gives some useful suggestions after having been sued for breaching copyrite herself! There are four ways around upsetting the legitimate owners of pictures that you want to use on your own website. First: Use your own pictures (obvious that one), Second: you can obtain some free-to-use pictures. I will give a, not exhaustive, list later in this article. Roni Loren also has a few suggested sites. Third: again fairly obvious, you can contact the owner of the website where the picture you want to use is and ask permission. This maybe not easy to do if it is a big website with lots of employees because you might not be able to find exactly who is able to give permission. Fourth: some individuals and companies allow you to use images for a cost. Again, I will provide a little list below.

Roni Loren says it doesn’t matter if you link back to the source and list the photographer’s name, it’s still a copyright violation and does not releases you from liability. Personally, this type of information regarding copyright is good enough for me, I don’t need to hear it from a legal expert, just someone who got the T-shirt.

List of possible free-to-use sources of pictures

Unsplash.
Bing Images NOTE: Bing Images appears in both my free-to-use list and my premium image sites list. I explain how to use Bing Images to source free-to-use images below.
flickr I deliberately put a link here into the flickr help forum rather than the home page for two reasons:
1. You need a Yahoo account to access flickr
2. Only some of the images are “creative commons”. So you need to read up on this by following the flickr link
PEXELS
FREEIMAGES

List of Premium, pay-to-use, sources of pictures

Bing Images. If you use Bing Desktop then you will be aware of just how good some of the pictures are as there is a different image, either a natural landscape or wild birds or animals, from somewhere in the world, appears on your desktop every day. So folk need paying to produce these.
gettyimages
shutterstock

Using search engines to find “premium” or “Creative Commons” images and pictures, will bring up even more ideas. My lists are not definitive by any means.

“Royalty-Free” and “Creative Commons”

The difference between “Royalty-Free” and “Creative Commons” usage licences are that Royalty-Free means that you usually have to pay a one-off fee but do not have to pay a fee every time the image is viewed on your site. Creative Commons is actually an American non-profit organisation, but the Creative Commons licence means that creators of the images are able to decide what the usage of their work will be, on an image by image basis, up to and including an image being completely free and open to use for commercial purposes and modification.

Disclaimer

All of the above on Copyright for images and pictures is my own opinion, gleaned and learned from my own readings and experience and does not constitute any form of advice. I am not a lawyer and therefore not qualified to provide legal advice. If I were a lawyer I would probably charge anyway 😉

How to link to a picture on, for example, Bing Images.

I don’t really want to post a picture of the Bing Images home page for fear of copyright infringement ! 🙂
This is the link to the Bing Images Site: www.bing.com/images. You can open a new browser window entirely (rather than just a new tab) by pressing CTL + N, You can then navigate to the Bing Images site. That way you can then see both the Bing Images site and the following instructions, in the first browser window.

When you come to the Bing Images Main page there is a Search Box at the top of the page followed by a Menu Bar with Web, Images, Videos, Maps, News and Explore on it. Below are the steps to obtain the image you want and the licence type for that image.

Search for the image you want from the main page search box
The page then shows, from the top
1. Search Box
2. Menu Bar
3. Alternative but close search terms. For Example if I search for “St Ives Cornwall“, it comes up with St Michaels Mount Cornwall, Mousehole Cornwall, Port Isaac Cornwall etc etc
4. Then a second Menu Bar which has Image size, Color, Type, Layout, People, Date, Licence and Moderate. All of which have a drop down arrow next to them
5. Then a whole load of images from which to choose from
From this second Menu Bar select the drop-down Licence arrow
Depending on what you want to use the image for, choose from the drop down list of licence options including Free to use, modify and share commercially. Obviously selecting this licence option will limit your choice of available images
After you have selected the licence option then the available images under that licence option changes
if you click on the image you want it will show on its own in the browser window
you can then right click on the item and click “save as” to determine the file name and type.
if you just want a copy of the image then you’re done
but if you want to link to it then:-
1. you can use the URL, along with the file, name for your image ALT
2. and you can then click on the image a second time and a new tab will open up to give you the the URL that you can use to link to the image on your web page.
one reason why its a good idea to have the original BING URL as your image ALT is so you have a record of where the image came from and it’s licence type
the reason why it’s a good idea to link to the image rather than to upload it to your site is that:-
1. Gives the originator of the image a nod and
2. provides a possible resource to your own visitors

So, as an example, I have selected this little poster which is quite apt for my ourlife.co.uk website.

The code that brings up this last picture looks like this:-

The <img src= actually links to the picture. That’s the main bit that puts the picture on my webpage.
The <a href= part takes your visitor to the page containing the picture. In this instance it clearly shows the Bing Images site. This also has a link at the bottom to the original picture contributors website. Also, if you hover your mouse over the picture it gives you this source at the bottom of your browser.
The target=”_blank”> code at the end of the <a href= code opens the link to the Bing Images page in a seperate tag on your visitors browser.
The alt= code shows your visitor where else they can get to see the picture if it fails to materialise on your site!

Uploading pictures on to your website

This is fairly straight forward as you can use the “Add Media” button on the WordPress Dashboard and fill in the boxes. You can upload image files from your own PC.
These images will then be located under public_html/wp-content, in a sub-folder of the folder called “uploads” on your hosts web-server. WordPress creates sub-folders according to the year and month. So the folder below is November 2016.

WordPress uploads directory — Default Directory for uploaded image files on my Hostgator site.

As an aside, we have one of those quirky ‘chicken and egg’ scenarios here as you won’t see the file named “uploads-directory.jpg” in the items listed in the folder here. That’s obviously because I created and uploaded the image BEFORE the file was added to the folder, i.e. that is the name of this picture.

Getting back to the uploads folder, when you back-up your site you need to back up your database file, your child theme folder and your uploads folder, as a minimum. You could locate your images within your child-theme folder and link to them from there. But what happens if you then decide to change your theme?