image resizing for websites

Chris Nagy

Posted by: Chris Nagy

Categories: Website design
image resizing for websites

One of the areas that trips most people up when it comes to running a website are the images and pictures. Modern digital cameras can take pictures in a huge level of detail. When printing images out you really need all this detail but for displaying an image on a website much of it is wasted.

Ideally the pages of a website should be as small as possible. Even with today's high internet speeds it is still quite common to find website where the images have to be loaded in stages because they are just too big.

Approximately 50% of users have screens that are between 1000 and 1500 pixels wide. Most modern digital cameras can take pictures that are over 4000 pixels wide, this means you would need to have a monitor that is 4 times as wide to display the image at its full size.

The example picture below (from a Jarrett & Lam camping trip) was taken from a fairly standard digital camera but has been resized for use on the web:

 

The next image is a section of the full sized image so you can get an idea of how much larger the image was before being reduced. It has been cut down to the same height and width of the picture above (see if you can see which section it is):

 

To reduce the image for use on the web the first thing to do is reduce size of the image in pixels. This web page for example is designed to be 1024 pixels wide. The section that contains the page content is about 700 pixels wide so in this case we don't really need any images larger than 500 pixels wide. The images above are both 300 pixels wide by 225 high.

In many cases this will usually get images down to a good enough level. If further reduction is required the next thing to do is reduce the resolution of the image. Most image editing software will have a quality option where you can select low, medium or high.

You may find that you image editing software will have a specific "save for web" option and some cameras have settings you can use to take the image at a suitable size and detail level.

 


Chris Nagy

About: Chris Nagy

Experienced in agile project management and software implementation, Chris is a Key Account Manager with a sharp eye for detail and a clear focus on ensuring customer targets are met in full.


Related posts

The advantages of having multiple domain names
As any of you who have tried to type our domain name directly into a web browser will have noticed we at Jarrett & Lam may not have picked the best domain name in the worl...
Read more about this story >
Type of links
The whole basis of the World Wide Web was the ability to navigate from one document to another via hypertext links so users could navigate from one thing to another. Since the...
Read more about this story >
Our Client, The Talbot Owners’ Club, wins prestigious award
We were delighted to receive the news that The Talbot Owners' Club have won the ultimate club accolade – The Historic Motoring Award's Club of the Year 2018. The award, ...
Read more about this story >
Jarrett & Lam
+44 (0) 1293 127 128