Adding Images to a WordPress Website
This article will show you how to manage images on your WordPress website. Please note this article refers to using WordPress with your own domain name and not to using WordPress for blogging at WordPress.com.
In this article we will look at:
- Image sizing
- Image alignment
- Captions, title and ALT text
There is a short video below showing you how to upload images to WordPress - full written instructions, including details of resizing images, can be found below.
Adding images to your WordPress site
Before you start to upload any images it’s a good idea to consider how you want the images to be used and what function you want them to perform. It’s also a good idea to decide on how you want the images to be aligned before you start.
If you simply want to add an image to a page or blog post to enhance the text you might opt for an image that is about 350px wide and position it to one side of the text – either with the image on the left and text on the right or vice versa.
If you want the image to have more impact on the page then you might decide to insert an image which covers the full width of the page area. With this option it’s a good idea to find out from your website developer how wide the content area is so you can resize your image accordingly.
A note about image sizes
If you want to add an image to your WordPress website which you have downloaded from a stock photo website it will most likely be quite a large image. Similarly if you want to add a photo you have taken yourself it could well be more than 2000px wide and over 2Mb in size. Using images of this size is going to eat up bandwidth and slow down the website – not only will it take longer for you to upload the image but it will also take longer for the page to load when someone tries to view that page. So trimming your images down before uploading is good practice. As a general rule try to keep images to a maximum of 60Kb – 100Kb in size.
How to resize your images
If you are using Photoshop you can resize your images by following these simple steps:
- Open your image in Photoshop
- Go to Image in the top menu and then click Image Size (alternatively you can use the keyboard shortcut of Alt+Ctrl+I)
- In the dialog box that comes up, if you see a box for Constrain Proportions make sure this is ticked. With this box ticked, when you change the width value the height will automatically be adjusted so the image is still in proportion (and if you change the height value the width value will automatically be adjusted).
- If you want your image to be 350px wide then simply enter 350 into the box for the width value and make sure the unit of measurement is set to pixels. If you are not sure how big you want your image to be you can save it slightly larger because you can always reduce the width at which it is displayed within WordPress later on.
- Once you have entered the size for the image click OK.
Saving your image
The next step is to save the image so it can be uploaded to your website. To do this in Photoshop:
- Go to File in the top menu and then click Save for Web (or use the keyboard shortcut of Alt+Shift+Ctrl+S).
- This will bring up a dialog box where you can choose the image file format (JPEG, GIF or PNG). If you don’t know which to use I suggest you select JPEG and select the quality setting of Very High.
- Then click Save and you will be prompted to select the folder in which to save the image.
On some versions of Photoshop (I say ‘some versions’ because this exists on the CS6 version I am using but I don’t know if it exists on all previous versions) you can resize the image and save it all from the same dialog box. To do this you simply bypass the steps for resizing, go straight to saving the image for web and you will find resizing options in that dialog box near to the bottom right corner.
Resizing images if you don’t have Photoshop
The full-blown version of Photoshop can be quite expensive but there are scaled-down versions such as Photoshop Elements which are much cheaper and which are suitable for most photo editing tasks. There is also a free alternative to Photoshop called GIMP (www.gimp.org). If you are using GIMP you can resize an image by following these steps:
- Go to Image in the top menu and clicking Scale Image. This will bring up a dialog box similar to the one in Photoshop where you can enter the size you would like the image to be scaled to.
- You can then save the image by going to File in the top menu and then clicking Export as... - this will bring up a box where you can select the file format (e.g. JPEG). When you click the Export button it will bring up a separate dialog box where you can select the image quality before saving.
Adding an image to your WordPress page or post
The procedure for adding an image to a WordPress blog post is the same as adding an image to a WordPress page so in these examples I will be using a page.
I have written instructions below to accompany the video near the top of the page which will walk you through the whole process.
Having created your page, to add an image to it follow these simple steps:
In Visual view decide where you want your image to be and click into that space to place the cursor there.
Click the Add Media button which will open the Insert Media dialog box. From here you can decide whether to insert an image onto your WordPress page from your website’s media library or whether to upload one from your computer. In this first example we will upload one from our computer so the next thing to do is click the Upload Files tab at the top of the dialog box.
We then click the Select Files button which will open File Explorer on our computer so we can select the image we wish to upload.
Browse for the image you want to upload, select it and click Open (if you have your computer set to open programs and files with a single-click instead of a double-click, then all you need to do is click the image and the upload will begin automatically).
Once the image has uploaded it will appear selected in the Media Library.
With the image selected you can now enter details for the title, Alt text, caption and description.
The title is predominantly used to help search engines identify what an image is of, the Alt text is predominantly used by visually impaired people or people who have images turned off in their browser by helping them to understand what the image represents. Generally speaking the description can be left blank but if you want to fill something in by all means do. The description will not be visible on the web page itself but will show up in the source code so it can be useful if someone is searching for a specific image online. The caption will show up as text below the image. Titles and Alt text should be kept quite short, preferably less than 70 characters whereas the description and caption can be as long as you want them to be but don’t go overboard on the description as it could look like spam.
Having filled in the boxes above you can now decide how you want the image to be aligned by selecting Left, Right, Center or None from the Alignment drop down box. In this example we will select Left alignment.
Next you can choose if you want the image to link to something – either a larger version of the same image or another page. In this example we don’t want the image to be clickable so we will select None from the Link To box.
Finally we get to select the image size. The options are usually Thumbnail, Medium or Full Size. In this example we will choose Full Size as we have already resized the image to the required size.
Finally we click the Insert onto page button to add the image to the page.
Assuming we have already added a bit of text to our page it might look something like this in the admin area:
and if we click the Preview button we can see how it will look on the website, maybe something like this:
If we are not happy with the way the image looks we can click on it in the admin area. The image will then turn blue and we will see two icons on top of it: we can click the one on the left to edit this image or click the one on the right to delete it. If we click the left hand icon to edit the image it will bring up a new dialog box where we can change the title, Alt text, caption, the link URL and alignment. We can also change the image size so if we want it to be a bit smaller we can either enter the new size manually or select, for example, 80% from the slider at the top. Bear in mind you can only make the image bigger if you didn’t insert it at full size to begin with.
Once we have made changes we can click Update and the refresh the Preview page to see the changes.
Inserting an image from the Media Library
Every time you upload an image in WordPress it goes into your Media Library. If you have already uploaded an image to the Media Library you can add it to your WordPress posts or pages without having to upload it again. To do this you follow the same procedure as above, but instead of going to the Upload Files tab you choose the Media Library tab and select the image from there. The rest of the process is the same.
I hope you have found this article to be useful in adding and editing images in WordPress. If you have any questions please use the comments area below and I'll do my best to answer them.