Basic guidelines

Please follow these basic rules while creating and using images on a webpage:

• Do not insert text into the image (for SEO and accessibility issues)
• Do not insert UI element in the images (buttons, cards, etc.)
• Avoid unnecessary decorations
• Only use images if they serve a user need

Aspect ratio

There are two different aspect ratio in FAO.org. One is for hero banners, and one for thumbnails (used in the cards). The hero banner's aspect ratio (in desktop size) is 21:9, the thumbnail aspect ration is 3:2.

3:2

3

2

Category

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Image size

It is crucial to maintain the images size as light as possible.

The proportions mentioned before are related to the ratio between the width and the height of the image.

The sizes in pixel could be different, often related to the initial size of the source image. But in order to mantain the images light (to increase the loading speed), the images should not exceed the width of 2000px for the hero banners and 600px for the thumb images.

Those sizes allow to display the images in high quality also for high density screens, while keeping the size low.

Alternative text

Alternative text, or alt text, is read out by screen readers or displayed if an image does not load or if images have been switched off.

All images, except decorative images, must have alt text that:

• Tells people what information the image provides
• Describes the content and function of the image
• Is specific, meaningful and concise

Use normal punctuation, like commas and full stops, so the text is easy to read and understand.

Do not:

• Include the name of the photographer or person who created the image
• Start with 'Image of', 'Graphic of' or 'Photo of'
• Repeat information from the page
• Include extra information not in the image