There are three main image formats used by internet browsers: JPEG, PNG and GIF. In a minute we’ll take a look at them but first let’s take a look at some terminology.
Lossy & Lossless
Lossy and lossless are the types of compression carried out by different formats. They’re pretty easy to remember:
- Lossy = information is discarded
- Lossless = no information is discarded
Easy, right? Here are some more terms:
Bitmap –an easy way to remember what a bitmap is, is that it is a map of bits. Each bit on the map indicates whether it should reflect the background color, foreground color or a different color.
Interlacing – interlacing is a method for encoding bitmap images. First the odd rows are rendered, then the even rows. This allows the image to be viewed sooner.
Progressive – another method for encoding bitmaps. Images are rendered bit by bit but rather than loading sequential lines the image first appears blurry and then becomes clearer as the image loads.
Transparency – the varying degrees of opaqueness across an image, from totally opaque to see-through.
RGB – RGB (Red Green Blue) is an additive color model in which red, green and blue are added together to produce another color. RGB is the standard color model for anything with a screen. Anything that you design for the web should be in RGB – your monitor can only display in RGB. Images for print will be CMYK (Cyan Magenta Yellow Key black) – the individual colors that are mixed by the printer. If you are optimizing images that will be uploaded to your website builder be sure to use RGB!
Image Formats
JPEG/
JPEG (Joint Photographic Experts Group) is one of the most common images format in use. Your digital camera may even save your images as JPEG. It is a lossy image format – this means that information is lost in the compression process. When you save a JPEG you’ll be able to decide how much information you want to keep and how much you are happy to discard. Most of this information will be things that the human eye is unable to detect.
JPEG can render 16 million colors – this means that it is a great format for photographs. You can reduce your photographs down to 72ppi for much faster loading on your web pages.
GIF
GIF (Graphic Interchange Format) is a lossless format – no information is lost. Or, at least, with a GIF no information is lost up to 256 colors. This is because GIF has a color palette of 256 colors which it can choose from when rendering the image. Because of its limited color palette, GIF is much better for graphics rather than photographs. It is also possible to use GIF for animations that do not require any additional plug-ins.
PNG
PNG (Portable Network Graphics) was developed as a patent-free alternative to the GIF format. It is also lossless. Like GIF it selects from a color palette although this is a much bigger palette. It is becoming more and more widely used as an alternative to GIF. It doesn’t, however, support animation so is unlikely to ever replace GIF entirely.
Some things to remember:
- PEG for photographs
- PNG or GIF for graphics
- Always save your images as RGB – CMYK is for print only!
- Images should be saved at a maximum of 72 ppi
If you are working with images in Adobe Photoshop you can use the handy “Save for Web” tool. This will enable you to view four versions of the image optimized for the web. You can decide on the different formats that you want to use, whether you want your images to be interlaced or progressive, and a variety of other options that will let you optimize your images for uploading on to your free website.
