{"id":22879,"date":"2026-08-30T08:46:06","date_gmt":"2026-08-30T06:46:06","guid":{"rendered":"https:\/\/www.curiaweb.ch\/?post_type=docs&p=22879"},"modified":"2026-08-30T08:51:57","modified_gmt":"2026-08-30T06:51:57","password":"","slug":"optimiser-des-images-pour-le-web","status":"publish","type":"docs","link":"https:\/\/www.curiaweb.ch\/fr\/hilfe\/seo-monitoring\/bilder-fuer-web-optimieren\/","title":{"rendered":"Optimiser les images pour le Web : taille de fichier, format et r\u00e9f\u00e9rencement"},"content":{"rendered":"

Les images comptent parmi les fichiers les plus lourds transf\u00e9r\u00e9s sur de nombreux sites web. Si les photos et les graphiques sont t\u00e9l\u00e9charg\u00e9s sans optimisation, des images individuelles peuvent faire plusieurs m\u00e9gaoctets et augmenter inutilement le temps de chargement d'une page.<\/p>\n\n\n\n

Cependant, une bonne optimisation des images ne signifie pas simplement de les compresser le plus possible. Ce qui est d\u00e9cisif, c'est un compromis judicieux entre la qualit\u00e9 de l'image, les dimensions, la taille du fichier et le format de fichier utilis\u00e9.<\/p>\n\n\n\n

Les images jouent \u00e9galement un r\u00f4le pour les moteurs de recherche. Des noms de fichiers compr\u00e9hensibles, des textes alternatifs adapt\u00e9s et un contexte th\u00e9matique pertinent aident \u00e0 mieux classer les images et leur signification.<\/p>\n\n\n\n

Dans ce guide, nous vous montrons comment pr\u00e9parer des images pour des sites web et quels facteurs sont importants pour la qualit\u00e9, le temps de chargement et le r\u00e9f\u00e9rencement (SEO).<\/p>\n\n\n\n

\n

En bref :<\/strong> Une image optimis\u00e9e pour le Web poss\u00e8de les dimensions adapt\u00e9es \u00e0 son utilisation, un format de fichier appropri\u00e9 et une taille de fichier aussi petite que possible, sans que la qualit\u00e9 visible n'en souffre inutilement.<\/p>\n<\/blockquote>\n\n\n\n

Pourquoi les images des sites web doivent-elles \u00eatre optimis\u00e9es ?<\/h2>\n\n\n\n

Les appareils photo num\u00e9riques et les smartphones modernes produisent des images avec des r\u00e9solutions tr\u00e8s \u00e9lev\u00e9es. C'est utile pour la photographie, le traitement et l'impression, mais souvent inutile pour l'affichage sur un site web.<\/p>\n\n\n\n

Une photo peut par exemple faire plusieurs milliers de pixels de large, bien qu'elle soit affich\u00e9e sur le site Web avec une largeur maximale nettement inf\u00e9rieure.<\/p>\n\n\n\n

Si le grand fichier original est n\u00e9anmoins transf\u00e9r\u00e9, le navigateur doit t\u00e9l\u00e9charger beaucoup plus de donn\u00e9es que n\u00e9cessaire pour l'affichage r\u00e9el.<\/p>\n\n\n\n

Cela peut \u00eatre perceptible en particulier avec les connexions mobiles.<\/p>\n\n\n\n

Les dimensions de l'image et la taille du fichier ne sont pas la m\u00eame chose<\/h2>\n\n\n\n

Lors de l'optimisation d'images, vous devez distinguer deux notions :<\/p>\n\n\n\n

Dimensions de l'image<\/strong> d\u00e9crivent la largeur et la hauteur d'une image en pixels.<\/p>\n\n\n\n

Exemple :<\/p>\n\n\n\n

1920 \u00d7 1080 pixels<\/code><\/p>\n\n\n\n

Le d\u00e9 Taille du fichier<\/strong> d\u00e9crit en revanche l'espace de stockage dont le fichier image a besoin.<\/p>\n\n\n\n

Exemple :<\/p>\n\n\n\n

280 Ko<\/code><\/p>\n\n\n\n

Deux images ayant des dimensions en pixels identiques peuvent avoir des tailles de fichier tr\u00e8s diff\u00e9rentes. Cela d\u00e9pend entre autres du contenu de l'image, du format de fichier et de la compression utilis\u00e9e.<\/p>\n\n\n\n

\"Originalbild<\/figure>\n\n\n\n
\n

Important :<\/strong> Une image n'est pas optimis\u00e9e pour le Web simplement parce que tu r\u00e9duis sa taille de fichier. Il faut \u00e9galement \u00e9viter des dimensions en pixels inutilement grandes.<\/p>\n<\/blockquote>\n\n\n\n

Quelle doit \u00eatre la taille d'une image pour un site web ?<\/h2>\n\n\n\n

Il n'y a pas une seule taille de pixel qui convienne \u00e0 toutes les images de sites Web.<\/p>\n\n\n\n

Les dimensions requises d\u00e9pendent de l'endroit et de la mani\u00e8re dont l'image est affich\u00e9e.<\/p>\n\n\n\n

Une petite image miniature n\u00e9cessite des dimensions diff\u00e9rentes de celles d'une grande image principale sur toute la largeur d'un site web.<\/p>\n\n\n\n

La r\u00e8gle fondamentale est la suivante :<\/p>\n\n\n\n

\n

Conseil pratique :<\/strong> Ne fournissez pas beaucoup plus de donn\u00e9es d'image que ce qui est r\u00e9ellement n\u00e9cessaire pour l'affichage pr\u00e9vu.<\/p>\n<\/blockquote>\n\n\n\n

Ne pas t\u00e9l\u00e9charger les photos originales sans v\u00e9rification<\/h2>\n\n\n\n

Un smartphone moderne peut, par exemple, g\u00e9n\u00e9rer une photo de plusieurs milliers de pixels de large.<\/p>\n\n\n\n

Si cette image n'est affich\u00e9e que dans une colonne de contenu sur votre site Web, la pleine r\u00e9solution d'origine peut \u00eatre inutile.<\/p>\n\n\n\n

Par cons\u00e9quent, avant de le t\u00e9l\u00e9charger, vous devez v\u00e9rifier quelle est la taille d'affichage maximale judicieuse pour l'utilisation sp\u00e9cifique pr\u00e9vue.<\/p>\n\n\n\n

Tenir compte des \u00e9crans haute r\u00e9solution<\/h2>\n\n\n\n

Cependant, lors du choix des dimensions de l'image, vous ne devez pas seulement tenir compte de la largeur d'affichage CSS visible.<\/p>\n\n\n\n

Les appareils modernes peuvent \u00eatre dot\u00e9s d'\u00e9crans haute r\u00e9solution, sur lesquels des informations d'image suppl\u00e9mentaires peuvent s'av\u00e9rer utiles pour un affichage net.<\/p>\n\n\n\n

C'est pourquoi la r\u00e8gle g\u00e9n\u00e9rale \u201e r\u00e9duire toujours l'image exactement \u00e0 la largeur visible en pixels \u201c serait \u00e9galement trop simple.<\/p>\n\n\n\n

Les sites web modernes peuvent en outre fournir diff\u00e9rentes variantes d'images pour diff\u00e9rentes tailles d'\u00e9cran ou r\u00e9solutions.<\/p>\n\n\n\n

Qu'est-ce que les images adaptatives ?<\/h2>\n\n\n\n

Les images adaptatives permettent au navigateur de s\u00e9lectionner une variante d'image appropri\u00e9e en fonction de l'appareil, de la taille d'affichage et d'autres facteurs.<\/p>\n\n\n\n

Sur le plan technique, on peut par exemple utiliser des m\u00e9canismes HTML tels que srcset<\/code> et tailles<\/code> \u00eatre utilis\u00e9.<\/p>\n\n\n\n

Simplifi\u00e9 :<\/p>\n\n\n\n

petit \u00e9cran\n      \u2193\nvariante d'image plus petite\n\nplus grand \u00e9cran\n      \u2193\nvariante d'image plus grande<\/code><\/pre>\n\n\n\n
De nombreux syst\u00e8mes de gestion de contenu modernes g\u00e9n\u00e8rent ou utilisent automatiquement de telles variantes. N\u00e9anmoins, tu ne dois pas supposer que cela rend automatiquement optimale n'importe quelle taille de fichier original.<\/p>\n\n\n\n
Quel format d'image dois-je utiliser ?<\/h2>\n\n\n\n
Plusieurs formats d'image sont envisageables pour les sites web. Ils poss\u00e8dent des propri\u00e9t\u00e9s diff\u00e9rentes et ne conviennent donc pas de la m\u00eame mani\u00e8re \u00e0 tous les contenus.<\/p>\n\n\n\n
Parmi les formats pertinents aujourd'hui, on trouve notamment :<\/p>\n\n\n\n
JPEG \/ JPG\nPNG\nWebP\nAVIF\nSVG<\/code><\/pre>\n\n\n\n
Le format appropri\u00e9 d\u00e9pend entre autres de s'il s'agit d'une photo, d'un graphique, d'un logo ou d'une image avec transparence.<\/p>\n\n\n\n
Nous traitons en d\u00e9tail les diff\u00e9rences entre WebP, AVIF, JPEG et PNG sur WebP, AVIF, JPG et PNG : quel format d'image utiliser ?<\/a>.<\/p>\n\n\n\n
JPEG ou JPG<\/h2>\n\n\n\n
Le JPEG est depuis de nombreuses ann\u00e9es un format courant pour les photos.<\/p>\n\n\n\n
Il utilise une compression avec pertes. Cela permet de r\u00e9duire consid\u00e9rablement la taille du fichier, tout en perdant des informations d'image selon le niveau de compression.<\/p>\n\n\n\n
Le JPEG convient particuli\u00e8rement aux sujets photographiques comportant de nombreuses couleurs et d\u00e9grad\u00e9s.<\/p>\n\n\n\n
En revanche, le JPEG classique ne convient pas pour les graphiques avec de la transparence.<\/p>\n\n\n\n
PNG<\/h2>\n\n\n\n
PNG utilise une compression sans perte et prend en charge la transparence.<\/p>\n\n\n\n
Le format convient par exemple \u00e0 certains graphiques, captures d'\u00e9cran ou contenus pour lesquels des contours nets ou la transparence sont importants.<\/p>\n\n\n\n
Pour les grandes photographies, cependant, un fichier PNG peut \u00eatre consid\u00e9rablement plus volumineux qu'une alternative compress\u00e9e de mani\u00e8re judicieuse.<\/p>\n\n\n\n
Une photo ne devrait donc pas \u00eatre enregistr\u00e9e automatiquement au format PNG simplement parce que ce format est connu.<\/p>\n\n\n\n
WebP<\/h2>\n\n\n\n
WebP est un format d'image moderne pour le Web qui prend en charge la compression avec et sans perte ainsi que la transparence.<\/p>\n\n\n\n
Avec des param\u00e8tres adapt\u00e9s, il est ainsi souvent possible d'obtenir des fichiers plus petits qu'avec les anciens formats, sans qu'il soit n\u00e9cessaire de r\u00e9duire la qualit\u00e9 visible de mani\u00e8re proportionnelle.<\/p>\n\n\n\n
Le WebP est largement pris en charge par les navigateurs modernes et constitue donc une option pratique pour de nombreuses applications de sites Web.<\/p>\n\n\n\n
AVIF<\/h2>\n\n\n\n
AVIF est un autre format d'image moderne qui peut permettre une compression efficace.<\/p>\n\n\n\n
En particulier pour les contenus photographiques, cela permet, avec une configuration adapt\u00e9e, d'obtenir de tr\u00e8s petits fichiers tout en conservant une bonne qualit\u00e9 visuelle.<\/p>\n\n\n\n
Cependant, cela ne signifie pas que l'AVIF est automatiquement le meilleur choix pour chaque image. L'effort de codage, le contenu de l'image, la qualit\u00e9 souhait\u00e9e et le flux de travail technique du site Web jouent \u00e9galement un r\u00f4le.<\/p>\n\n\n\n
SVG pour les logos et les graphiques vectoriels<\/h2>\n\n\n\n
Le SVG se distingue fondamentalement des images matricielles classiques.<\/p>\n\n\n\n
Il s'agit d'un format vectoriel. Les formes et les lignes sont d\u00e9crites math\u00e9matiquement ou sous forme de donn\u00e9es vectorielles structur\u00e9es et ne sont pas enregistr\u00e9es sous forme de grille fixe de pixels individuels.<\/p>\n\n\n\n
Cela permet de mettre \u00e0 l'\u00e9chelle des graphiques SVG appropri\u00e9s sans la perte de qualit\u00e9 typique d'une image matricielle.<\/p>\n\n\n\n
Le SVG convient par exemple pour les logos, les ic\u00f4nes et certaines illustrations.<\/p>\n\n\n\n
\n
Attention :<\/strong> Les fichiers SVG peuvent contenir du contenu actif ou complexe. N'utilisez des fichiers SVG que provenant de sources fiables et respectez les m\u00e9canismes de s\u00e9curit\u00e9 de votre CMS ou de votre application de site Web.<\/p>\n<\/blockquote>\n\n\n\n
Tous les formats d'image ne conviennent pas \u00e0 tous les contenus<\/h2>\n\n\n\n
Une orientation simple :<\/p>\n\n\n\n
Type d'image<\/th>Formats souvent adapt\u00e9s<\/th><\/tr><\/thead>
Photo<\/td>WebP, AVIF, JPEG<\/td><\/tr>
Graphique avec transparence<\/td>WebP, PNG, selon le contenu AVIF<\/td><\/tr>
Logo ou ic\u00f4ne sous forme de graphique vectoriel<\/td>SVG<\/td><\/tr>
Capture d'\u00e9cran<\/td>PNG ou WebP, selon le contenu<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Cette table est une orientation et non une r\u00e8gle rigide. Une comparaison concr\u00e8te de la qualit\u00e9 et de la taille peut s'av\u00e9rer utile pour les images importantes.<\/p>\n\n\n\n
Qu'est-ce que la compression d'image ?<\/h2>\n\n\n\n
Lors de la compression, les donn\u00e9es d'image sont enregistr\u00e9es de mani\u00e8re \u00e0 ce que le fichier r\u00e9sultant n\u00e9cessite moins d'espace de stockage.<\/p>\n\n\n\n
On distingue alors la compression sans perte et la compression avec perte.<\/p>\n\n\n\n
Compression sans perte<\/h3>\n\n\n\n
Avec la compression sans perte, les donn\u00e9es de l'image sont compress\u00e9es de mani\u00e8re \u00e0 ce que les informations d'origine puissent toujours \u00eatre reconstitu\u00e9es.<\/p>\n\n\n\n
Compression avec perte<\/h3>\n\n\n\n
Lors de la compression avec perte, des informations d'image sont supprim\u00e9es ou simplifi\u00e9es afin d'obtenir des fichiers plus petits.<\/p>\n\n\n\n
Plus la compression est forte, plus des artefacts visibles ou des pertes de qualit\u00e9 risquent d'appara\u00eetre.<\/p>\n\n\n\n
Le plus petit fichier n'est pas automatiquement le meilleur fichier<\/h2>\n\n\n\n
L'objectif de l'optimisation d'image n'est pas de g\u00e9n\u00e9rer le fichier le plus petit possible \u00e0 tout prix.<\/p>\n\n\n\n
Une photo avec une compression extr\u00eame peut certes \u00eatre tr\u00e8s petite, mais perdre visiblement en qualit\u00e9.<\/p>\n\n\n\n
Vous cherchez donc un compromis raisonnable :<\/p>\n\n\n\n
bonne qualit\u00e9 visible\n+\ndimensions adapt\u00e9es\n+\nformat efficace\n+\ncompression raisonnable\n=\nimage web bien optimis\u00e9e<\/code><\/pre>\n\n\n\n
V\u00e9rifier la qualit\u00e9 d'image apr\u00e8s la compression<\/h2>\n\n\n\n
Ne vous fiez pas exclusivement au pourcentage d'un logiciel d'imagerie.<\/p>\n\n\n\n
Un niveau de qualit\u00e9 de \u201e 80 \u201c par exemple n'est pas directement comparable entre tous les programmes, codecs et formats.<\/p>\n\n\n\n
V\u00e9rifiez visuellement l'image termin\u00e9e.<\/p>\n\n\n\n
Fais particuli\u00e8rement attention \u00e0 :<\/p>\n\n\n\n
formation de blocs disgracieuse\nd\u00e9tails flous\neffets de banding dans les d\u00e9grad\u00e9s\nbords impr\u00e9cis\ntexte difficile \u00e0 lire\nartefacts visibles<\/code><\/pre>\n\n\n\n
Pourquoi les grandes images influencent le temps de chargement<\/h2>\n\n\n\n
Les fichiers d'image doivent \u00eatre transf\u00e9r\u00e9s du serveur vers le navigateur.<\/p>\n\n\n\n
Plus il y a de donn\u00e9es \u00e0 transf\u00e9rer pour une page, plus cela peut peser dans la balance, en particulier sur les connexions lentes ou mobiles.<\/p>\n\n\n\n
Supposons qu'une page contienne plusieurs images non optimis\u00e9es :<\/p>\n\n\n\n
Image 1 : 4,0 Mo\nImage 2 : 3,2 Mo\nImage 3 : 2,5 Mo\nImage 4 : 3,8 Mo\n\nTotal : 13,5 Mo<\/code><\/pre>\n\n\n\n
\u00c0 eux seuls, ces quatre images g\u00e9n\u00e8rent d\u00e9j\u00e0 un volume de donn\u00e9es consid\u00e9rable.<\/p>\n\n\n\n
Si les m\u00eames images peuvent \u00eatre fournies de mani\u00e8re nettement plus efficace avec une qualit\u00e9 visuelle comparable, cela peut r\u00e9duire consid\u00e9rablement le volume de donn\u00e9es transf\u00e9r\u00e9.<\/p>\n\n\n\n
Ne pas d\u00e9finir de taille maximale de fichier globale<\/h2>\n\n\n\n
Sur Internet, vous trouverez des recommandations telles que \u201e chaque image doit faire moins de 100 Ko \u201c ou \u201e les images ne doivent pas d\u00e9passer 200 Ko \u201c.<\/p>\n\n\n\n
De telles limites fixes sont trop g\u00e9n\u00e9rales.<\/p>\n\n\n\n
Une petite vignette et une grande photo \u00ab hero \u00bb riche en d\u00e9tails remplissent des r\u00f4les totalement diff\u00e9rents.<\/p>\n\n\n\n
La question ne devrait donc pas \u00eatre :<\/p>\n\n\n\n
\u201eEst-ce que cette image est en dessous d'une certaine limite de Ko ?\u201c<\/em><\/p>\n\n\n\n
Mais plut\u00f4t :<\/p>\n\n\n\n
\u201eCette Fichier est-il inutilement volumineux pour son cas d'utilisation sp\u00e9cifique ?\u201c<\/em><\/p>\n\n\n\n
Qu'est-ce que le chargement diff\u00e9r\u00e9 ?<\/h2>\n\n\n\n
Le Lazy Loading signifie, en termes simples, que certaines images ne sont charg\u00e9es que lorsqu'elles sont n\u00e9cessaires ou qu'elles s'approchent de la zone visible.<\/p>\n\n\n\n
Cela \u00e9vite de devoir charger imm\u00e9diatement et enti\u00e8rement toutes les images situ\u00e9es plus bas lors du premier chargement de la page.<\/p>\n\n\n\n
sichtbarer Bereich\n[ Bild wird ben\u00f6tigt ]\n\nweiter unten\n[ Bild kann sp\u00e4ter geladen werden ]<\/code><\/pre>\n\n\n\n
Les navigateurs modernes prennent en charge, pour les images HTML appropri\u00e9es, par exemple l'attribut loading=\"lazy\"<\/code>.<\/p>\n\n\n\n
Toutes les images ne devraient pas \u00eatre charg\u00e9es en diff\u00e9r\u00e9 \u00e0 l'aveugle.<\/h2>\n\n\n\n
Une image n\u00e9cessaire imm\u00e9diatement dans la zone visible sup\u00e9rieure lors du chargement de la page ne doit pas \u00eatre retard\u00e9e inutilement sans v\u00e9rification.<\/p>\n\n\n\n
Cela concerne en particulier les contenus visuels importants situ\u00e9s dans la premi\u00e8re zone visible d'une page.<\/p>\n\n\n\n
Le chargement diff\u00e9r\u00e9 est donc une technique d'optimisation qui doit \u00eatre utilis\u00e9e \u00e0 bon escient, et non un interrupteur fonctionnant selon le principe \u201e plus il y en a, mieux c'est \u201c.<\/p>\n\n\n\n
Images et Core Web Vitals<\/h2>\n\n\n\n
Les images peuvent \u00e9galement influencer les Core Web Vitals utilis\u00e9s par Google.<\/p>\n\n\n\n
Une grande image visible peut par exemple \u00eatre pertinente pour la m\u00e9trique Largest Contentful Paint.<\/p>\n\n\n\n
Si les informations de taille appropri\u00e9es manquent pour les images, des d\u00e9calages de mise en page peuvent \u00e9galement se produire pendant le chargement.<\/p>\n\n\n\n
Nous traitons en d\u00e9tail des Core Web Vitals sous Core Web Vitals expliqu\u00e9s : LCP, INP et CLS<\/a>.<\/p>\n\n\n\n
La largeur et la hauteur en HTML peuvent r\u00e9duire les d\u00e9calages de mise en page<\/h2>\n\n\n\n
Si le navigateur conna\u00eet d\u00e9j\u00e0 les dimensions d'une image avant qu'elle ne soit enti\u00e8rement charg\u00e9e, il peut r\u00e9server l'espace n\u00e9cessaire dans la mise en page en amont.<\/p>\n\n\n\n
Pour une image HTML normale, les attributs peuvent par exemple largeur<\/code> et hauteur<\/code> aider \u00e0 d\u00e9terminer le rapport hauteur\/largeur ou l'espace n\u00e9cessaire.<\/p>\n\n\n\n
Les CMS modernes et les syst\u00e8mes de sites Web s'en chargent souvent automatiquement. N\u00e9anmoins, en cas de d\u00e9calages de mise en page prononc\u00e9s, il vaut la mani\u00e8re dont les images sont int\u00e9gr\u00e9es.<\/p>\n\n\n\n
Images et r\u00e9f\u00e9rencement naturel<\/h2>\n\n\n\n
L'optimisation des images pour les moteurs de recherche ne se r\u00e9sume pas \u00e0 avoir des fichiers aussi petits que possible.<\/p>\n\n\n\n
Les moteurs de recherche prennent en compte diff\u00e9rentes informations pour comprendre le contenu et le contexte d'une page ou d'une image.<\/p>\n\n\n\n
Cela comprend notamment le contenu de la page environnante, l'int\u00e9gration technique et les informations descriptives de l'image.<\/p>\n\n\n\n
Utiliser des noms de fichiers explicites<\/h2>\n\n\n\n
Un nom de fichier explicite peut aider \u00e0 classer un fichier image sur le plan organisationnel et th\u00e9matique.<\/p>\n\n\n\n
Peu informatif :<\/p>\n\n\n\n
IMG_847293.jpg<\/code><\/p>\n\n\n\n
Plus clair :<\/p>\n\n\n\n
webhosting-cpanel-dashboard.webp<\/code><\/p>\n\n\n\n
Le nom du fichier doit d\u00e9crire le contenu r\u00e9el de l'image. \u00c9vitez les cha\u00eenes artificielles de mots-cl\u00e9s.<\/p>\n\n\n\n
Qu'est-ce qu'un texte alternatif ?<\/h2>\n\n\n\n
L'attribut HTML autre<\/code> fournir une alternative textuelle pour une image.<\/p>\n\n\n\n
Un exemple simplifie :<\/p>\n\n\n\n
<img\n  src="cpanel-dashboard.webp"\n  alt="Aperçu du tableau de bord cPanel"\n><\/code><\/pre>\n\n\n\n
Les textes alternatifs sont particuli\u00e8rement importants pour l'accessibilit\u00e9, par exemple lorsqu'un lecteur d'\u00e9cran transmet le contenu d'une page ou qu'une image ne peut pas \u00eatre affich\u00e9e.<\/p>\n\n\n\n
Comment r\u00e9diger un bon texte alternatif ?<\/h2>\n\n\n\n
Le texte alternatif doit transmettre le contenu pertinent ou l'objectif de l'image dans son contexte de mani\u00e8re concise et compr\u00e9hensible.<\/p>\n\n\n\n
Mauvais :<\/p>\n\n\n\n
Image<\/code><\/p>\n\n\n\n
\u00c9galement mauvais :<\/p>\n\n\n\n
H\u00e9bergement web h\u00e9bergement Suisse meilleur h\u00e9bergement h\u00e9bergement pas cher cPanel<\/code><\/p>\n\n\n\n
Mieux vaut faire une capture d'\u00e9cran correspondante :<\/p>\n\n\n\n
Aper\u00e7u du tableau de bord cPanel<\/code><\/p>\n\n\n\n
Un texte alternatif n'est pas un champ destin\u00e9 \u00e0 accumuler le plus de mots-cl\u00e9s possible.<\/p>\n\n\n\n
\n
Important :<\/strong> R\u00e9digez les textes alternatifs principalement de mani\u00e8re \u00e0 transmettre utilement l'objectif ou le contenu pertinent de l'image. L'accessibilit\u00e9 et la compr\u00e9hensibilit\u00e9 sont plus importantes que le bourrage de mots-cl\u00e9s.<\/p>\n<\/blockquote>\n\n\n\n
Les images d\u00e9coratives n\u00e9cessitent un traitement diff\u00e9rent<\/h2>\n\n\n\n
Toutes les images ne v\u00e9hiculent pas d'informations pertinentes.<\/p>\n\n\n\n
Pour les images purement d\u00e9coratives, un texte alternatif vide peut \u00eatre techniquement judicieux afin que les technologies d'assistance puissent ignorer l'image.<\/p>\n\n\n\n
En HTML, cela peut par exemple se pr\u00e9senter ainsi :<\/p>\n\n\n\n
alt=\"\"<\/code><\/p>\n\n\n\n
Qu'une image soit d\u00e9corative ou pertinente pour le contenu d\u00e9pend de sa fonction dans le contexte sp\u00e9cifique de la page.<\/p>\n\n\n\n
Ne pas int\u00e9grer inutilement du texte dans les images<\/h2>\n\n\n\n
Les informations importantes devraient, si possible, \u00eatre pr\u00e9sentes sous forme de v\u00e9ritable texte HTML sur la page Web et ne pas figurer exclusivement dans un graphique.<\/p>\n\n\n\n
Cela pr\u00e9sente plusieurs avantages :<\/p>\n\n\n\n
Le texte peut \u00eatre mieux mis \u00e0 l'\u00e9chelle\nLe texte peut \u00eatre copi\u00e9\nLes lecteurs d'\u00e9cran peuvent le traiter\nLes traductions sont plus faciles\nLes contenus peuvent \u00eatre affich\u00e9s de mani\u00e8re plus r\u00e9active\nLes moteurs de recherche obtiennent un contenu textuel direct<\/code><\/pre>\n\n\n\n
Les graphiques comportant du texte peuvent bien s\u00fbr \u00eatre utiles. Cependant, les informations critiques ne doivent pas y \u00eatre cach\u00e9es exclusivement.<\/p>\n\n\n\n
Utiliser les images dans le bon contexte de page<\/h2>\n\n\n\n
Une image doit correspondre au contenu de la page.<\/p>\n\n\n\n
Une capture d'\u00e9cran du tableau de bord cPanel est par exemple utile dans un tutoriel sur cPanel. La m\u00eame capture d'\u00e9cran n'apporte aucun contexte suppl\u00e9mentaire sur une page totalement hors sujet.<\/p>\n\n\n\n
Les l\u00e9gendes d'images peuvent \u00e9galement \u00eatre utiles si elles fournissent des informations suppl\u00e9mentaires aux visiteurs.<\/p>\n\n\n\n
Optimisation des images et PageSpeed<\/h2>\n\n\n\n
Les outils d'analyse peuvent indiquer que les images pourraient \u00eatre cod\u00e9es plus efficacement, redimensionn\u00e9es diff\u00e9remment ou fournies dans un format plus moderne.<\/p>\n\n\n\n
Tu devrais \u00e9valuer de telles remarques dans le contexte du site web r\u00e9el.<\/p>\n\n\n\n
Nous expliquerons plus tard comment interpr\u00e9ter correctement les mesures de temps de chargement sous Mesurer et \u00e9valuer correctement le temps de chargement d'un site web<\/a>.<\/p>\n\n\n\n
Nous traitons \u00e9galement de l'utilisation de Google PageSpeed Insights sous Comment utiliser correctement Google PageSpeed Insights<\/a>.<\/p>\n\n\n\n
Ne pas optimiser aveugl\u00e9ment les scores PageSpeed<\/h2>\n\n\n\n
Un outil d'analyse est une aide au diagnostic et non une fin en soi.<\/p>\n\n\n\n
Il n'est pas judicieux de compresser un visuellement important de mani\u00e8re aussi excessive que la qualit\u00e9 en souffre nettement, uniquement pour am\u00e9liorer une seule m\u00e9trique.<\/p>\n\n\n\n
\u00c9valuez toujours l'utilit\u00e9 r\u00e9elle d'une optimisation.<\/p>\n\n\n\n
M\u00e9tadonn\u00e9es dans les fichiers d'images<\/h2>\n\n\n\n
Les fichiers d'images peuvent contenir des m\u00e9tadonn\u00e9es suppl\u00e9mentaires, par exemple des informations sur la prise de vue ou sur le logiciel utilis\u00e9.<\/p>\n\n\n\n
Selon l'utilisation pr\u00e9vue, de telles m\u00e9tadonn\u00e9es peuvent contenir des donn\u00e9es inutiles ou r\u00e9v\u00e9ler des informations que vous ne souhaitez pas publier.<\/p>\n\n\n\n
Par cons\u00e9quent, pour les images destin\u00e9es \u00e0 un site web public, il peut \u00eatre judicieux de v\u00e9rifier quelles m\u00e9tadonn\u00e9es sont r\u00e9ellement incluses et n\u00e9cessaires.<\/p>\n\n\n\n
\n
Conseil de confidentialit\u00e9 :<\/strong> V\u00e9rifiez, en particulier pour les images personnelles ou prises avec des smartphones, si elles contiennent des m\u00e9tadonn\u00e9es que vous ne souhaitez pas rendre publiques.<\/p>\n<\/blockquote>\n\n\n\n
Ne pas oublier les droits \u00e0 l'image et les licences<\/h2>\n\n\n\n
L'optimisation technique ne dit rien sur la question de savoir si vous pouvez utiliser une image l\u00e9galement.<\/p>\n\n\n\n
Utilisez uniquement des images pour lesquelles vous poss\u00e9dez les droits n\u00e9cessaires \u00e0 leur publication ou dont la licence autorise l'utilisation pr\u00e9vue.<\/p>\n\n\n\n
Veuillez respecter les mentions de droits d'auteur ou de sources \u00e9ventuellement requises.<\/p>\n\n\n\n
Conserver les fichiers d'origine s\u00e9par\u00e9ment<\/h2>\n\n\n\n
Lorsque vous r\u00e9duisez et compressez une photo originale de haute qualit\u00e9 pour le Web, vous ne devriez pas n\u00e9cessairement remplacer le fichier d'origine par la version optimis\u00e9e.<\/p>\n\n\n\n
Conservez les fichiers sources de haute qualit\u00e9 s\u00e9par\u00e9ment, au cas o\u00f9 vous auriez besoin d'une autre taille, d'un autre recadrage ou d'une variante \u00e0 plus haute r\u00e9solution par la suite.<\/p>\n\n\n\n
La version Web est une \u00e9dition optimis\u00e9e pour un usage sp\u00e9cifique \u2013 pas n\u00e9cessairement l'original de vos archives.<\/p>\n\n\n\n
Ne pas compresser les images inutilement plusieurs fois<\/h2>\n\n\n\n
Avec les formats avec pertes, l'ouverture, la modification et la compression excessive r\u00e9p\u00e9t\u00e9es peuvent d\u00e9grader progressivement la qualit\u00e9 de l'image.<\/p>\n\n\n\n
Par cons\u00e9quent, g\u00e9n\u00e9rez de nouvelles versions web si possible \u00e0 partir d'un fichier source de haute qualit\u00e9.<\/p>\n\n\n\n
G\u00e9n\u00e9rer une version web\n\nmieux que :\n\nfichier d\u00e9j\u00e0 fortement compress\u00e9\n   \u2193\ncompresser \u00e0 nouveau\n   \u2193\ncompresser \u00e0 nouveau<\/code><\/pre>\n\n\n\n
Optimiser les captures d'\u00e9cran pour les manuels<\/h2>\n\n\n\n
Pour les captures d'\u00e9cran, il est surtout important que les \u00e9l\u00e9ments de commande pertinents et les textes restent bien lisibles.<\/p>\n\n\n\n
D\u00e9coupe les zones inutiles avant de r\u00e9duire la capture d'\u00e9cran.<\/p>\n\n\n\n
Une capture cibl\u00e9e est souvent plus utile et plus petite qu'un \u00e9cran complet sur lequel la zone pertinente est \u00e0 peine reconnaissable.<\/p>\n\n\n\n
Veillez \u00e9galement \u00e0 ne pas publier par inadvertance d'informations confidentielles, de donn\u00e9es clients, d'identifiants de connexion ou d'autres contenus sensibles dans la capture d'\u00e9cran.<\/p>\n\n\n\n
Accorder une attention particuli\u00e8re aux images principales<\/h2>\n\n\n\n
Les grandes images situ\u00e9es dans la partie sup\u00e9rieure visible d'une page m\u00e9ritent une attention particuli\u00e8re.<\/p>\n\n\n\n
Ils peuvent occuper une part importante de la zone visible et \u00eatre n\u00e9cessaires d\u00e8s le chargement de la page.<\/p>\n\n\n\n
Ici, vous devez peser particuli\u00e8rement soigneusement le pour et le contre entre la qualit\u00e9 d'image, les dimensions et la taille du fichier.<\/p>\n\n\n\n
Il n'est pas forc\u00e9ment optimal de simplement compresser une telle image de mani\u00e8re extr\u00eame ou d'en retarder le chargement de fa\u00e7on syst\u00e9matique.<\/p>\n\n\n\n
N'oubliez pas les fonds d'\u00e9cran<\/h2>\n\n\n\n
Les images ne peuvent pas seulement \u00eatre int\u00e9gr\u00e9es via un \u00e9l\u00e9ment d'image HTML normal.<\/p>\n\n\n\n
Les images d'arri\u00e8re-plan CSS peuvent \u00e9galement g\u00e9n\u00e9rer de grands volumes de donn\u00e9es.<\/p>\n\n\n\n
Par cons\u00e9quent, si un outil d'analyse indique un transfert d'images important, vous devez \u00e9galement prendre en compte les graphiques d'arri\u00e8re-plan, les curseurs et d'autres \u00e9l\u00e9ments visuels.<\/p>\n\n\n\n
Les curseurs peuvent charger plusieurs grandes images<\/h2>\n\n\n\n
Un curseur peut contenir plusieurs images grand format. Selon sa mise en \u0153uvre technique, cela peut entra\u00eener le chargement de plusieurs fichiers d\u00e8s le chargement de la page.<\/p>\n\n\n\n
V\u00e9rifiez par cons\u00e9quent si toutes les images du slider utilis\u00e9es sont r\u00e9ellement n\u00e9cessaires et optimis\u00e9es de mani\u00e8re judicieuse.<\/p>\n\n\n\n
Plus d'images ne signifie pas automatiquement un meilleur site web.<\/p>\n\n\n\n
Optimisation des images pour les boutiques en ligne<\/h2>\n\n\n\n
Sur une boutique en ligne, les images de produits peuvent repr\u00e9senter une part consid\u00e9rable des donn\u00e9es transf\u00e9r\u00e9es.<\/p>\n\n\n\n
En m\u00eame temps, les clients doivent pouvoir \u00e9valuer les produits avec suffisamment de d\u00e9tails.<\/p>\n\n\n\n
Une compression excessive peut donc s'av\u00e9rer aussi probl\u00e9matique que des fichiers originaux inutilement volumineux.<\/p>\n\n\n\n
Un flux de travail coh\u00e9rent en mati\u00e8re de dimensions, de format et de qualit\u00e9 est particuli\u00e8rement utile, en particulier pour un grand nombre de produits.<\/p>\n\n\n\n
Optimisation d'images pour les blogs et les guides<\/h2>\n\n\n\n
Dans le cas d'articles plus longs, de nombreuses images individuelles peuvent s'additionner pour atteindre une taille totale consid\u00e9rable.<\/p>\n\n\n\n
Cela concerne par exemple les instructions \u00e9tape par \u00e9tape avec de nombreuses captures d'\u00e9cran.<\/p>\n\n\n\n
Ici, il vaut la peine de rogner chaque capture d'\u00e9cran sur la zone r\u00e9ellement pertinente et d'utiliser une version Web adapt\u00e9e.<\/p>\n\n\n\n
Comparer avant et apr\u00e8s<\/h2>\n\n\n\n
Pour les images importantes, vous pouvez comparer la version originale et la version optimis\u00e9e.<\/p>\n\n\n\n
Exemple :<\/p>\n\n\n\n
4000 \u00d7 2667 pixels\n4,8 Mo\n\nVersion web :\ndimensions adapt\u00e9es\nformat efficace\n420 Ko\n\nqualit\u00e9 visible :\ncomparable pour l'utilisation pr\u00e9vue<\/code><\/pre>\n\n\n\n
Les chiffres ne sont qu'un exemple. Ce qui compte, ce n'est pas une valeur cible sp\u00e9cifique, mais si le fichier optimis\u00e9 remplit son r\u00f4le avec un volume de donn\u00e9es nettement plus efficace.<\/p>\n\n\n\n
Tester le site web apr\u00e8s l'optimisation des images<\/h2>\n\n\n\n
Apr\u00e8s des modifications, vous devriez effectivement visiter et v\u00e9rifier le site web.<\/p>\n\n\n\n
V\u00e9rifie en particulier :<\/p>\n\n\n\n
Qualit\u00e9 d'image\ncadrage correct\nAffichage sur ordinateur\nAffichage sur smartphone\nGaleries et curseurs\nLiens vers les images\nD\u00e9calages de mise en page\nComportement de chargement<\/code><\/pre>\n\n\n\n
Un fichier techniquement plus petit n'offre aucun avantage si, par exemple, la mauvaise partie est affich\u00e9e ensuite ou si des d\u00e9tails importants ne sont presque plus reconnaissables.<\/p>\n\n\n\n
Erreurs fr\u00e9quentes dans l'optimisation des images<\/h2>\n\n\n\n
Les probl\u00e8mes typiques comprennent :<\/p>\n\n\n\n
T\u00e9l\u00e9charger les photos originales directement depuis le smartphone\ndimensions de pixels \u00e9normes pour de petits affichages\nenregistrer inutilement des photos sous forme de grands fichiers PNG\ncompresser les images de mani\u00e8re excessive\nutiliser la m\u00eame valeur de qualit\u00e9 pour chaque image\nconserver des noms de fichiers tels que IMG_12345\nsurcharger les textes alternatifs de mots-cl\u00e9s\nappliquer syst\u00e9matiquement le chargement diff\u00e9r\u00e9 (lazy load) \u00e0 chaque image\nrepr\u00e9senter le texte exclusivement sous forme d'image\nn\u00e9gliger les grands images d'arri\u00e8re-plan\nsupprimer les fichiers originaux apr\u00e8s l'optimisation<\/code><\/pre>\n\n\n\n
Flux de travail pratique pour les nouvelles images de sites web<\/h2>\n\n\n\n
S\u00e9lectionner l'image\n        \u2193\nD\u00e9terminer l'utilisation pr\u00e9vue\n        \u2193\nD\u00e9finir les dimensions appropri\u00e9es\n        \u2193\nChoisir le format adapt\u00e9\n        \u2193\nCompresser de mani\u00e8re judicieuse\n        \u2193\nContr\u00f4ler la qualit\u00e9\n        \u2193\nAttribuer un nom de fichier explicite\n        \u2193\nT\u00e9l\u00e9charger sur le site web\n        \u2193\nD\u00e9finir le texte alternatif selon le contexte\n        \u2193\nV\u00e9rifier sur ordinateur et smartphone\n        \u2193\nContr\u00f4ler le comportement de chargement<\/code><\/pre>\n\n\n\n
Optimiser un site Web existant avec de nombreuses images<\/h2>\n\n\n\n
Si ton site web contient d\u00e9j\u00e0 de nombreuses images, tu ne dois pas n\u00e9cessairement traiter chaque fichier en m\u00eame temps sans priorit\u00e9.<\/p>\n\n\n\n
Commencez par les pages et les images qui offrent le plus d'avantages potentiels.<\/p>\n\n\n\n
Il peut s'agir, par exemple, de pages fr\u00e9quemment visit\u00e9es, d'images hero particuli\u00e8rement grandes ou de pages g\u00e9n\u00e9rant un volume de donn\u00e9es transf\u00e9r\u00e9es anormalement \u00e9lev\u00e9.<\/p>\n\n\n\n
Une mesure du site web peut aider \u00e0 identifier les v\u00e9ritables points probl\u00e9matiques.<\/p>\n\n\n\n
Si le site web reste lent malgr\u00e9 des images optimis\u00e9es<\/h2>\n\n\n\n
Les images ne constituent qu'un facteur potentiel parmi d'autres pour le temps de chargement.<\/p>\n\n\n\n
Un site Web peut \u00eatre lent malgr\u00e9 des images bien optimis\u00e9es si, par exemple, d'autres ressources, des services externes, JavaScript, des acc\u00e8s \u00e0 la base de donn\u00e9es ou l'application elle-m\u00eame posent des probl\u00e8mes.<\/p>\n\n\n\n
Nous aborderons le d\u00e9pannage syst\u00e9matique plus tard sous Site web lent : identifier les causes de mani\u00e8re syst\u00e9matique<\/a>.<\/p>\n\n\n\n
\n
Important :<\/strong> L'optimisation des images est un \u00e9l\u00e9ment important de la performance d'un site web, mais ce n'est pas la solution universelle \u00e0 tous les probl\u00e8mes de temps de chargement.<\/p>\n<\/blockquote>\n\n\n\n
Checkliste zur Bildoptimierung<\/h2>\n\n\n\n
Passt das Bild zum Inhalt?\n        \u2193\nSind die Abmessungen sinnvoll?\n        \u2193\nIst das Format geeignet?\n        \u2193\nIst die Kompression angemessen?\n        \u2193\nBleibt die Qualit\u00e4t ausreichend?\n        \u2193\nIst der Dateiname verst\u00e4ndlich?\n        \u2193\nIst ein sinnvoller Alt-Text vorhanden?\n        \u2193\nSind unn\u00f6tige Metadaten gepr\u00fcft?\n        \u2193\nFunktioniert das Bild responsiv?\n        \u2193\nIst Lazy Loading sinnvoll eingesetzt?\n        \u2193\nDesktop und Smartphone getestet?\n        \u2193\nLadeverhalten kontrolliert?<\/code><\/pre>\n\n\n\n
R\u00e9sum\u00e9<\/h2>\n\n\n\n
Gut optimierte Bilder k\u00f6nnen die \u00fcbertragene Datenmenge einer Website erheblich reduzieren und dadurch zu einer besseren Ladeperformance beitragen.<\/p>\n\n\n\n
Entscheidend sind dabei nicht nur die Dateigr\u00f6\u00dfe, sondern auch passende Pixelabmessungen, ein geeignetes Bildformat und eine sinnvolle Kompression.<\/p>\n\n\n\n
JPEG, PNG, WebP, AVIF und SVG besitzen unterschiedliche Eigenschaften. Das richtige Format h\u00e4ngt deshalb vom jeweiligen Bild und seinem Einsatzzweck ab.<\/p>\n\n\n\n
F\u00fcr SEO und Barrierefreiheit solltest du au\u00dferdem verst\u00e4ndliche Dateinamen, sinnvolle Alternativtexte und einen passenden inhaltlichen Kontext ber\u00fccksichtigen.<\/p>\n\n\n\n
Techniken wie responsive Bilder und Lazy Loading k\u00f6nnen die Auslieferung zus\u00e4tzlich optimieren, sollten aber nicht ohne R\u00fccksicht auf den konkreten Einsatzzweck angewendet werden.<\/p>\n\n\n\n
Die beste Bildoptimierung reduziert nicht einfach nur Kilobytes. Sie liefert dem Besucher die ben\u00f6tigte Bildqualit\u00e4t mit m\u00f6glichst wenig unn\u00f6tigen Daten.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"
Bilder geh\u00f6ren auf vielen Websites zu den gr\u00f6\u00dften \u00fcbertragenen Dateien. Werden Fotos und Grafiken ohne Optimierung hochgeladen, k\u00f6nnen einzelne Bilder mehrere Megabyte gro\u00df sein und die Ladezeit einer Seite unn\u00f6tig erh\u00f6hen. Gute Bildoptimierung bedeutet jedoch nicht, Bilder einfach m\u00f6glichst stark zu komprimieren. Entscheidend ist ein sinnvoller Kompromiss zwischen Bildqualit\u00e4t, Abmessungen, Dateigr\u00f6\u00dfe und dem verwendeten Dateiformat. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"doc_category":[85],"doc_tag":[],"class_list":["post-22879","docs","type-docs","status-publish","hentry","doc_category-seo-monitoring"],"year_month":"2026-09","word_count":3422,"total_views":"7","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Silvio Mazenauer","author_nicename":"admin-curia","author_url":"https:\/\/www.curiaweb.ch\/fr\/author\/admin-curia\/"},"doc_category_info":[{"term_name":"SEO & Monitoring","term_url":"https:\/\/www.curiaweb.ch\/fr\/hilfe-kategorie\/seo-monitoring\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs\/22879","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/comments?post=22879"}],"version-history":[{"count":4,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs\/22879\/revisions"}],"predecessor-version":[{"id":22888,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs\/22879\/revisions\/22888"}],"wp:attachment":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/media?parent=22879"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/doc_category?post=22879"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/doc_tag?post=22879"}],"curies":[{"name":"Bien jou\u00e9","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}