Getting the Size of Your Images Right
One of the most important things on a website are the images. They can help bring a site to life and as they say; “a picture tells a thousand words“. Good pictures can be a real asset to your site and bad pictures… well you’ve seen bad pictures and they just turn you off the site.
In this post we’re not going to look at what is a good or bad image to use. That is very much down to personal preference. Here we are going to talk about getting a picture to look the way it is meant to by getting the sizing right.
Many people think that the higher the resolution of the picture the better quality the image will be. Very very wrong! In fact an image that has a resolution too high will look very grainy and will not be appealing at all.
Have a look at the two images below:
 |
 |
Which looks better?
The one on the right does. Guess what? The one on the left is the high resolution image. It is 1696×2544 and the one on the right has been re sized using a free re-size tool to 250×375 before it was uploaded.
So not only does the one on the right look better, it takes up less space and as a result it loads faster.
OK, I hear you asking “shouldn’t a higher resolution picture look better?” and that would be a fair question.
The answer comes down to the screen you are looking at the picture on. Most laptop or LCD screens can show 96 pixels every inch. Each of our pictures used here are restricted to display in 250 pixels across. This means for the the image on the left which is 1696 pixels wide, in order to fit into the space allowed, 6 out of every 7 pixels are ignored. This leaves a grainy looking picture.
The image on the right, however, is 250 pixels wide and therefore none of them are lost when it is displayed.
But won’t an image re-sizer just do the same when it shrinks an image?
No it won’t. When it is shrinking an image it looks at all of the colours in the surrounding pixels and adjusts the colour of the pixel it is keeping to keep the clarity of the original picture.
So next time you want to add a picture to your website, get the picture you want and then re-size it to fit where it is going to be put before you add it to the site. Just do a scan for “image resize” in any search engine and you will be bombarded with free tools to do it for you.
