Navigation path

Image formats

Mandatory requirementImages on EUROPA websites must be in GIF, JPG or PNG format. 

 

View all IPG Rules

Image file formats provide a standardized method for the transfer and storage of image data. Image files are made up of picture elements, called pixels. The pixels that comprise an image are in the form of a grid of rows and columns. Each of the pixels is an image file that stores a digital number representing the brightness and colour of the image at that location.

 

Description

Image file sizes, expressed in bytes, increase with the number of pixels in the image, and the colour depth of the pixels. The more rows and columns, the greater the image resolution and the greater the file size. Also, each pixel making up the image increases in size as colour depth is increased. An 8-bit pixel (1 byte) can store 256 colours, a 24-bit pixel (3 bytes) can store 16 million colours, and a 32-bit pixel (4 bytes) can store 32 million colours.

Because of the bandwidth issues surrounding networked delivery of information and because image files contain so much information, Web graphics are by necessity compressed. Image compression is used to decrease file sizes.

There are two categories of image file compression: lossy and lossless. The lossy compression algorithm takes advantage of the limitations of the human visual senses and discards information that would not be sensed by the eye. The loss of information is tolerable, and in many cases goes unnoticed. Files size is reduced as file compression is increased. At some point image deterioration becomes noticeable. Lossless algorithms compress the image data with no loss in image quality, but these results in larger files than the lossy algorithms.

 
 

Use on EUROPA websites

Formats for the EUROPA websites:

  • GIF (Graphic Interchange Format)

    Advantages: Use GIF for images with large areas of uniform colour, logos, line-art, animations, one-color transparency or background patterns. All web browsers support GIF.  It supports transparency, multi-frame images (animation) and interlacing.

    Disadvantages: The GIF is limited to an 8-bit palette (256 colours) and therefore is not suitable for photographs.
  • JPG or JPEG (Joint Photographic -Experts- Group) 

    Advantages: Use JPEG for photographs or where there is a strong colour gradient to make your image files smaller and to store 24-bit-per-pixel color data. The JPEG format supports full colour and produces relatively small file sizes. Fortunately, the compression in most cases does not distract noticeably from the quality of the image.

    Disadvantages: Do not use JPEGs for simple block images, they will appear fuzzy. The JPEG image files are a lossy format. JPG looses quality every time it is opened and saved again – even at max quality. JPG does not support “Alpha Channels” or transparency. 
  • PNG (Portable Network Graphics)

    Advantages: Use PNG for large areas of uniform colour, for “illustration-style” images, transparent alpha background images or for the lossless, portable, well-compressed storage of raster images. PNG is a lossless format that supports true colour (16 million colours), alpha channels (transparency) and gamma correction. 
     
    Disadvantages:
    Many older browsers do not support the PNG file format. PNG file size could be larger than GIF or JPG formats. PNG cannot optimize photographs as well as JPEG can. 

No format is best in all scenarios. Therefore, it is best to play with the different formats and compression levels to achieve the best results. PNG should be used only when it is really needed (special transparency).

Below other formats which are not for the web but could be used for downloading or printing:

  • The TIFF (Tagged Image File Format) image files are a lossless format, using the filename extensions .tiff or .tif. Some digital cameras have the option to save images in the TIFF format. These files use the LZW compression algorithm which results in lossless files. Because no image data is lost, this format is used when the ultimate in image quality is desired. Another advantage of TIFF files is that they suffer no generation degradation during file manipulation. The TIFF files support 32-bit colour depth (true colour). The TIFF file sizes are larger than the JPEG file sizes, because JPEG takes advantage of its lossy compression. The TIFF image format is not widely supported by web browsers, and should not be used on the Internet. 
  • The EPS (Encapsulated PostScript) is a standard file format for importing and exporting PostScript files. There are two distinct types of .EPS files, one of which is a vector based graphics file and can be opened and easily edited for type, color, etc. in Adobe Illustrator or PC vector based programs. The other is an .EPS photo file, flattened, set resolution "picture" type file. It can be opened in PhotoShop or other image editing programs.
 
 

General rules for images

Standards for images (ALT text, inline vs background, size, etc.) are provided in the chapter Design - general rules for images.