What resolution images should I use on my website?
Creating your own website involves several things and one of the most important is the use of images. Graphics and photos give life to a page where it would otherwise look flat and dull. It also can help in telling the reader what that page is about. Most users scan web pages as opposed to read them. Colourful and relevant images on your website can really help to tell a story in an instant way allowing you to communicate your message to even the quickest reader of web pages.
For beginners though, images are shrouded in mystery. Many professionals will talk to you about the importance of image resolution and if you search the Internet there is a lot of confusing and conflicting advice.
Good news! You do not need to worry about resolution
Now this is a concept you will either understand immediately, or you will have to read this very carefully. In my work as a bespoke web designer I have explained this concept to many people and it is a difficult message to get across. The simple summary of this is:
Screens are measured in pixels. Resolution is determined by the screen that the user has and not by the image you are displaying on your website.
If you understand what I have just said then it is perhaps not worth reading on as you may find the contents patronising. If you didn't follow, don't worry, I will try and explain it. Apologies for the tone of this next bit but I want to try and explain it in a language that everyone will understand.
Let us say that you add an image to your website that is 500 pixels wide. Someone with a 10 inch netbook with a screen resolution 1024 x768, that image will appear to be just under 4 inches wide. If a user has a 23 inch monitor with a screen resolution 1680x1050, the same image will be just under 6 inches wide.
In other words, when you add an image to a website, you have absolutely no control over its dimensions in terms of inches or millimetres. Therefore, you can only decide its dimensions in terms of pixels (dots on the screen).
So what size should my image be?
First of all, if you use AB Publish to create your website, we resize the image for you. We offer you a size determined by percentage of page width (1/4, 1/3, half or full for example) so we take away all the difficult calculations. If you are not using our website creation service, then if you take an average at 500 pixels wide, this would take up about half a screen width on a netbook or about a quarter of a screen width on a high resolution monitor. That should give you an idea.
If you ensure that you do not display an image more than 980 pixels wide, you can be sure it will display clearly on a wide range of screen sizes without the user having to scroll across horizontally which is something that you definitely should avoid.
I hope I have managed to explain that clearly. If you still have doubts as to what size your image should be for your website then please contact us and we will be happy to help.
Thu 16 June 2011 18:14:13