Why size images correctly in Photoshop rather than using HTML markup?

POSTED AT 19:39 on 19th November 2007

This question seems to come up time and time again so I thought I would provide an answer to it. Have you ever been to a website whereby a tiny thumbnail has taken ages to download or possibly an image appears distorted whereby you can tell that the image has been squashed either vertically or horizontally in order to fit into the page structure? These are 2 errors that are quite commonplace on the web yet needn’t be.

Downsizing Graphics 

The first issue ie whereby a tiny thumbnail has taken ages to download is something I usually find when people use content management systems and have the ability to upload images to the server. The problem occurs because they upload the graphic and then use the controls in which to manipulate the width and the height of the image. See the 2 graphics below:-

The first image is the picture of a padlock yet was 500px x 333px in size yet has been reduced to 200px x 133px. The other image next to it is exactly the same image yet has been reduced using photoshop, saved and uploaded as an image which is 200px x 133px. When looking at both images you should notice that their is a difference in terms of picture quality. The first image appears to be more distorted which is down to the way the browser handles resizing the image. The other key point is within the difference of file size whereby the first image is 63Kb whilst the second is 13Kb. The reason for this is that although the image has been resized to look smaller the file itself doesn’t lose any file size, therefore this means it will take almost 5 times as long to download the first image than the second. This is an important factor when you consider that if you’re site contains many images within them, then not compressing your images properly could cause the page to take longer to load then it really needs to.

Made to Fit

The other issue I want to look at is whereby an image used appears distorted in terms of size ie like it has been squashed. This kind of issue I’ve seen is mainly within ecommerce or catalogue sites which require images to be uploaded to specific proportions. I’ve also seen it when someone has decided to try and get something to line up nicely so they try to decrease some pixels off the width or height so that it fits. Personally I think that there is nothing worse than seeing an image which has been distorted out of all recognition and basically looks unprofessional. I have created an example showing the above image made to fit to 100px x 100px

If you can imagine the above images used within a site, surely it is better like the second image to crop the image to the correct sizing and lose some of the image as opposed to trying to squeeze everything in there like the first image which gives an incorrect view of proportion, again provides distortion and also there is a difference again in file size.

Basically both of these 2 examples above illustrate the need to size images correctly. Although it takes slightly more time to implement as opposed to quickly changing the code, the benefits of doing so in my opinion is so much better and certainly helps to a more quality image as well as a more professional look to a site and is beneficial in terms of document weight.