Comment préparer mes images avant de les importer sur le site

Pour améliorer la performance de votre site web (rapidité d'affichage des pages) et son apparence, vous devez optimiser les images avant de les importer dans la médiathèque.

Taille de l'image

Ne téléchargez pas une image plus grande que nécessaire. Réduisez l'image à la taille maximale d'affichage prévue, ainsi vous évitez toute déformation / pixellisation.
Exemple pour les bandeaux :

Largeur : 1920 px pour un affichage desktop
Hauteur : varie de 300 à 500 px pour le bandeau de la page d'accueil et fixée à 250 pour le bandeau des autres pages

Poids de l’image

Il doit être, de préférence, inférieur à 300Ko.
Pour alléger une image, l’enregistrer pour un affichage web :

Au format jpg ou jpeg pour une image d'illustration, idéal pour les photos et images complexes avec beaucoup de couleurs. Optimisez la compression pour trouver le bon équilibre entre qualité visuelle et taille de fichier.
Au format png : meilleur pour les logos, graphiques, icônes ou images nécessitant de la transparence. Moins de perte de qualité que JPEG, mais généralement plus volumineux.
Au format gif pour une image animée

Exemple d'outils gratuits pour réduire le poids de vos images :

Les formats d'affichage proposés par l'éditeur de texte

Un menu déroulant vous propose plusieurs tailles d'affichage de l'image. Cette taille est fonction du support utilisé (écran desktop, tablette, smarphone)

Exemple : pour un écran 27 pouces

Référence : largeur maxi =  600 px -  hauteur maxi = 600 px
Small : largeur maxi =  100 px -  hauteur maxi = 100 px
Tiny : largeur maxi =  30 px -  hauteur maxi = 30 px
Medium : largeur maxi =  200 px -  hauteur maxi = 200 px
Large : largeur maxi =  300 px -  hauteur maxi = 300 px
Gallery : largeur maxi =  1200 px -  hauteur maxi = 1200 px
Original : taille à son format original

La restitution de l'image

L'image peut être retaillée et sa restitution web dépend

du ratio (rapport entre la largeur et la hauteur) de l'image d'origine
de la taille de l'écran d'affichage (écran PC, smartphone, tablette ...)
du format d’affichage proposé dans l’éditeur de texte : conteneur de l’image

Les valeurs des hauteur et largeur des images d'origine s'adaptent aux valeurs maximales d'affichage et sont recalculées pour préserver le ratio de l'image

À noter : pour la plupart des formats proposés, si la largeur et la hauteur de l’image d’origine sont inférieures au format d'affichage, la taille d’origine de l'image est conservée

Exemple : Sélection du format d'affichage = référence - largeur maxi = 600 px - hauteur maxi = 600 px

Taille de l'image	Ratio	Taille / format référence	Taille de restitution
200 x 200	1	< format	taille d’origine de l'image
500 x 300	1.67	< format	taille d’origine de l'image
1280 x 1280	1	> format	redimensionnement et taille d'affichage 600 X 600
1920 x 1000	1.92	> format	la dimension la plus importante (largeur=1920) sera réduite à 600 px et la hauteur recalculée = 1000x600/1920 = 313 pour conserver le ratio de l'image → taille d'affichage 600 X 313
800 x 1200	0.67	> format	la dimension la plus importante (hauteur=12000) sera réduite à 600 px et la largeur recalculée = 800x600/1200 = 400 pour conserver le ratio de l'image → taille d'affichage 400 X 600

Nommez les fichiers de façon descriptive

Utilisez des noms clairs et pertinents :
Cela contribue à un meilleur référencement SEO (indexation de votre site par les moteurs de recherche) et à l'accessibilité pour les personnes en situation de handicap.

Par exemple, nommez votre fichier "equipe-support-2025.jpg" plutôt que "IMG_4567.jpg"
Utilisez des lettres minuscules et remplacez les espaces par des tirets

Remplir le champ "Texte alternatif"

Décrire clairement le contenu de l’image :
Cela est utile pour le SEO et permet aux internautes en situation de handicap, telles que les personnes aveugles ou malvoyantes utilisant des lecteurs d'écran, de comprendre le contenu de l'image.

Par exemple : "Photo de l’équipe biométrie devant le stand du salon X en janvier 2025".
Si l'image est purement décorative et n'apporte pas d'information, laissez le champ "Texte alternatif" vide.

Bon à savoir : notions de pixels et de DPI

Quand on travaille avec des images, notamment pour imprimer ou publier sur le web, on rencontre souvent les notions de pixels, de DPI et de dimensions en centimètres.

1. Pixels = la "taille réelle" de l’image
Une image numérique est composée de milliers de petits points appelés pixels.
Exemple : une image peut faire 3000 pixels de large et 2000 pixels de haut.
Cela correspond à sa taille réelle sur l’ordinateur – mais pas encore à sa taille sur le papier.

2. DPI = la densité d’impression
DPI signifie "dots per inch", c’est-à-dire points par pouce (1 pouce ≈ 2,54 cm).
Cela indique combien de pixels seront imprimés sur chaque pouce de papier.

300 DPI = 300 pixels imprimés sur 2,54 cm → image bien nette
150 DPI = 150 pixels par pouce → image moins précise
72 DPI = qualité suffisante pour un écran, mais floue à l’impression

3. Le lien entre pixels, DPI et taille imprimée
La taille physique de l’image dépend à la fois du nombre de pixels et du DPI choisi.
Exemple avec une image de 3000 pixels de large :

À 300 DPI, elle fera : 3000 ÷ 300 = 10 pouces = 25,4 cm de large
À 150 DPI, elle fera : 3000 ÷ 150 = 20 pouces = 50,8 cm de large
À 600 DPI, elle fera : 3000 ÷ 600 = 5 pouces = 12,7 cm de large

Moins de DPI = image plus grande, mais moins nette
Plus de DPI = image plus petite, mais très nette

4. Et pour le web ?
Sur un écran, le DPI n’a pas d’effet visible.
Seule la taille en pixels compte.
Donc une image de 1200 x 800 pixels s’affichera de la même manière, quel que soit son DPI.

Date de modification : 19 février 2026 | Date de création : 18 juillet 2025 | Rédaction : SICC Pôle Web

Catégorie de cookie	Moyens de désactivation
Cookies analytiques et de performance	Realytics Google Analytics Spoteffects Optimizely
Cookies de ciblage ou publicitaires	DoubleClick Mediarithmics

Cookies obligatoires	Cookies fonctionnels	Cookies sociaux et publicitaires
Ces cookies sont nécessaires au bon fonctionnement du site, ils ne peuvent pas être désactivés. Ils nous sont utiles pour vous fournir une connexion sécuritaire et assurer la disponibilité a minima de notre site internet.	Ces cookies nous permettent d’analyser l’utilisation du site afin de pouvoir en mesurer et en améliorer la performance. Ils nous permettent par exemple de conserver vos informations de connexion et d’afficher de façon plus cohérente les différents modules de notre site.	Ces cookies sont utilisés par des agences de publicité (par exemple Google) et par des réseaux sociaux (par exemple LinkedIn et Facebook) et autorisent notamment le partage des pages sur les réseaux sociaux, la publication de commentaires, la diffusion (sur notre site ou non) de publicités adaptées à vos centres d’intérêt.
Sur nos CMS EZPublish, il s’agit des cookies sessions CAS et PHP et du cookie New Relic pour le monitoring (IP, délais de réponse). Ces cookies sont supprimés à la fin de la session (déconnexion ou fermeture du navigateur)	Sur nos CMS EZPublish, il s’agit du cookie XiTi pour la mesure d’audience. La société AT Internet est notre sous-traitant et conserve les informations (IP, date et heure de connexion, durée de connexion, pages consultées) 6 mois.	Sur nos CMS EZPublish, il n’y a pas de cookie de ce type.