Image formats and your website
As a standard practice, save your photographic images as JPEG and save your graphical images (using 256 colours or less) as GIFs. Save your images as PNGs only if you are confident that your users are using newer browsers.
Experiment with the various web image formats. Try saving an image in different formats, sizes, etc. just to see the differences between them.
Image size
Keeping the file sizes of your web images small is an important part of web design. The best way to reduce a images filesize is to reduce it's actual dimensions (in pixels), optionally you can also set compression to reduce it even further.
Always bear in mind that a photo you take straight from your camera can easily be 7mb in size – this is huge and always needs resizing first on your home computer before using it on your website.
- Copy the original photo and work on the copy never the original
- Open the photo in your choice of photo editing software and find the resize option – there will be one as this is the most common photo editing task
- Resize the image to a size more appropriate but make sure both the horizontal and vertical proportions are reduced accordingly. Most photo editing software allows to specify one dimension and then calculates the other automatically. E.g. try a width (horizontal) dimension of 200 pixels.
- Save the resized photo probably as a JPEG (see below) you can also set some compression at this point which does not effect the size of the photo but the amount of fine detail it contains. Saving with compression can reduce the filesize considerably.
- You now have an photo physically smaller and without the original level of details (if you saved with compression) – just compare it's file size to the original for a shock!
Serious Sites can provide a great little utility that performs all the above actions automatically, please contact us
GIF
GIF (Graphics Interchange Format) is a lossless format, which means that no image quality is lost when the image is compressed. GIF is best for graphics that use 256 colours or less and are cartoon-like.
Trying to save photographs in GIF will generally result in a poor image with a high grain. Images with large areas of solid colour are best suited to the GIF format.
GIF also allow single colour transparency, this means you can specify a colour within the image as being transparent, wherever this colour then appears anything below is seen instead.
JPEG
JPEG (Joint Photographic Experts Group) is an alternative to GIF developed specifically for photographic images. JPEG supports millions of colours (24-bit). JPEG is a lossy format, which means that some image data is lost when the image is compressed, reducing the quality of the image.
The JPEG format is best for scanned photographs or images that require more than 256 colours. No transparency.
PNG
PNG (Portable Network Graphics) is the most versatile of the current web graphic formats. PNG characteristics such as 32-bit colour and transparency make it a great choice.
PNG compression is a lossless format and can compress more than a GIF or JPEG resulting in smaller file size. The PNG format is best suited for creating high-colour graphics or better compressed low-colour graphics. Transparency is supported and is the best format to use if this is required.
For further information about Serious Sites services please contact us, or, why not take a look at some customer testimonials or examples of our work.
