We use cookies on our websites. You are free to manage this via your browser setting at any time. To learn more about how we use the cookies, please see our cookies policy
+44 (0)1293 127 128

image resizing for websites

Author Image Posted by: Chris Nagy
Sep 16, 2010

Category: Website design
Tags:

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.

 

Author Image
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

Contact

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

+44 (0)1293 127 128

How can we help?