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:
When you open the image in Preview, you can edit the size using the following menu item.
When you click on the Adjust Size feature, you’ll get a popup that looks like this.
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.
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.
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.
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.
You’ll get the same screen as shown earlier in this ‘how to add an image to your WordPress post or page’.
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.
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.
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.
The red stop symbol will remove the image. Click on the mountain icon to make further changes.
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.