Insert an Image Where You Want it to Appear on Your Website

If you find this helpful please click on 'Like' and leave a comment. Thank you.

A friend of mine is a photographer and he started uploading full size photos to his website... and... he uploaded lots of them. The result; they slowed down his website.

This is the advice I gave him to not only improve the speed of loading but to position the images exactly where he wanted them to be.

The more 'weight' on your website the slower it loads. So, what is 'weight'? Megabytes (MB).

The weight on your website includes plugins and images. The more plugins you have active the slower your website loads. But what about images? Uploading a large image and using WordPress to reduce the size adds to the weight.

So the first step is reducing the size of the image before you upload it.

The first part of this training is Windows specific. Sorry to all you Mac users but you probably have an equivalent program you can use so read on.

The windows operating system comes with a built-in program called 'Paint'. If you don't know where to find Paint you have two options:

1. Click Start => All Programs=> Accessories=> Paint. Or
2. Click Start then type 'paint' in the search box.

Now you've found Paint right-click on the link and select: 'Pin to Taskbar' and/or 'Pin to Start Menu' so you can find it again easily. It's such a useful program I don't understand why Microsoft make it so hard to find. If you choose the first instruction above you will discover some lovely little treats like Notepad and Calculator which I keep on my Taskbar and use frequently.

I'm going to use a large image, reduce it to fit on my website and then upload it.

In Paint click on the blue button on the top left-hand side and select 'Open'. Navigate to the image you're going to use and click 'Open'.

Click on the 'Resize' button at the top of Paint and select 'Pixels'. Change the Horizontal to an appropriate size for your theme. My theme has a width of 720px so I choose 360px to make the image half of my post size. Make sure there is a check mark in the 'Maintain aspect ratio' box and Paint will adjust the vertical size for you. Click 'OK'.

Now the image is the correct size you can click on the blue button and select 'Save as'. Please do not click on 'Save' or use Ctrl+s as you will overwrite the original file and you will not be able to use it again. To save in the same folder as the original just change the name of the reduced image.

I save images for my websites in a folder which I have created: WebsiteName=> Images. So navigate to a safe place (where you want to save the reduced image), click on 'Save' then close Paint.

Now you can open your website to the post or page where you are going to insert the image.

Click in the place you want your image to appear then click 'Add Media'. Next click 'Upload Files' then 'Select Files'. Navigate to the image you just saved from Paint and click 'Open'.

You can put in a caption if you wish. The 'Alt Text' is what viewers see if they hover over your image. It's also what Google sees so I usually use my keyword for the first image. Scroll down and select Alignment=Left, Link to=None and Size=Full Size. Then click 'Insert into post'. WordPress returns you to your post and you can see the image on the left with the text on the right. If you haven't saved the post then click on 'Save Draft' otherwise click on 'Update'.

Right-click on 'Preview Post' or 'View Post' and select 'Open in new tab'. Click on the new tab to see how your post will appear to your visitors.

Right Alignment

Leaving the preview tab open, click the Edit Post tab and scroll down to where you can add an image on the right. Click on the left of the new paragraph where you want the second image. Then click 'Add Media'.

You can upload another image or use an image from your Media Library. In the Media Library click on the image you want to insert. Scroll down and change the alignment to 'Right' (if it's different). Make sure that 'Link To' is None. Check the size and change it to suit then click 'Insert into post'.

Back in Edit Post you'll see the new image to the right of the text. Again save the draft or update.

Go back to the tab you have open in preview/view and update. Scroll down and check the placement of your right-aligned image. If you don't like where it is then you can easily remove it by clicking on the Edit Post tab. Now scroll down to the second image and click on it. A little popup window appears so click on the 'X' on the right-hand side.

The other options in the popup window are: align left, align center, align right, align none and the pencil icon takes you back to the edit image page.

Now choose a more appropriate place to insert the image and go through the insertion process again. Save draft or update and return to the preview/view page to check on the new appearance. Remember to refresh your browser.

More Training by Marion Black - Sorted

As always I'm here to help you,

Please share the love, click 'Like This' (if you do). Ask a question, share something or leave a comment.