It is important to include photographs on your site for search engine optimisation and your audience. You should routinely add images to WordPress pages or posts.
First I cover where to source images and how to resize, compress and save them properly for search engines.
Sourcing images to use on your website or blog
When choosing an image consider the shape. Should it be landscape or portrait? Will it fit where you want it to go.
There are a number of ways to source photos for a website or blog.
Take photographs yourself using a digital camera or phone, pay a professional photographer, ask friends, use a stock website or search Google. Only use Google images ‘labeled for reuse’.
Stock websites and the Google search also provide illustrations and videos which can be very useful.
I tend to mix things up. I use photos from various sources, depending on my use.
Using Google images
Some images in the public domain are available for reuse on a commercial site, some are not.
Like anything else, images usually belong to someone. Be careful when taking images directly from Google. Heavy fines can be handed out for using other peoples photos.
Google offers a search tool that helps find images labeled for reuse.
- Either go directly to www.google.com and search a subject then click images.
Or go directly to images.google.com.
- At the top click SEARCH TOOLS.
- Click the option ‘labeled for reuse’.
Google displays a grid of images that are labeled for reuse them, even commercially.
Be careful. It is your responsibility to check the copyright of each image. Click the image to visit the webpage. Read the copyright requirements.
A link back to the page or credit the photographer may be required before you use the image.
Videos and text can be found on Google in the same way.
Resize and compress your images for the web
You’ve found your image, now resize and compress it for use on the internet.
Prepare your image for the web
‘GIMP’ (The GNU Image Manipulation Program) is an image editor that is free.
Download it from the GIMP website here: www.gimp.org/downloads.
GIMP tutorials can be found here: www.gimp.org/tutorials.
Resizing an image for WordPress
Unfortunately one size does not fit all, so make sure to resize your image. Using huge files, straight from a stock website will slow your site down. Google will penalise for this.
Size on-page images to around 300 pixels wide.
If you are using image enlargements size it to between 800 – 1200 pixels wide. WordPress will put one size directly onto your page. When adding to the page, you can ask WordPress to enlarge the image on click.
Compressing your image for your website or blog
All website or blog images should be compressed. This is different to resizing an image.
Compressing an image reduces the actual file size, making it download faster.
Compression has a lot to do with not compromising the visual quality of the image.
You can compress images using GIMP, here are some instructions: docs.gimp.org.
Save your images for Google search
It is important to optimise images so that Google can easily find them.
Search engines do not recognise images, so we have to help. Saving your image is an important part.
Save your image according to the image subject. Ie. strawberry-cheese-cake.jpg is much more informative than image07.JPG. If there is no alt tag for the image Google will use the filename.
Add a single image to a WordPress post or page
Google quality guidelines say ‘place images next to relevant text’ where possible.
- Log in to your WordPress admin area and navigate to the post or page to edit.
- Put your cursor where you want to add the image. Just click a white space with your mouse.
Image placement tips
To align an image to the left or right of a paragraph click before the first word.
To centre an image below a paragraph click to the right of the last word including full stop.
- Hit the ADD MEDIA button, just above the work space.
- Click the UPLOAD FILES.
- Now click to SELECT FILES.
- Locate your resized image on your computer. Click on it and press OPEN.
The image has now been uploaded to your MEDIA LIBRARY.
Size and alignment of an image on a WordPress page or post
Make sure the image is highlighted.
A blue box highlights the image you have selected. A blue tick appears in the top right hand corner. Older versions of WordPress may not display the blue box or tick.
The tools in the grey area (right hand side) size and align the selected image.
You may have to scroll down to see the options.
The WordPress image options are as follows:
Alignment – align image to the left, right or centre of your text.
Media File – links to a larger version of your image.
Attachment – links to a page that contains the image, automatically created.
Custom URL – enables you to add your own link.
None – takes the link out.
Size – determines the size of the image on-page.
Size does not necessarily have to be the size of the actual image, although in best practise it would be. These sizes will all be depend on how you sized your image earlier. Full size will be the full size of the image.
- Now click the blue INSERT INTO POST button
Click the image on the page for the image editing menu.
Here you can choose to realign the photo. Click the pencil icon to bring up the edit image screen.
Optimising images for Google within WordPress
I would like to outline two more important attributes in optimising images on WordPress for Google.
Alt text (alt tag)
Alt text stands for alternative text, it is an information tag. It is used to help people with images turned off, users with visual impairments or people using screen readers.
The alt tag helps Google to understand what the image is, so you should use key phrases when writing it.
Using Internet Explorer the alt tag pops up when you hover over the image.
Image title tag
The image title tag provides additional information.
Using FireFox the image title tag pops up when you hover over the image.
Providing image captions also help search engine rank. Remember, Google wants a good user experience, so do not keywords stuff or write irrelevant text.
- Add or edit these properties by clicking on your image
- Click the pencil icon.
- Alternative Text (ALT) can be found under the caption field.
- Title Tag option is under the Advanced Options, which you can find by scrolling a little.
Using WordPress galleries
WordPress galleries give the ability to include more than one photograph in one area.
WordPress adds thumbnail images to your page. Enlargement images can be set to open when the thumbnails are clicked.
A Light Box plugin will need to be installed to display images within a Light Box; WordPress does not do that automatically.
How to add a WordPress gallery to a page or post
Log in to your admin area and then navigate to the post or page you want to edit.
- Click your cursor in the area that you want to show the gallery.
I advise that a gallery is centred underneath or above a paragraph, so that it fits nicely.
- Use the ADD MEDIA button, just above the work space.
- On the left hand side of this screen click CREATE GALLERY.
This screen is very similar to the last screen, except CREATE GALLERY is displayed as the title.
- Choose images from the media library or upload new ones, using the upload tab.
- Click all the images you want to use.
A grey tick appears, top right of the thumbnail when you have selected it for inclusion.
If the tick is blue the image is selected. The properties of that image will be displayed on the right hand side.
To remove an image from a gallery hover over the tick until it turns to a minus sign, then click.
- Too add the gallery CREATE A NEW GALLERY, bottom left.
- This next screen contains your gallery settings. Each choice selected here will be applied to ALL thumbnails in the gallery. On the right hand side are your gallery options: Link to, Columns, Random Order and Size.
Gallery options in WordPress
Link to – where the thumbnails should to link to.
Media File – it will link to the enlarged version the relevant image.
Attachment page – creates a link to a page containing the full size image.
None – the thumbnails do not link at all.
Columns – how many gallery columns. Obviously if you have 6 photos, 3 columns might be nice for even spacing.
For bigger thumbnails choose a smaller number of columns and bump up the thumbnail size in the drop down box below.
Ticking random order will display your thumbnails in a random order on each visit. Great if each image is as important as the next.
Order your thumbnails in a WordPress gallery
WordPress makes it easy to reorder your thumbnails within a gallery.
- On the EDIT GALLERY screen, continuing from the steps above, just click and hold an image.
- Use a mouse to drag the image. Hover over another image.The offending image will jump out of the way (left or right).
- Release your mouse and drop the image.
Unless you have random order ticked, the image order you see here is how it will appear on the page.
- Click INSERT GALLERY to add the gallery to your post or page.
Edit a WordPress gallery
- In your work space the gallery thumbnails are displayed. Click the gallery
- A menu appears above the gallery, displaying a cross and a pencil.
- The cross will delete the gallery.
- Click the pencil to open up the EDIT GALLERY screen.
- Change your columns, attachment or links, the order, size or add images here.
The process to add images to WordPress
Find an appropriate image that is available for reuse, or you have bought a license for.
Make it the right size for your page and save it according to Google requirements.
Use compression software to bring the file size down.
Add it to your WordPress media library.
Then add it to your WordPress post, page or gallery.
Make sure you optimise each image using ALT tags, title tags and captions.