One of the most common difficulties that people have is adding images to the articles on their CMS, be it Wordpress, Joomla or whatever. It would be patronising of me to say it's easy. Not for everyone it isn't.

So a few simple rules

Image size

You have got your image from your camera or phone and you want to use it on your website, great. But that image is probably several megabytes and no matter what size it appears on the website page if you use the image as is, it will still be several megabytes and will take some forever to load. Probably delaying the rest of the page loading.

So what to do? Ideally you need to resize the image on your computer before you load it onto your website. So you need an application that you can edit your picture in. 

What size should it be?

We measure the size of a picture on the web in pixels, how many dots across if you like. As a general rule, more pixels the bigger the file size. We don't use inches or centimetres as this gets complicated by the dots per inch or resolution. We don't want to go there trying to work that out.

Image size 250 pixelsThe size of the picture on the page, this one is 250 pixels wide. In some CMS set ups you can drag the image to the size you want. Remember, this won't change the file size, just the displayed size of the image. It is also important to hold the 'shift' key when doing this so the image stays in proportion.

It's fine to resize the image within your CMS but first ensure the original file is no larger than the maximum size your are likely to use it. Avoid displaying the image larger than the file you have loaded. The results can be soft or pixelated, not a good look.

On some systems resizing the image file is done for you. You can positon the image, size it and when the first person views the live page a correctly sized version of the image is created. This is a great time saver but don't rely on that function being there as it requires some extra software on the server hosting your website.

How do I position it on my page?

Assuming you are using what is called a WYSIWYG editor (What You See Is What You Get) this shouldn't be too difficult as the choices are limited. So first click to place the cursor where you wnat the image to appear. Using the relevant tools insert the picture. I can't tell you exactly how to change the settings on your CMS as they vary enormously but I can tell you what you need to set.

You have three basic choices.

The text wraps around to the right.

Picture floats left

Set your image to 'Align' left and set the right margin to a few pixels, this one is set at 10 pixels. You will also need to set the bottom margin much the same.

Ab illo tempore, ab est sed immemorabili

Cum sociis natoque penatibus et magnis dis parturient. Tu quoque, Brute, fili mi, nihil timor populi, nihil! Curabitur blandit tempus ardua ridiculus sed magna. Magna pars studiorum, prodita quaerimus. Quam temere in vitiis, legem sancimus haerentia.

  

The texts wraps around to the left

Float image rightSet your image to 'Align' right and this time set the left margin to a few pixels.

Ab illo tempore, ab est sed immemorabili

Cum sociis natoque penatibus et magnis dis parturient. Tu quoque, Brute, fili mi, nihil timor populi, nihil! Curabitur blandit tempus ardua ridiculus sed magna. Magna pars studiorum, prodita quaerimus. Quam temere in vitiis, legem sancimus haerentia.

 

 

Don't have text wrap around image at all

No wrapThis time you can either leave the align setting alone or, if it has it, align 'Center'. So you might want to set the bottom margin to a few pixels.

On some websites the developer has made this easy by not giving you the choice as the position and other settings have been made for you.

If you want to know more on this we are always happy to help so do please get in touch.

 

Cavespider, helping you get your image right