If you’re a newcomer to WordPress, you might’ve gotten as far a creating your own post, but then come to realise that pages and posts without images can be rather dull. Images lead the eye, attract clicks and help to illustrate difficult concepts.

It’s always worth giving thought to adding some 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, which in turn can be indexed by Google.

Unless you add lengthy textual descriptions to each photo you upload, these generated pages will be very light on content. So without the correct mitigating SEO adjustments in place you may find search engines frowning upon a large swathe of your site content, which is never a good thing.

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’. 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 clients 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 quite quickly and this in turn brought their website down. If you want to keep an archive of your photos (whether for business or pleasure) in their original format, consider setting up a Flickr account. You’ll get 1TB for free, and that’s a lot of photos.

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.

If you bought the photo from a stock library, fine (but you might want to check the vendor’s Terms of Use to be sure). If you took it yourself, great. If you commissioned a photographer, fab. If you found it on Google (even if it says it’s licensed for commercial use), tread carefully. The image and the license may have gotten mixed up (or may never have been right in the first place).

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 logging 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:

  1. Go to ‘Media’ -> ‘Add new
  2. Drag and drop your files from your computer, or click ‘Select files‘ to select them
  3. Your images will upload, and WordPress will automatically generate several different sizes, depending upon the options that are set
  4. 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:

  1. Image title
  2. Image caption
  3. Alternative Text
  4. Image description

Alternative text

If you only do one thing, it’s absolutely 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 non-structural image on your site then you’re creating a usability problem for some of your visitors.

Website owners in the UK has a legal duty under the Disability Discrimination Act to ensure that they’ve taken reasonable steps to make their website accessible to disabled user groups. From a legal and moral perspective I can’t stress greatly enough the importance of adding a short alternative text description to every image you add to your posts and pages.

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 meaningful title from the image filename (another good reason to rename image files before uploading them), but you’ll probably still want to remove hyphens and the like.

Image caption

Captions are a great way of adding text that is to be displayed beneath the image whenever it’s added into a post or page. You might also find captions useful when you’re creating galleries, or step-by-step instructions using photos.

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, and 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 — 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 (some themes create even more, depending on their configurations). You can see what dimensions have been set for these sizes by clicking on ‘Settings‘ -> ‘Media‘:

WordPress image size (under 'Settings', 'Media')

On our website, we’ve set the max-width for large images to 1170 pixels, because this is the maximum possible size for our custom-built content area. By default, WordPress sets this to 1024 pixels and generally, there’s no point uploading images any bigger than this, unless for example, you’re uploading a background image which is designed to sit behind your content area.

Normally, the medium image size that WordPress creates is suitable for embedding within a page or blog post if you want it to be 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, without text reflowing down either side.

Notice that ‘medium’ and ‘large’ sizes are set with ‘maximum widths’. This means that WordPress will ensure that neither dimension exceeds the value that’s been set, but 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 — the settings will only take effect for images uploaded from this point onwards.

Conclusion

There are quite a few things to consider when uploading images to WordPress. But adding pictures to your posts and pages, and being sure to do it properly will bring benefits to your website, such as 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. And if you’re struggling to get your WordPress website set up right, get in touch with us, and we’ll have a chat over a slice of cake.