How to add images to your WordPress post or webpage

Step one – Select your images and crop size

Select the images that you want to use in your blog or on your pages in your WordPress website. If they are large images, I tend to crop them first using the program, Preview, which comes with every Macintosh computer. Other photocropping programs are available online including:

Shrink Pictures website

Photosize website for resizing images

When you open the image in Preview, you can edit the size using the following menu item.

Adjust size of image in Preview

Adjust size of image in Preview

When you click on the Adjust Size feature, you’ll get a popup that looks like this.

Preview's image dimensions popup for changing the size of an image

Preview's image dimensions popup for changing the size of an image

I change the width to 500 pixels and resolution to 72. The height then adjusts automatically but the width will be the same on all images. Once you upload your images into WordPress, you can make further adjustments.

You need to save the resized image and it is best to rename the image in web-standard naming system. I still use the underscore between each word for file names of images and save as jpegs.

It's important to name the image properly when you save the newly sized image

It's important to name the image properly when you save the newly sized image

Make sure the name means something and says what the image is. In the example above I have called the image: Revelstoke_street_in_winter_January_2012. This gives the image a location and the date the image was taken.

Once you have completed Step 2 – Upload images to WordPress, you’ll need to do some further naming which is also essential.

Step 2 – Upload your images to WordPress

You can add one or multiple images at the same time and there are different ways to do this. Easy way is to go to Media on the WordPress dashboard and click on ‘Add New’. You’ll then get a screen that looks like this.

Add media files to media library or via post or page upload directly from your computer

Add media files to media library or via post or page upload directly from your computer

Choose ‘From Computer’ and then ‘Select Files’. If you have multiple images (all resized to 500 pixels width), then highlight all and hit ‘Enter’ or ‘Return’ on your keyboard and each file will upload to your Media Library.

Step 3 – Add alternative text, caption and description

The next step is to make sure that your images are named properly to meet Internet W3C standards. This is important for your relationship with search engines including the all-important, Google, who are your friends if you do things properly when it comes to search engine optimization (SEO).

The Alternative Text is very important as this is the text that appears when a person scrolls over the image and is read to people with sight problems. Google considers this text as very important.

Make sure you add alternative text, caption if you want one and description

Make sure you add alternative text, caption if you want one and description

If you don’t want a caption but you want the border to appear on the image, in Caption, add two spaces with your space bar.

Notice that I also add a copyright message in description. This is my image, so it is copyright to me. If I have purchased the image from a Photolibrary, I acknowledge the photolibrary and if image is from a friend or colleague, I do the same by acknowledging the person: Image used with permission of [name of person].

I’ve also decided that I want the image to be right aligned and medium size for when I add to post.

Note: you can upload images directly into a post (and they are auto saved to your Media Library and on the Gallery for the page). If you have uploaded from the post or the page, you can ‘Insert into Post’ now.

Step 4 – Insert your image into the post or onto your webpage

The last step is to add the image into the post or page on your WordPress website. On the menu bar for the WYSIWYG, you will find an upload/insert icon. These vary in appearance depending on the WP version you are using.

Insert icon for adding media to your WordPress post or page

Insert icon for adding media to your WordPress post or page

You’ll get the same screen as shown earlier in this ‘how to add an image to your WordPress post or page’.

Add media files to media library or via post or page upload directly from your computer

Add media files to media library or via post or page upload directly from your computer

Select Media Library and then select the image you want to upload. Make sure that you have all the fields completed and that you have selected an orientation and size.

Adding alternative text, caption and description

Adding alternative text, caption and description

Don’t forget to update the page or post. Then you can ‘View page’ to see how the image looks on the page.

Here’s the result of two images uploaded for Ski The World website – it’s a website that we manage at Bold Type.

Images in a news article posted on Ski The World – a website we manage at Bold Type

Images in a news article posted on Ski The World – a website we manage at Bold Type

Step 5 – Adjust the image after uploading to the post or page

You can see your image/s in the post or on your webpage but the image is too big, not aligned how you want or has the wrong caption. Or you might have uploaded the wrong image and want to change it.

Click on the image to get these editing functions.

Click on image to get the mountain icon for editing and the red stop for removing the image

Click on image to get the mountain icon for editing and the red stop for removing the image

The red stop symbol will remove the image. Click on the mountain icon to make further changes.

Make further changes after you have posted the image

Make further changes after you have posted the image

Update once you’ve made the changes you want either resizing, alignment, edit image title or caption.

BTW, notice you can link this image to a different URL. The default is to a larger size of the image but you may wish to direct the person to another page on your website or, if you have an image of a Google Map, to the Google Map webpage of the image. You can do this by simply changing the URL (web name) in that field.

If you want any further advice on uploading images to your WordPress website, contact Bold Type by email. If you are in Australia, please call on 0410 037 635.

Read more about adding content to your website to get your website working for you 24/7.