If you’re a newcomer to WordPress, you might’ve got as far as publishing your first blog post. No doubt that was exciting!
But then you quickly come to realise that pages and posts without images can be rather dull. After all, images lead the eye, attract clicks and help to illustrate difficult concepts.
It’s always worth giving thought to adding graphics or photos to complement your blog posts. This tutorial will walk you through that process and discuss some important considerations along the way.
Only upload the images you need
The first rule of thumb for uploading images is that you don’t upload images. Unless you are ready for those images to go live on your website straight-away, that is.
In a stock WordPress installation, every image you upload will be given its own page by WordPress. This page can then in turn can be indexed by Google. Generally speaking, this is not what you want to happen!
Unless you add lengthy textual descriptions to each photo you upload, these generated pages will be very light on content. Without the correct SEO adjustments in place search engines will frown upon a large swathe of your site content. That is never a good thing!
Use suitable SEO mitigations
So firstly, make sure you have a purpose for every image you upload. Secondly, make sure the image pages WordPress generates are set to ‘noindex’ or else redirected to the original image URL. This will prevent search engines from adding thin pages to their indexes and then punishing you for wasting their time. You’re always welcome to have a chat with us if you need help with this.
WordPress also makes it tantalisingly easy to upload images in bulk. I’ve heard of people plugging their cameras in after an event and uploading every photo they’d taken straight to their website. Sadly, they ran out of disk space very quickly and this in turn brought their website down.
Prepare your images for uploading
Okay, so I’m not quite done with stern warnings yet, but this is the last one I promise!
You absolutely must check you have permission to use any image you publish (upload) to your website. I’m deadly serious about this one! Don’t go any further until you’re certain you have the rights to use the image on your site.
To summarise, if you:
- Bought the photo from a stock library, that’s fine (but you might want to check the vendor’s Terms of Use to be sure the licence covers commercial use).
- Took the picture yourself, great.
- Commissioned a photographer, fab!
- Found it on Google (even if it says it’s licensed for commercial use), tread carefully. The image may been copied without permission from the rightful owner.
Finally, if the image has no license at all, assume you don’t have permission to use it. Always better safe than sorry I say.
Stern warnings over. But before you log in to your WordPress back-end to begin uploading, you have an opportunity to get better performance and SEO from your website by reading my tutorial about optimising images for the web first.
How to upload images to WordPress
With the groundwork in place, now’s the time to actually upload your images:
- Go to ‘Media’ -> ‘Add new’
- Drag and drop your files from your computer, or click ‘Select files‘ to select them
- Your images will upload, and WordPress will automatically generate several different sizes, depending upon the options that are set
- But you’re not quite finished yet! Click on ‘Edit’ beside the image you’ve uploaded. You’ll be taken to the ‘Edit Media‘ page
Editing media: adding image titles and alternative text
On the edit media page there are four fields that can be edited:
- Image title
- Image caption
- Alternative Text
- Image description
Alternative text
If you only do one thing, it’s essential that you add a meaningful description of the image in the ‘Alternative Text’ field. Alternative text is used by screen readers, which are non-visual browsers used by blind people to surf the web.
If you don’t add alternative text to every image on your site then you’re creating usability problems for some visitors. There is one exception to this rule, but generally only web designers need to know about this.
Website owners in the UK has a legal duty under the Disability Discrimination Act. The act requires them to ensure that they’ve taken reasonable steps to make their website accessible to disabled user groups. From a legal and moral perspective you must add an alternative text description to every image you upload, unless it is only used for decorative purposes.
Also, don’t forget that search engines can’t understand images on their own. They rely upon the context you provide through adding alternative text, captions, and meaningful filenames. And they’ll reward your efforts with better search performance.
Image title
The rest of the fields here are optional. If you use a plugin such as responsive lightbox you’ll notice that it uses the image title in the lightbox that pops up when you click an image. That for me is a very good reason to edit the image title to make it human-friendly.
WordPress will try to extract a title from the image filename (another good reason to rename image files before you upload them). You’ll probably still want to remove hyphens and the like from the titles it generates.
Image caption
Captions are used to add text that is to be displayed beneath the image. You might find captions useful when you’re creating galleries or step-by-step instructions.
Image description
I don’t tend to bother with the image description at all. In a normal theme this will only be displayed on the image attachment page that WordPress generates when you upload the picture. For the SEO purposes previously discussed, my sites don’t make much use of these pages.
But that’s not to say you shouldn’t use it. For example, you might want to create a collection of image pages with detailed descriptions. However, I would typically consider using a standard post to achieve the same thing, but with greater flexibility and control.
Configure image upload dimensions
WordPress will automatically create three different sizes for the images you upload. Many themes and some plugins create even more, depending on their configurations. You can see what dimensions have been set for these sizes by clicking on ‘Settings‘ -> ‘Media‘:
On our website, we’ve set the max-width for large images to 1170 pixels. This is because it is the maximum possible size for our custom-built content area. By default, WordPress sets this to 1024 pixels. Generally, there’s no point uploading images any bigger than this. That is unless for example, you’re uploading a background image which is designed to sit behind your content area.
One size fits all
Normally, the medium image size that WordPress creates is suitable for embedding within a page or blog post. This image size works well when aligned to either the left or right with text flowing down one side. Depending upon the original size of the image you upload, the large image size is usually better suited to images that you want to take up the whole width of your page or post content area.
By design, ‘medium’ and ‘large’ sizes are set with ‘maximum widths’. WordPress will ensure that neither dimension exceeds the value that’s been set, but it won’t try to stretch an image to fit. This means that rescaled images will retain their aspect ratios. In other words, landscape images will still be wider than they are tall, rather than becoming square.
I wouldn’t normally advise tinkering with these settings unless you know what you’re doing, and why. If you do change these numbers, WordPress won’t automatically regenerate all the images you’ve previously uploaded. These settings will only take effect for images uploaded from this point onwards.
But never fear! The Regenerate Thumbnails plugin will recreate all of the images in your media library using the new dimensions you specified.
Conclusion
There are quite a few things to consider when uploading images to WordPress. But adding pictures to your posts and pages in the proper way will bring benefits to your website. These benefits include enhanced click-through rates, better search engine prominence, and an all-round prettier appearance.
Is there anything else you’d like to see added to this post? Let us know in the comments below. Or are you struggling to get your WordPress website set up right? If so, get in touch with us, and we’ll have a chat over a slice of cake.
