Best practices for managing images on your website
Find royalty-free images, choose the right format and lighten your images to get a faster website that ranks better in search engines.
Well-chosen and well-prepared images make your website more attractive, faster and better ranked. This article gathers the best practices to apply before adding an image to your website.
In this article
- Find free images
- Choose the right format
- Optimize your images
- Adapt the image to its placement
- Recommended dimensions
Find free images
Several image banks offer quality visuals for free:
- Unsplash: over a million high-definition photos, offered by photographers from around the world. Remember to credit the photo's author.
- Pexels: free photos and videos gathered from several image banks.
- Flaticon: a very large library of icons, mostly free, grouped into consistent themed packs. The free account requires crediting the author.
Choose the right format
- JPG: the most widespread format on the web, best for photos and images with a background and many colours.
- PNG: best for images with a transparent area, as well as logos and graphics with lines or text, which it keeps sharper.
Optimize your images
Lightweight images make your website display faster, especially on mobile devices where most visits take place, and improve its search engine ranking.
- Resize: reduce the image to the dimensions it actually needs before uploading it.
- Compress: reduce the file size with a free online tool such as TinyPNG or Compressor.io.
- Rename: give each file a descriptive name, without spaces or special characters (for example
annual-general-meeting-2026.jpg). You find your images more easily, and search engines understand them better. - Describe: in the text editor, fill in the Alternative Text field of each image. Screen readers read it to people with visual impairments, and search engines use it too.
Images uploaded with the text editor (Browse Server) can weigh up to 2 MB. An image wider than 1,600 px or taller than 1,200 px is automatically reduced when uploaded. To learn more, see the article Add an image with the text editor.
Adapt the image to its placement
- Image module: the Image module has its own size options. With no size set, the image fills the full width of its zone: in a 50% zone, it therefore takes half the width of the page.
- Article images: in article lists (Multiple articles, Featured articles), images with the same dimensions give a uniform display. The cropping offered when uploading an article image (16:9, 4:3 or 1:1) makes this consistency easier.
- Banner: the banner is often one of the largest images on the website. Since the most common computer screen resolution is 1,920 × 1,080 px, plan for a width of at least 1,920 px.
- Favicon: the icon shown in the browser tab does not need to be larger than 16 × 16 px.
Recommended dimensions
The following table sums up the dimensions to plan for each location on the website. Images uploaded in the text editor weigh 2 MB at most, and an image wider than 1600 px or taller than 1200 px is automatically reduced.
| Location | Dimensions | Good to know |
| Banner (Banner module) | 1920 × 530 px | With the default look, the banner has a fixed height of about 530 px on a computer and 340 px on tablet and mobile. The image is enlarged to fill this frame, then centred. On mobile, only a central strip about 600 px wide stays visible: place text and logos there. |
| Full-width slider | 1920 × 700 px | Central safe zone of about 1000 × 520 px, file size ideally under 500 KB. In the image-with-text-on-the-left mode, prefer an image closer to a square. See the article Slider. |
| Article image | 16:9, 4:3 or 1:1 format | The cropping offered when you upload helps keep the same format for all the articles of a list (Multiple articles, Featured articles, Slider). |
| Image module | 1200 px wide for a 100% zone, 600 px for a 50% zone | On a computer, page content is about 1150 px wide. The image takes the width of its zone, unless you set a width. |
| Event image | Square format, from 400 × 400 to 600 × 600 px | The module adapts the image to its location: no size is imposed. Keep the same format for all your events. |
| Member photo | Square format, for example 500 × 500 px | Use the same format for all photos, for a consistent directory and featured members. |
| Image shared on social media | 1200 × 630 px | JPG or PNG, ideally under 300 KB. |
| Favicon | 16 × 16 px | Square image, in PNG format. |
These dimensions apply to the default look of the website. If your website has advanced customization (CSS), they may vary: test with one image before preparing all your visuals.