image resizing for websites

Chris Nagy

Posted by: Chris Nagy

Sep 15, 2010

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

3 Reasons Why You Need a New Website Design in 2019
Website design / Apr 07, 2019
No matter the size of your business, the sector you operate in or how much you turn over annually, your website is the window to your world and should reflect the best and mos...
Read more about this story >
Image copyright
Website design / Sep 15, 2010
The development of the internet has influenced a huge amount of our daily lives but the speed at which it has grown has brought with it a number of growing pains. Legislation ...
Read more about this story >
Bounce Rate explained.
Website design / Nov 23, 2011
Bounce rate is something that you will probably come across when looking at analytical data for a website. It basically shows the amount of traffic that left your website afte...
Read more about this story >
Jarrett & Lam
+44 (0) 1293 127 128