Internet Business Centre - information for online business

Marketing Materials - Save up to 80%

Changing the size of a website image

What do I mean about changing the size of an image, won’t the webserver do that for me? Well yes it will, but that’s not a good thing.

An image is a fixed size and can be anything from 1Kb to multiple megabytes as produced by high definition digital cameras. Trouble is, whatever size it is on the page, it all has to be downloaded to be viewed. Say for instance you wanted a thumbnail of a picture you had taken which was 5000×4000 pixels. You could use the height and width attributes for the image to make it 100×90 on the webpage, but it would still take a noticable amount of time to appear on the visitors screen. It would also appear to be blocky as the browser will show an approximation of the image and therefore losing detail.

If however you resized the image in a competent graphics program and saved it at the resolution of 100×90 you would get a much crisper image. One important thing to mention is that when you resize an image, increase the number of colours to 16 million if you can, as if you try to resize an image with a colour depth of 256 colours for example, you will risk getting jagged lines in the finished image. It is best to do this even when the image will eventually be 256 colours by first increasing the colour depth, resizing and then decreasing the colour depth again.

It is also best to keep the same aspect ratio when resizing as you will distort the picture if you don’t. If you need to size an image to fit with something already on the webpage and the aspect ratio won’t fit, then resize it with the correct aspect ratio until either the height or width matches what you need, and the other dimension is larger then you want. Finally crop the image to fit by removing the excess from the image.

Paul Wood

Website design and maintenance

Ka-Ching Rating

What do the ratings mean

Comments are closed.