How to use images
Last updated: 14/02/2023
Introduction
Images are a great addition to any site. They help break up the text and give a visual example of what is being described on the page. Images increase your audience’s engagement and help communicate your message effectively. Images can also serve a purely decorative, eye-catching purpose, improving the visual balance of your page.
Make sure your images:
- are relevant to the topic of the web page and up to date;
- are eye-catching and dynamic – use symbolic images rather than images that represent the sentence or the title literally;
- have prior authorisation from the copyright owner – users are advised to refer to the copyright information on the individual documents;
- are optimised for web display – i.e. not too big or too small for the content of your page (see below);
- do not contain embedded text, since this would make them inaccessible; if your images contain text.
Image optimisation
Images should be compressed so web pages do not take long to download. According to External link: Google Consumer Insights, “53% of visits are abandoned if a mobile site takes longer than 3 seconds to load.”
For example, a 500px width by 300px height image should not weigh more than 60kb. If there are 20 or more of these images on the page, then it is recommended to compress them down even more, as far as image quality will permit.
On the other hand, an image that spans full page width can weigh approximately 120kb. This file size is acceptable if there are only one or two of these present on the page.
The key is to maintain fast page load times, so all page content and file weight must be considered.
Choosing the right image format
There are many External link: image file types to choose from, so for now we will just focus on the most common for sites hosted on the Publications Office portal. In general, JPEG is good for photos (lossy compression); PNG sharp images that do not require much compression (with support for transparency); and SVG for geometric shapes.
How to optimise images with different software
Below you will find links to external sites that explain this:
- External link: Optimising images with Photoshop
- External link: Optimising images with Tiny PNG (online service)
Compresses WEBP, JPEG and PNG files - External link: Optimising images with Gimp
Copyright
Generally speaking, the copyright for the editorial content of the Publications Office websites is licensed under the Creative Commons Attribution 4.0 International licence . This means that this content can be reused by the public provided the source is acknowledged and any changes made are indicated. This applies to the content owned by the EU.
If you need to use third-party images, the following rules apply:
- All third-party images published on Publications Office websites must be checked for the necessary copyright.
- Only images for which the usage rights have been acquired can be used. Add the copyright notice in the image metadata. You may be required to clear additional rights if certain content includes architectural or artistic works (sculptures, paintings).
- When acquiring rights to use third-party graphics or other elements, keep in mind that Publications Office websites are regularly crawled for web-preservation purposes, and your content may need to be accessed for a long period of time.
- Keep proof of acquisition of third-party rights on images on file or on paper. Include this requirement in contracts involving external service providers.
- Take privacy and personality rights into account: except for public persons, if you want to use a photo where a recognisable person appears, you need their explicit permission. Be particularly careful with children.
- You can find more information on copyright here:
https://webgate.ec.europa.eu/multisite/publicare/node/22. If in doubt, contact the Copyright Sector (OP-COPYRIGHT@publications.europa.eu)
Resources
To help you search for suitable images, the Publications Office suggests using one of the following recommended sources (EU Login required):
If you would like your web images to be specifically designed for your website, please contact us by email (OP-GRAPHISTE@publications.europa.eu).