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

Using Google Street View to take people inside your business
Website design / Aug 15, 2012
Google recently started to expand its Street View service to start enabling businesses to take their website visitors inside buildings. This started off with famous landmarks ...
Read more about this story >
EU cookie legislation and the effects of implementation
Website design / Oct 03, 2011
Earlier in the year new legislation came into effect requiring website owners to ensure that their website get explicit permission from each user before using cookies to store...
Read more about this story >
Government Digital Services give their take on EU Cookie Law
Website design / Mar 20, 2012
The Government Digital Services team recently hosted a meeting of government website managers, developers, policy advisers and communications experts to discuss a range of iss...
Read more about this story >

Contact

Jarrett & Lam
Robert Denholm House
Bletchingley Rd
Redhill
RH1 4HW

+44 (0)1293 127 128

How can we help?

Jarrett & Lam
+44 (0) 1293 127 128