Resizing Images for the web

Posted on 10/02/2010 by Viv

Digital images are great.  You can send them off to friends, display them on photo-sharing sites like Flickr and even have them sitting on the server controlling your own website.  However, there is a catch.  You are limited to a certain amount of disk space on that server.  The more space your files take up on that server, generally the more it will cost you.

Image formats

There are a large number of image formats that can be used on the web.  Some of the most common are:

  • JPEG - common for photographs
  • GIF - limited colour range.  Useful for icons, small animation effects. Transparency available.
  • PNG - generally larger file size but sharper for photos.  Transparency available with newer browsers.

Most of the time, JPEG files are what we work with for photographs.  They have the .jpg pr .jpeg extension on the filename.

Image sizes

With the newer digital cameras, the sizes of the image files can be huge, often many megabytes in size.  Compare this with most individual images on a web page - they may be only 50 - 100 kilobytes in size (1000 kilobytes is equal to 1 megabyte).  Also, those original camera images may be 2 - 4000 pixels in width.  Most screens for viewing images on the web can only display around 1600 pixels at their maximum width.

Image resizing

If you are going to display images on your website, using the original large filesizes is not appropriate.

The best way to resize images for you Silverstripe website is to use a two-step process:

1. Use a batch resizer to resize all the images you wish to use to something smaller.

2. Upload these your Silverstripe server using the 'Files and Images' section.

3. Put these images into your web pages with the Silverstripe content manager.

Image resizing software

A simple to use bit of software is PIXresizer.  Its a freely downloadable program that allows you to resize a whole folder of images and place the resized images in another folder of your choice.  It does not affect the original images in any way.  Check out the quick video tutorial below (sound required):

.