Pretty as a Picture!

build a websiteIn our previous blog, we looked at Image Preparation as part of the website build process. So now you've got a selection of web ready images.... lets look at how best to use them on the page!

Open the editor on the page you'd like to work on. The first thing is to decide roughly where you want the picture to sit. Have a look at the whole page including your header, text and any existing images and look for a position, which will help to balance out the page. You don't want all your images bunched together at the top, bottom, or just one side of the page. A page with balanced images helps to break up the text and provides a more pleasant reading experience for visitors and let's face it, we want them to enjoy reading your page for as long as possible, so lets make it easy for them.

build a websiteIt is a proven fact that the eye is naturally drawn to the right on viewing a new page, so if you have an image which is particularly informative, i.e. a product shot, then place it near the top on the right. Make sure it's a good one though! First impressions last remember and you would be surprised how some people can judge the quality of your products by the quality of its picture!

Ok, so lets place the first image. Move your cursor to the best position and left click to place it. A good tip here is to place your cursor at the start of a paragraph closest to the position you have chosen. Now click the RED "Insert Image" button.

Here you can either "Browse" and upload images from your own computer or "View Library". There are two libraries; "Your Library", which will store every single image you upload, and "Our Library" where you can help yourself to 1000's of copyright-free images. To browse the Reason8 library, simply type a keyword into the search bar and click "Search Now". Choose the one you fancy and it will appear in the Image Properties window, ready for you to edit and place.  

Once you have selected your image, it appears in the "Image Properties" window. Here you can fine-tune the size, position, border and margins.

build a website


As a quick guideline, a small thumbnail image will be around 150 pixels wide (the height will automatically change to maintain the ratio). A medium sized image is around 250 px wide and large - 350 px wide. Your editor automatically resizes and compresses images to a maximum of 400 px wide so this would be the maximum.


build a websiteLeft, Middle or Right. If you choose align "Left", any text on your page will wrap itself around the right side of your image. "Middle" will place your image in the centre of the page causing the text to sit above or below, and of course "Right" will cause the text to wrap itself around the left side of your image.Alignment can also affect the position of other images on the page. If you want to place a row of images next to each other, "Middle" align them all. build a websiteThe width of your web page will of course determine how many you can place and generally they would need to be thumbnail size or certainly no bigger than 200 px wide.


Borders can work well to frame and support images. You can choose from; Thin, Medium, Thick, Super Thick, Extra Thick or even Ridiculous. Play around and see which one you prefer. However, if you have an image with no background or the same colour background as your web page, select "None". The image will then merge into the background of your web page, which can look very clean and smooth.


build a websiteAgain you have some fun choices here: None, Narrow, Medium, Wide, Extra Wide, You Sure? and Crazy!!!. This setting determines the space between your image and the text or other images on the page. Without space around your image, the page can look very squashed and cluttered but you also want to allow enough room for your text. This setting can also be useful when you want to place images next to each other but want some space between them to help balance the page.

Once you have chosen your four settings, the results of which are shown in the preview window, click "Add to Website". How does it look? If its perfect, well done! If you're not sure, simply go back and tweak it by right clicking the image and choosing "Image Properties" from the drop down menu. You can do this as many times as you like. It’s just one of the flexibilities that the Reason8 Web Builder offers to make your life easier.

build a websiteWe'd love these blog pages to become a handy forum for all Reason8 Web Builders, so please add your comments or questions and let's get chatting!!

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');