This article will cover how to change the alignment of the image, resizing, spacing around the image, Moving the Image, and Image Borders. If you need help adding an image to you Blog or Webpage check out this article instead "How to add Images to Blogs and Webpages."
Here is an example of an image that has no formatting applied to it:
Notice the image is quite large and doesn't work well with the text around it. The next few steps will show you how to make adjustments to both the size of the image and then text surrounding it.
First step is to go into the image properties by Right Clicking on the image and selecting 'Properties'
After you've clicked on the Image Properties, you'll get a window which you can control various things about the image.
First thing is resizing the image.
At the top of the properties window you'll see the Width and Height of the image you've selected.
Before making changes to Height or Width make sure you connect the link between them, that way the image will not get distorted when changing one of the values. Notice in the image below that the 'link' is 'disconnected'.
After the chain is linked (by clicking on it), go ahead and change the width to something that will fit better.
For this example the image will be set at 300 Pixels wide, and the height will automatically scale.
Notice the image is now smaller and doesn't take up so much space. This can be helpful not only visually but also may increase page load time - which help your on page optimization (SEO).
Next step is to change how the text behaves around the image itself.
Back to top
In the image properties we can select 'Image Alignment' and that will show a drop down menu.
Align left will be used. Experiment with the different alignments to see what works best for the feel of the page in general.
After selecting the left alignment, click 'ok' to update the article.
Looking better - but there is still one more item to address.
The spacing between the image and text needs to be adjusted. In other words we will want to add a spacer round the image so that the text does not directly 'butt up' against the image.
Back in the properties window.
Back to top
Close to the bottom of the window there is a field called 'Margin'
The text is only resting on the image on the right side, so lets add some space there.
The number represents how many pixels to be added. You can experiment to see what works best for your layout. We typically recommend between 5 -10 pixels depending on the size of the text.
Notice the difference after adding some spacing.
The image is now set - The image is now smaller, the text flows around the image, and spacing is set between image and text.
Back to top
What if you decide you want to move the image within the article?
Simple - you can simply click and drag the image to a different spot!
It doesn't matter where you click on the image to drag it, it will be set where your mouse cursor is.
Back to top
One last thing that you can do with the image from the Image Properties window.
With this option you can make a border that will show up around the image only.
Border Width is also measured in pixels.
Border color has a few preset color options you can use.
If the color you want is not there, you can click on 'Add Custom Color' and it will have a pop up to ask you for a color value.
If you want to search for a color to use, you can find any just about any color here: http://www.color-hex.com/
At the top of that website is a color box next to the search box you can use the drop down tool to get close to the color you like, then click "Choose" then you can go to the "Get Info" button next to the color.
Once you find the color you want, all you need is the #f09494 ( As an example ) color code to add to your custom color choice.
Now you can add images to any page you want and set it up however you want!