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

Writing Website Content
Content is a vital part of any website and is often the area that can be improved the most. Here are our top tips for creating or improving your website content.Be Concise...
Read more about this story >
The Complete Guide to Understanding Host and Hosting
If you're navigating the online world, either as a business owner or a consumer, you're likely to encounter the terms "host" and "hosting." Understanding these terms is crucia...
Read more about this story >
Image copyright
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 >
J&L Digital
+44 (0) 1293 127 128