After text, images are the most basic and common web content. Images are important building blocks in web design. A well-chosen illustration can explain a context or give more depth to a text. Another important aspect is that colour and illustrations catch the readers’ attention and make the web page more attractive.
Images can for instance be photos, drawings, maps and diagrams, but also text.
The described rules below are common for all templates. Particular elements for each template are presented in specific pages.
Use images that add value and underline the message of your page. You want to draw the readers’ attention to your page, but not to draw the attention from the message.
It is often better to focus on a detail than to reduce an entire photo to a fraction of its original size.
It is good practice to decide on a few “standard” image sizes when you develop the template for your pages. This makes it easier to update the pages and the result will be more coherent, design-wise.
The images' physical size should be 100% of their displayed size on the page, not resized by the browser. If you upload a big picture to the server and display it at a smaller size, the users need to download an unnecessarily big image. If you upload a small image and resize it to be larger, the users will see a pixelated and/or fuzzy image.
Provide always the exact pixel dimensions when you specify the image using the width and height attributes of the img element.
Text in images
Avoid using images of text (headings, titles, etc.) It is not always possible to enlarge the text and never possible to change the contrast between text and background, which is difficult for users with visual impairments. Even with browser zoom or screen magnification images of text can appear blurred or pixelated. Prefer real text and if necessary use CSS for font effects and background images.
Be careful when including text in maps and diagrams, you may need to create one image per language. In some cases, a legend can include the explanations to a diagram.
Text in banners, buttons, etc. should be anti-aliased unless it is set in a typeface designed for the Web. Anti-aliasing removes jagged edges by blending the edges of a font with the surrounding pixels. The resulting object is thus better integrated in the image. For small text sizes, you need to experiment to see what works best for the size and the typeface.
Images as background
Avoid using large background images unless they are light. A patterned and contrasted background makes it more difficult to read text in a page.
ALTernative text - ALT tag
Images must have an ALTernative text describing the image content. ALT is an HTML attribute that is displayed if the browser can’t show the image. It is also essential for vocal browsers. It should be no more than 70 characters.
<img src="button_presidency_en.gif" alt="Presidency of the EU" />
Decorative images are those that convey no information. For these, provide a text alternative but leave it empty (alt=""). This informs the user (or assistive technology) that the image is not relevant to the meaning of the content. Purely decorative images can be better inserted using CSS rather than in mark-up, improving maintainability.
Often images have functionality, beyond their information content. Always remember that you need to describe the functionality rather than the image itself. For example, buttons and links indicate actions. The text alternative should describe the action, not the image. For example, for a “print this page” button with a printer icon, a proper alternative text is "Print this page" and not "printer icon".
Charts, graphs and infographics are complex images to be described in a few words. You should provide a brief ALT text description of the image and then provide a longer description elsewhere. There are several ways of providing a long description for images: within the same page, adding a page describing the image and linking to it via a normal text link or via the “longdesc” attribute added to the <img> tag that provides a link to the long description page.
Example of longdesc attribute:
<img src="chart_unemployment_en.gif" alt="Chart showing EU unemployment by countries in 2010" longdesc="chart_description_en.html" />
Inline vs background images
Images can be inserted in a page using the HTML tag <img> or as background within a CSS. Use CSS background images for repeating decorative images and inline images for functional or images that convey information.
One of the problems with background images is accessibility. When you turn off CSS, background images do not have ALT text and some operating systems such as Windows High Contrast mode have the effect of hiding CSS background images. Therefore, the user will not be able to fully use your website.
Functional images (e.g. a print icon opening the print function, a play button, etc.) or images providing information (e.g. PDF icons within a link with alt text PDF to convey information about the file format to screen readers) should be inline images inserted with the tag <img>.
CSS sprites is a technique that allows by using CSS positioning to selectively display composite background images. They are a useful method to display graphics while preserving bandwidth (save HTTP requests) and improving page rendering times (the combined image is often smaller in size than the individual images).
While it is certain the advantages of the sprite technique, it may incorrectly be assumed that all sliced images should be placed as backgrounds — even images that convey important information. The results would be a less accessible site, and would limit the potential benefits of the title and ALT attributes in the HTML. To maximize accessibility and usability, use CSS sprites only for repeating decorative effects.
Animated GIFs can be used for simple animations, but be aware that some users find this very annoying.
Flash is the best format for vector animations, and the plug-in is very common. You should still make sure the information is available in another format for those who don’t want to – or can’t – see Flash files.
Images on EUROPA must be in either JPG, or GIF format. PNG format is also allowed. As a rule of thumb, JPG is best for photos and illustrations with many colors. GIF is better for text and illustrations with areas of solid color (such as maps and diagrams). PNG is best for transparency effects but many older browsers do not support this format.
You can read more about image formats in the standard chapter.
Most graphic software lets you view the effect of different compression levels; try to keep the images small without obvious quality loss.
Beware of quality loss through repeated compression. Changes should be carried out on the original file formats (e.g. PSD for Photoshop) not on the final files (GIF, JPG).
JP(E)G compression removes information from the digital image, thus reducing the file size. This means visual information is lost permanently. If you need to change a JPG, go back to the original image file. Compression of already compressed files can give unexpected results.
GIF compression is most suitable for flat areas of colour. A dithered GIF has softer transitions between different colours, as colours between system colours are approximated. An interlaced GIF image gives a nice effect for users on slow Internet connections. The image is displayed one horizontal row at a time, but not from top to bottom, allowing the graphic information to be stored in a multi-pass format.
Standard images and icons
Always use the standard icons of EUROPA (language codes, PDF, ZIP, arrows, flags, etc.) when available:
- The images must be used from the standard images library (IMPORTANT: do not make local copies).
- The language version appropriate to the page must be used.
- When standard images are not available, create new images or use existing ones.
Copyrights for third party material
All third-party material published on EUROPA must be checked for the necessary copyrights. If the material is not the property of the Commission, it should not be published or removed immediately. The images in our Audiovisual portal are free to download and use.
If contractors prepare material for the Commission that includes third-party material for which rights need to be obtained, these contractors must provide the necessary proof of their acquisition. Pay special attention to photos of buildings, the rights to reproduce them is under discussion in several European countries.
If the Commission prepares material itself that includes third-party material for which rights need to be obtained, all the necessary proof of their acquisition must be kept on file.
Read more about legal notice and copyright.