Image Tips

Sizing Your Image for Display

OK, modern digital cameras can produce stunning high resolution images, but most computer monitors are unable to show these images in their full glory. Displaying an image that is wider than the display results in an annoying horizontal scroll bar. Exceeding the vertical size of the monitor is slightly less annoying to the reader but can still detract from the overall look of your image. It is difficult to appreciate the full glory of an image when you can only see part of it.

Remember also that web images display in a browser window which may use several tens of pixels to display a frame and maybe a scroll bar or two. Also remember that doubling the resolution means four times as many pixels and often four times the file size and four times the download time. Even on broadband, file size is a serious consideration.

Not everyone has a brand new high definition computer system. Typical monitor widths on reasonably modern computers are:
Standard Desktops - 1024 x 768 or 1280 x 1024 pixels
Widescreen Desktops - 1366 x 768 (under 20") or 1600 x 900 pixels (over 20")
Standard Laptops - 1024 x 768 pixels
Widescreen Laptops - 1366 x 768 pixels
Small "Netbooks" - 800 pixels wide

There are really only 2 options for restricting your image size:

You can reduce the resolution of the image. Most image processing software has this function. Note: reducing the resolution can actually make your image look crisper.

Crop the image to show the important subject of the image. Close cropping works well for many news pictures or for adding impact to art images but most astronomical images look better with at least a bit of background showing around the main subject.

The LAS website is currently designed to just fit within the width of a 1024 pixel wide screen. Because of the floating window the maximum impact is achieved on the now popular 1280 pixel wide screens. To achieve this the main pages are just 975 pixels wide. More than 40 pixels are "wasted" by the browsers. To avoid the problems with images overflowing the available screen space, while allowing large pictures to be enjoyed on large screens, the image viewing system on the main LAS website measures the available screen space and squeezes the images down to fit. To do this it has to estimate the amount of space wasted by the browser (some browsers are more wasteful than others). Viewers are provided with the facility to zoom back in if they so wish. Actual image files are not changed so large images will still take longer to load

Mobile screens tend to much smaller. Anything from 160 pixels wide (on older or entry level mobiles) up to 800 pixels wide on some modern rather chunky mobiles. The LAS mobile website actually reduces the size of the image before sending it to the browser. This reduces the amount of data sent over comparatively slow mobile networks. Mobile browsers rarely provide all the facilities expected on mainstream browsers and screen size measurements cannot be relied upon, so a screen width of 320 pixels is assumed.

Which file format should I use?

There are several file formats in use for imaging. Here are some notes on the more popular ones.

Bitmap (.BMP) - Strictly speaking any image format which stores the image as a series of pixels is a bitmap. In the world of PCs, bitmap usually refers to a format with the suffix .bmp. In general these files provide a good way of storing images where disc space is not at a premium. The files do tend to be very large and are not really suitable for web pages except where images are very small. The file upload facility for our website does not handle .bmp files.

Tagged Image File Format (.TIFF or .TIF) - Technically TIFF files can be in a variety of formats. The format is widely used by the software associated with scanners. Although there are compressed versions of TIFF available, some have only become generally available in the last few years and they are not commonly supported. Also some of these compressed variants have suffered from patent restrictions until very recently. Hence TIFF files tend to be very large, especially colour ones. Uncompressed TIFF is very good for intermediate storage of images which are being (or are likely to be) processed further. Support for the compressed versions of TIFF is patchy. TIFF is not a good format for large images designed to be displayed on web pages. Even at broadband speeds they can take a long time to load and, because of the asymmetric nature of the common ADSL broadband connection, very very slow to upload. The file upload facility does not handle TIFF files.

JPEG (.jpg) - The JPEG format has been around for some time. Many digital cameras produce JPEG format images. JPEG compresses images well. Quality factors around 8, 9 or 10 produce good looking results and reasonable file sizes. Lower quality factors can produce disappointing results. Information is lost each time the image is saved and re-loaded so JPEG is not good for storing intermediate results of image manipulations. The compression algorithms can produce artefacts (ghost images) which can be especially noticeable on plain backgrounds (e.g. a dark sky). If you have a large image then consider using the JPEG format for the final display copy of the image. Select a quality factor towards the top end of the range, around 9 usually works well. JPEG images are supported by the file upload facility.

GIF (.gif) - GIF images are compressed by limiting the image to a restricted pallete of colours. Although this pallet can be chosen from a very wide range of colours only a restricted number can be used on any one image. This works well for diagrams which have a limited number of colours, but is not so good for real pictures, especially those with large areas of gently changing tone or colour. These gentle changes of colour or tone can often appear as a series of contours or colour steps. Early NASA spacecraft images often show this problem quite badly. The contouring problem can be slightly alleviated by the use of "dithering" or adding a small amount of noise to the picture. The GIF format offers an option for making some pixels transparent; this is often used where small icons need to be placed on a coloured background. Some images can look quite good in GIF format but in general it is not a good format for showing real pictures. GIF images are supported by the file upload facility.

Note: There is also a version of GIF that can store small movies or animated images. These are beyond the scope of this little advice note.

PNG (.png) - The PNG definition has a wide range of options; many software packages do not offer all the options. File sizes can be a bit large but the use of lossless compression makes it ideal for saving intermediate images. Judicious choice of options can make PNG a viable option for images to be displayed on web pages but for larger files it may be better to keep PNG for intermediate storage and save the final result as a JPEG. All the thumbnail images on the gallery page are PNGs. The combination of good real picture quality with the facility for transparent areas makes PNG ideal for this application. PNG images are supported by the file upload facility.

Allan Bell, LAS Webmaster.

Back to Gallery