Images on your Web Pages 

build a websiteWhen you build a website and start placing images on your pages amidst all your text content, there are several ways in which you can make sure your images look their best. You have a great choice of flexible standard options within your Image Insert / Image Properties window. The settings in “Size”, “Position”, “Border” and “Space Around” can be used in a myriad of combinations to create all sorts of effects and styles for your images and text. Using these settings to their best advantage can all help to ensure that your text and images work together to keep visitors to your website interested and to make sure that your pages are a pleasure to view and read.

Let’s look at the options on your Insert Image / Image Properties window.


In many of our tutorials, we have stressed the importance of resizing and compressing large images prior to uploading them to your website in order to maintain good image quality and to reduce upload times. Click here to view tutorials on image preparation. For every image you place you can also alter their size to best fit the space available by entering a pixel width and / or height in the Image Properties window. When you enter a width, the height will automatically be adjusted to maintain the current dimension ratio of the image. Equally, if you enter a new height, the width will be adjusted automatically. You can, at any time also click the reset button to return the image back to its original size. 


The choices here of left, middle and right allow you to place your image in various positions in and around text on your page. “Left” will set your image to the left and move your text to the right, “Right” will set your image to the right of the page with your text on the left. “Middle” will set your image in a central position. When using a middle alignment setting, it is recommended to set the image in a <p> / line of its own as if the image is set in a paragraph with text, the lines of your text will be appear widely spread out vertically and will look strange. Middle alignment is also the best option to choose when placing images within table cells as this will line up your image(s) nicely but we’ll look at this in more detail in our next tutorial. 


build a websitebuild a websiteIf your image features a white background or a background colour, which matches the background colour of your website pages then don’t set it in a border. Your image will appear as though part of the page, which can create a very nice, clean look for your page. If your image has a different coloured background, a border can help it to stand out when surrounded by text and can help to balance the page very nicely. You have a few to choose from including: - thin (our favourite – very clean look), medium, thick, super thick, extra thick and ridiculous. 

Space Around 

build a websiteThis option allows you to set varying amounts of space around your image so increasing or decreasing the gap between it and either text or other images on the page. This option can be really useful to balance and design your overall page as this space can affect both surrounding text and images - for instance:
1) You might have a centred paragraph of text with an image on the left or right but find that one or two lines of your paragraph don’t line up properly with the rest. This is because the text is running around (under or over) the image. By increasing the Space above / below your image, you can re-arrange the text to line up properly.
2) If you have a few images you’d like to place in a horizontal line across your page (this can break up a page of text really nicely!) you can set the space between each to line them up properly. TIP: If you’re setting a line of images on a page, set all their heights the same (in the size option) to create a clean lined look. 

build a website

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
This blog is running version
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','','ga'); ga('create', 'UA-2227312-2', 'auto'); ga('send', 'pageview');