Date de révision : 17 octobre 2026
L’exportation web Photoshop permet d’adapter les images aux sites internet. Le WebP, le JPEG, le PNG et le GIF répondent à différents besoins.
À retenir
- Le WebP constitue un premier choix pertinent pour les photographies et de nombreux visuels destinés au web.
- Le WebP prend en charge la compression avec perte, sans perte, la transparence et l’animation.
- Photoshop prend en charge nativement le WebP depuis la version 23.2.
- La commande « Enregistrer une copie » permet de sauvegarder directement un fichier WebP.
- Le JPEG convient aux photographies sans transparence, notamment pour certains besoins de compatibilité.
- Le PNG reste pertinent pour les graphiques exigeant une conservation exacte des pixels.
- La qualité visuelle, les dimensions et le poids final doivent guider le choix du format.
Pourquoi choisir WebP pour une exportation web ?
Le WebP est un format d’image développé par Google pour optimiser la diffusion des visuels sur internet. Il combine compression efficace, richesse des couleurs et prise en charge de la transparence. Cette polyvalence répond aux besoins des sites WordPress, boutiques en ligne et pages éditoriales.
Qu’est-ce que le format WebP ?
Le WebP est un format d’image matricielle destiné à la diffusion numérique.
Il propose deux méthodes de compression, avec perte et sans perte. Il accepte également un canal alpha pour gérer la transparence.
Le WebP convient aux photographies, aux illustrations, aux images de produits et à différents éléments graphiques.
Son extension est .webp et son type MIME est image/webp.
Le format a été annoncé par Google en septembre 2010. Sa prise en charge s’est ensuite étendue aux principaux navigateurs modernes.
Source : Google for Developers, présentation du WebP.
Quels avantages offre le WebP face au JPEG et au PNG ?
Le principal avantage du WebP concerne l’efficacité de sa compression.
Selon les comparaisons techniques publiées par Google :
- Le WebP sans perte produit des fichiers environ 26 % plus petits que les PNG étudiés.
- Le WebP avec perte produit des fichiers 25 à 34 % plus petits que les JPEG comparables.
- Le WebP accepte la transparence avec les deux méthodes de compression.
Ces résultats proviennent de comparaisons techniques à qualité comparable. Ils ne représentent pas un gain systématique sur chaque photographie.
Google for Developers | Un format d’image pour le Web
Le résultat dépend du contenu visuel, de la résolution et des paramètres d’encodage.
Le WebP est-il toujours le meilleur format pour internet ?
Le WebP constitue un choix prioritaire pour de nombreux contenus web, mais il ne gagne pas systématiquement toutes les comparaisons.
Une photographie déjà très compressée peut produire un gain limité. Un pictogramme simple peut également occuper moins de place dans un autre format adapté.
Le PNG reste intéressant lorsqu’une restitution exacte est nécessaire. Le JPEG conserve un intérêt pour les logiciels et les chaînes de diffusion plus anciens.
Le choix doit donc reposer sur une comparaison des fichiers produits.
Le WebP améliore-t-il le référencement Google ?
Le WebP peut réduire le volume des images téléchargées. Cette réduction peut contribuer à accélérer le chargement d’une page.
Une image plus légère peut notamment réduire le temps nécessaire au téléchargement de la ressource principale.
Le format WebP ne garantit pourtant aucun gain direct de positionnement.
Google évalue plusieurs signaux, dont la pertinence du contenu et l’expérience de page. La performance dépend aussi du serveur, du HTML, du CSS et du chargement des ressources.
Un fichier WebP très volumineux peut ralentir une page davantage qu’un JPEG correctement optimisé.
Comment enregistrer une image WebP dans Photoshop ?
Adobe Photoshop prend en charge nativement le WebP depuis la version 23.2, publiée en 2022. Cette fonction permet d’ouvrir et de sauvegarder des images WebP sans extension supplémentaire. La documentation Adobe distingue cet enregistrement des commandes classiques d’exportation web.
Vérifier le mode colorimétrique et la profondeur de couleur
L’enregistrement WebP natif de Photoshop fonctionne avec les documents RVB en 8 bits par couche.
Avant la sauvegarde, vérifier les paramètres du document :
- Ouvrir le document dans Photoshop.
- Accéder au menu Image > Mode.
- Sélectionner Couleurs RVB si nécessaire.
- Vérifier que l’option 8 bits/couche est active.
- Conserver le fichier de travail au format PSD avant toute conversion susceptible de modifier les données.
Une image CMJN ou un document 16 bits/couche peut nécessiter une conversion préalable. Cette conversion doit être contrôlée pour éviter des différences de couleur ou une perte de précision.
Enregistrer une copie au format WebP
La procédure officielle Adobe comporte plusieurs étapes.
Étape 1. Préparer le document
Vérifier les dimensions, le mode RVB et la profondeur de 8 bits/couche.
Étape 2. Ouvrir Enregistrer une copie
Dans Photoshop, sélectionner Fichier > Enregistrer une copie.
Étape 3. Choisir WebP
Sélectionner WebP dans le menu Format, nommer le fichier et valider.
Étape 4. Régler la compression
Choisir Avec perte ou Sans perte, puis ajuster la qualité si la compression avec perte est retenue.
Étape 5. Contrôler le fichier
Valider les options, rouvrir le fichier WebP et vérifier son rendu et son poids.
La commande « Enregistrer sous » peut également présenter WebP lorsque Photoshop peut préserver correctement les données du document.
Pour conserver les calques et les réglages du travail original, la sauvegarde du PSD reste prioritaire.
Source : Adobe, prise en charge native du format WebP.
Quelles options propose la fenêtre WebP ?
La fenêtre d’enregistrement WebP permet de sélectionner plusieurs paramètres.
Compression avec perte : Photoshop supprime certaines informations visuelles pour réduire le poids du fichier.
Compression sans perte : Photoshop conserve les valeurs des pixels après décompression.
Qualité : le curseur détermine le compromis entre fidélité visuelle et taille du fichier lorsque la compression avec perte est active.
Métadonnées XMP : elles peuvent conserver des informations descriptives associées au document.
Métadonnées EXIF : elles peuvent contenir des informations techniques, comme les caractéristiques de prise de vue.
Extras Photoshop : cette option peut intégrer des données supplémentaires propres au logiciel.
Ces réglages influencent la taille du fichier final. Leur présence dépend des options disponibles dans la version du logiciel.
Pourquoi WebP n’apparaît-il pas dans les formats d’exportation ?
La prise en charge native du WebP ne signifie pas que ce format figure dans toutes les fenêtres d’exportation de Photoshop.
Adobe documente l’enregistrement WebP par la commande « Enregistrer une copie ».
La fonction « Exporter sous » propose notamment PNG, JPEG, GIF et SVG selon la configuration et le type de ressource.
La fonction « Enregistrer pour le Web », dite héritée, propose notamment JPEG, PNG et GIF. Elle ne constitue donc pas la procédure native recommandée pour sauvegarder un WebP.
Il faut distinguer le format pris en charge par Photoshop du format proposé par chaque commande.
Sources :
HelpX Adobe | Enregistrer et ouvrir des fichiers WebP dans Photoshop
HelpX Adobe | Enregistrement pour le Web
HelpX Adobe | Paramètres d’exportation et préférences d’emplacement d’exportation
Comment optimiser la qualité et le poids d’un fichier WebP ?
L’optimisation d’une image WebP repose sur trois paramètres : la résolution, la méthode de compression et la qualité visuelle. Photoshop permet de contrôler ces éléments avant la sauvegarde. Le bon réglage dépend du contenu, de l’affichage prévu et des détails à préserver.
Choisir entre WebP avec perte et WebP sans perte
Le WebP avec perte convient aux photographies, aux portraits et aux visuels comportant des textures naturelles.
L’encodeur supprime certaines informations pour réduire le fichier. Ces modifications peuvent provoquer des artefacts dans les zones détaillées.
Le WebP sans perte conserve exactement les valeurs des pixels de l’image fournie à l’encodeur. Il convient aux captures d’écran, illustrations et schémas dont les détails doivent rester nets.
Cette conservation concerne les pixels exportés. Elle ne rétablit aucune information supprimée lors d’une conversion antérieure.
Quel niveau de qualité choisir pour un WebP ?
Le curseur de qualité influence le volume du fichier lors d’une compression avec perte.
Une valeur élevée préserve davantage de détails, mais produit habituellement un fichier plus volumineux.
Le choix doit suivre une comparaison visuelle.
Voici des valeurs de départ pour effectuer des essais, et non des réglages universels.
| Type d’image | Compression | Qualité de départ |
|---|---|---|
| Photographie éditoriale | Avec perte | 75 à 85 |
| Image de produit | Avec perte | 80 à 90 |
| Bannière photographique | Avec perte | 70 à 85 |
| Capture d’écran avec texte | Sans perte | Sans objet |
| Logo matriciel | Sans perte | Sans objet |
| Illustration avec aplats | Sans perte | Sans objet |
Ce tableau présente six types d’images, la méthode de compression WebP recommandée et les valeurs de qualité à tester. Les valeurs sont indicatives et doivent être adaptées au rendu visuel et au poids du fichier.
Les valeurs dépendent du curseur proposé par l’encodeur. Elles ne garantissent aucun poids final.
Une photographie très détaillée peut nécessiter une qualité supérieure. Une image peu texturée peut supporter davantage de compression.
Comment réduire les dimensions d’une image avant l’enregistrement ?
La réduction des dimensions peut économiser davantage de données qu’un réglage de qualité isolé.
Une image de 2400 × 1600 pixels contient 3 840 000 pixels. Une version de 1200 × 800 pixels en contient 960 000.
La seconde image contient donc quatre fois moins de pixels.
Cette différence ne signifie pas automatiquement un fichier quatre fois plus léger. Le poids dépend également du format et de l’encodage.
Dans Photoshop :
- Ouvrir Image > Taille de l’image.
- Vérifier les dimensions actuelles.
- Activer le rééchantillonnage si la taille en pixels doit changer.
- Définir la largeur et la hauteur adaptées à l’affichage.
- Choisir une méthode de rééchantillonnage adaptée.
- Vérifier la netteté après réduction.
- Enregistrer une copie WebP.
Pour les écrans haute densité, prévoir une définition adaptée à l’affichage réel. Par exemple, un visuel affiché sur 600 pixels CSS peut nécessiter une ressource de 1200 pixels physiques. Cette valeur dépend de la densité de l’écran et de la stratégie responsive du site.
Le profil sRGB est-il recommandé pour les images web ?
Le profil sRGB constitue une référence pratique pour les images destinées à une large diffusion web. Il facilite une représentation cohérente des couleurs entre de nombreux logiciels et appareils.
Photoshop propose la conversion des profils dans Édition > Convertir en profil.
Cette opération diffère de l’attribution d’un profil. Une conversion adapte les valeurs colorimétriques pour préserver au mieux l’apparence. Les images nécessitant une gestion colorimétrique particulière peuvent conserver un autre espace adapté à leur chaîne de diffusion.
Faut-il conserver les métadonnées EXIF et XMP ?
Les métadonnées peuvent contenir des informations techniques, descriptives ou personnelles.
- EXIF peut notamment contenir la date de prise de vue, le modèle d’appareil ou des coordonnées GPS.
- XMP peut contenir des informations descriptives et des données de gestion documentaire.
Il faut sélectionner les données réellement nécessaires à la publication. Supprimer des métadonnées facultatives peut réduire légèrement le poids et limiter la diffusion d’informations non souhaitées. Les métadonnées ne remplacent jamais le nom descriptif du fichier, le texte alternatif ou le contexte HTML.
Quels formats choisir entre WebP, JPEG, PNG et GIF ?
Le choix du format dépend de la nature de l’image et des exigences de diffusion. Les photographies, captures d’écran, logos et animations présentent des besoins différents. WebP couvre plusieurs usages, mais JPEG, PNG et GIF conservent des caractéristiques utiles.
Comparaison de cinq formats d’images pour le web. Chaque ligne présente un critère et les caractéristiques correspondantes des formats WebP, JPEG, PNG-8, PNG-24 / 32 et GIF. Sur mobile, les lignes apparaissent sous forme de cartes. Deux critères supplémentaires sont disponibles dans le tableau complémentaire.
| Critère | WebP | JPEG | PNG-8 | PNG-24 / 32 | GIF |
|---|---|---|---|---|---|
| Compression | Avec ou sans perte | Avec perte | Sans perte | Sans perte | Sans perte |
| Couleurs | RVB, 8 bits par canal | Généralement RVB, 8 bits par canal | Palette de 256 couleurs maximum | RVB, 8 bits par canal | Palette de 256 couleurs maximum par image |
| Transparence | Canal alpha | Non | Transparence par palette, selon l’encodage | Canal alpha pour PNG-32 | Binaire : transparent ou opaque |
| Animation | Oui | Non | Non, pour PNG classique | Non, pour PNG classique | Oui |
| Photographies | Très adapté | Adapté | Peu adapté | Possible, souvent lourd | Peu adapté |
| Illustrations | Adapté | Selon le contenu | Adapté aux palettes limitées | Adapté | Selon le contenu |
Afficher les lignes supplémentaires
| Critère | WebP | JPEG | PNG-8 | PNG-24 / 32 | GIF |
|---|---|---|---|---|---|
| Captures d’écran | Adapté en compression sans perte | Risque d’artefacts | Selon le nombre de couleurs | Adapté | Selon le nombre de couleurs |
| Usage conseillé | Premier format à tester pour les images web | Photographies et compatibilité | Graphismes simples avec peu de couleurs | Graphismes précis, transparence et captures | Animations simples |
Le PNG standard se distingue de l’APNG, une variante qui prend en charge les animations.
Les possibilités de transparence du PNG-8 dépendent de l’encodage et du logiciel. Le GIF reste limité à une transparence binaire.
Source : MDN, types et formats de fichiers image.
JPEG : quel intérêt pour les photographies ?
JPEG signifie Joint Photographic Experts Group.
Le format JPEG convient aux photographies et aux images composées de nombreuses variations de couleurs. Sa compression avec perte réduit le poids du fichier en supprimant certaines informations.
Les versions JPEG courantes prennent en charge 8 bits par composante, soit 24 bits pour une image RVB. Cette représentation permet 16 777 216 combinaisons de couleurs.
Le JPEG traditionnel ne prend pas en charge la transparence.
Chaque nouvelle recompression avec perte peut introduire des dégradations supplémentaires. Elle ne provoque pas nécessairement une perte visible à chaque sauvegarde.
Le JPEG reste pertinent lorsqu’un logiciel ou un service ne prend pas en charge WebP.
PNG-8 : quand privilégier une palette limitée ?
PNG signifie Portable Network Graphics.
Le PNG-8 représente une image avec une palette indexée de 256 couleurs maximum. Cette profondeur de 8 bits concerne l’index de couleur du pixel. Elle ne signifie pas 8 bits pour chacune des trois composantes RVB. La palette du fichier peut contenir des couleurs définies avec 8 bits par composante.
Le PNG-8 convient aux pictogrammes matriciels, schémas simples et illustrations comprenant peu de teintes.
La compression PNG préserve les valeurs des pixels indexés. Le passage initial d’une image riche en couleurs vers 256 couleurs peut toutefois modifier son apparence.
Cette distinction sépare la réduction de palette de la compression du fichier.
PNG-24 et PNG-32 : comment fonctionne la transparence ?
Le PNG-24 représente les couleurs avec trois composantes de 8 bits.
Il offre donc 24 bits par pixel pour les composantes rouge, verte et bleue. Le PNG-32 ajoute habituellement 8 bits pour le canal alpha. Ce canal permet de représenter plusieurs niveaux d’opacité.
Une image peut ainsi comporter des ombres transparentes, des contours adoucis et des zones partiellement opaques.
Il faut distinguer les 24 bits de couleur du PNG-24 et les 32 bits du PNG-32 avec alpha.
La compression PNG est sans perte. Elle peut préserver exactement les pixels d’une illustration, mais le fichier obtenu peut être plus lourd qu’une alternative WebP.
GIF : un format encore pertinent pour l’animation ?
GIF signifie Graphics Interchange Format.
Le GIF stocke les couleurs dans une palette limitée. Il peut contenir plusieurs images successives pour former une animation.
Chaque image possède ses propres paramètres de durée et peut comporter une palette adaptée.
La transparence GIF est binaire. Un pixel est transparent ou opaque. Le GIF ne gère pas les niveaux intermédiaires d’opacité comme un canal alpha complet.
Sa compression LZW est sans perte sur les données indexées. La conversion préalable vers une palette limitée peut réduire la fidélité visuelle.
Pour une animation web, comparer GIF et WebP animé reste pertinent.
Photoshop peut produire des GIF animés. Le support natif du WebP statique ne doit pas être confondu avec un outil complet d’exportation WebP animé.
Et les formats AVIF et SVG ?
AVIF est un format matriciel moderne qui propose une compression efficace, avec ou sans perte. Il peut constituer une alternative intéressante au WebP. Le résultat dépend des images et de l’encodeur.
SVG signifie Scalable Vector Graphics. Ce format vectoriel décrit des formes géométriques plutôt qu’une grille fixe de pixels. Il convient aux logos, icônes et illustrations vectorielles. Photoshop n’est pas nécessairement le logiciel le plus adapté à leur production.
Pour un élément vectoriel, Adobe Illustrator peut être plus approprié.
Comment exporter les images depuis Photoshop ?
Photoshop propose plusieurs commandes d’enregistrement et d’exportation. Elles ne donnent pas toutes accès aux mêmes formats ni aux mêmes réglages. La sauvegarde native WebP, l’exportation rapide et la fonction héritée répondent à des besoins distincts.
Quelle différence entre Enregistrer sous et Exporter sous ?
« Enregistrer sous » ou « Enregistrer une copie » sauvegarde le document dans un format pris en charge.
« Exporter sous » produit un fichier destiné à un usage extérieur au document Photoshop.
Dans la pratique, les deux opérations peuvent produire des ressources destinées au web. La différence concerne principalement les commandes, les paramètres accessibles et la gestion du document source.
Pour le WebP natif, Adobe documente la commande « Enregistrer une copie« .
Pour les formats JPEG, PNG, GIF et SVG, Photoshop propose différentes possibilités d’exportation.
Comment exporter une image JPEG ou PNG ?
La fonction « Exporter sous » permet de préparer des ressources adaptées aux interfaces et aux contenus web.
La procédure comprend les opérations suivantes.
- Sélectionner Fichier > Exportation > Exporter sous.
- Choisir JPEG ou PNG.
- Régler les dimensions de sortie.
- Ajuster la qualité pour JPEG.
- Vérifier les options de transparence pour PNG.
- Contrôler l’apparence du résultat.
- Sélectionner la destination du fichier.
- Valider l’exportation.
Pour le JPEG, la qualité influence la compression.
Pour le PNG, Photoshop propose notamment des options liées à la transparence et à la réduction de la palette.
Les options exactes dépendent du contenu et de la version du logiciel.
Source : Adobe, paramètres de la commande Exporter sous.
À quoi sert Enregistrer pour le Web (hérité) ?
La commande « Enregistrer pour le Web » propose des réglages adaptés aux anciens workflows d’optimisation d’images.
Elle permet notamment de choisir JPEG, PNG ou GIF.
Les paramètres dépendent du format : qualité JPEG, palette indexée, transparence, dimensions et aperçu.
La procédure est la suivante.
- Ouvrir Fichier > Exportation > Enregistrer pour le Web (hérité).
- Sélectionner JPEG, PNG ou GIF.
- Définir les dimensions de sortie.
- Régler les paramètres propres au format.
- Vérifier l’aperçu et le poids annoncé.
- Enregistrer le fichier.
Cette commande reste utile pour les GIF et les images indexées.
Elle ne doit pas être présentée comme la commande officielle d’enregistrement WebP natif.
Quel format choisir pour exporter plusieurs éléments graphiques ?
Les plans de travail, calques et ressources d’interface peuvent nécessiter des exports séparés. Photoshop propose des commandes d’exportation adaptées à ces opérations. Le choix du format dépend ensuite de chaque ressource.
Une photographie peut être enregistrée en WebP, tandis qu’un graphique transparent peut être livré en PNG. Il convient de conserver une nomenclature cohérente entre les fichiers. Pour les productions répétitives, vérifier les options d’exportation groupée et les fonctions disponibles dans la version installée.
Quels réglages appliquer avant une publication web ?
Une image correctement compressée peut encore présenter des problèmes de diffusion. Une taille inadaptée, un mauvais profil colorimétrique ou un nom générique réduit la qualité de publication. La préparation du fichier doit donc précéder son intégration HTML ou WordPress.
Vérifier les dimensions d’affichage
Les dimensions d’une image doivent correspondre au contexte de diffusion. Une miniature de 300 pixels CSS ne nécessite pas automatiquement une source de 3000 pixels. Le choix dépend des écrans visés, du recadrage et des versions responsives disponibles.
Pour un visuel affiché en largeur variable, plusieurs fichiers peuvent répondre aux tailles d’écran. Le navigateur peut alors sélectionner une image adaptée. Cette méthode limite le téléchargement de ressources inutilement grandes sur les petits écrans.
Comprendre la résolution en pixels et les DPI
Pour une image web, les dimensions en pixels déterminent la quantité d’informations visuelles.
Les DPI (Dot Per Inch) ou PPP (Points Par Pouce) concernent une densité de points ou de pixels, particulièrement pertinente dans les workflows d’impression.
Modifier uniquement la valeur PPP d’un fichier sans changer ses dimensions en pixels ne réduit pas automatiquement son poids. Une image de 1200 × 800 pixels conserve cette grille de pixels, qu’une métadonnée indique 72 ou 300 PPP. Il faut donc intervenir sur les dimensions et sur l’encodage pour optimiser le téléchargement.
Adapter les images aux écrans haute densité
Un écran haute densité peut afficher plusieurs pixels physiques pour un pixel CSS.
Un fichier de 1200 pixels de largeur peut ainsi alimenter un emplacement de 600 pixels CSS avec un rapport de densité de deux. Cette correspondance n’impose pas d’envoyer la plus grande ressource à tous les visiteurs.
Les attributs HTML srcset et sizes permettent de proposer plusieurs dimensions d’une même image. WordPress peut générer automatiquement des tailles intermédiaires lorsque sa configuration le permet.
Vérifier la netteté et les contours
La compression avec perte peut introduire des défauts dans les détails. Ces artefacts apparaissent notamment autour des lettres, des lignes fines et des transitions contrastées.
Après l’exportation, examiner les zones suivantes :
- Les contours du texte intégré dans l’image.
- Les transitions entre aplats colorés.
- Les ombres et les dégradés.
- Les détails photographiques.
- Les éléments transparents.
Si les défauts deviennent visibles, remonter la qualité ou tester WebP sans perte.
Comment nommer un fichier image pour le SEO ?
Un nom descriptif facilite l’identification d’une image. Le nom doit refléter son contenu réel, sans répétition artificielle de mots-clés.
Par exemple, photoshop-options-enregistrement-webp.webp décrit une capture de la fenêtre WebP de Photoshop.
Un nom comme image-final-03.webp apporte moins d’informations.
Le nom du fichier reste un signal limité. Il ne remplace pas le contenu de la page ni un texte alternatif adapté.
Comment comparer la qualité et le poids des images ?
Une comparaison fiable nécessite le même visuel, les mêmes dimensions et des conditions définies. Chaque format possède ses propres méthodes de compression. Il faut donc comparer les résultats obtenus plutôt que supposer qu’un format produit systématiquement le fichier le plus léger.
Méthode pour réaliser un test comparatif
Commencer par ouvrir une image originale de qualité suffisante.
Préparer ensuite trois sorties aux mêmes dimensions :
- Une version WebP avec perte.
- Une version JPEG avec perte.
- Une version PNG sans perte.
Ajouter une quatrième version WebP sans perte pour évaluer la restitution exacte.
Contrôler les dimensions, le profil de couleur, la transparence et les métadonnées.
Pour chaque export, relever le poids réel du fichier.
Comparer ensuite les résultats à l’échelle d’affichage prévue et, si nécessaire, avec un zoom à 100 %.
Exemple de comparaison à poids variable
Le tableau suivant illustre un protocole de test. Les résultats chiffrés sont fictifs et ne constituent pas des mesures effectuées sur Photoshop.
Comparaison illustrative de quatre exports d’une même image. Les tailles sont exprimées en kilo-octets. Les observations concernent la qualité visuelle et la conservation des pixels. Sur mobile, chaque export apparaît dans une carte.
| Export | Taille illustrative | Observation |
|---|---|---|
| JPEG, qualité moyenne | 180 Ko | Photographie lisible, quelques artefacts |
| WebP, qualité moyenne | 135 Ko | Rendu visuel proche |
| WebP, sans perte | 620 Ko | Pixels conservés |
| PNG, sans perte | 790 Ko | Pixels conservés |
Dans cet exemple fictif, le WebP avec perte représente un fichier 25 % plus léger que le JPEG. Ce résultat ne permet pas de généraliser à toutes les images. La qualité choisie dans deux encodeurs différents ne garantit pas une fidélité visuelle équivalente.
Comment calculer le gain de poids ?
Le gain relatif se calcule à partir de la taille initiale et de la taille obtenue.
Par exemple, un fichier passant de 200 Ko à 150 Ko présente une réduction de 25 %. Le résultat dépend des deux fichiers comparés. Il ne mesure pas directement leur fidélité visuelle.
Pourquoi les résultats diffèrent-ils selon les images ?
La compression dépend de la structure des pixels.
Une photographie avec de nombreuses textures contient des informations différentes d’un graphique composé de quelques aplats.
Une grande zone uniforme peut se compresser efficacement, tandis que des détails irréguliers peuvent demander davantage de données.
Le redimensionnement, les métadonnées et les paramètres d’encodage influencent également la taille finale. Les essais doivent donc couvrir plusieurs images représentatives des contenus du site.
Quelles erreurs éviter lors de l’exportation ?
Plusieurs confusions peuvent conduire à des recommandations techniques incorrectes. Elles concernent principalement les modes colorimétriques, la compression et les fonctions de Photoshop. Une méthode d’exportation fiable doit distinguer les capacités des formats de celles du logiciel.
Confondre profondeur de couleur et nombre de couleurs
Le PNG-8 comporte une palette de 256 entrées maximum.
Le PNG-24 représente les couleurs avec 24 bits par pixel, soit 8 bits pour chacune des trois composantes RVB.
Le PNG-32 ajoute généralement un canal alpha de 8 bits.
Dire que le PNG-24 possède 24 bits par canal constitue donc une erreur.
Considérer le WebP comme un format toujours sans perte
Le WebP propose deux méthodes de compression : La compression sans perte conserve les pixels de l’image encodée et la compression avec perte modifie certaines informations.
Qualifier tous les fichiers WebP de non destructifs est incorrect. Le choix dépend de l’option sélectionnée lors de la sauvegarde.
Confondre compression sans perte et conversion sans modification
Le GIF et le PNG-8 peuvent réduire le nombre de couleurs avant la compression. La méthode de compression conserve alors les valeurs indexées, mais la conversion préalable peut avoir supprimé des nuances. Il faut distinguer le traitement des couleurs de l’algorithme de compression.
Présenter la transparence GIF comme un canal alpha complet
Le GIF permet une transparence binaire. Le pixel concerné peut être transparent ou opaque. Cette limitation ne correspond pas au canal alpha du PNG-32 ou du WebP, qui gère plusieurs niveaux d’opacité.
Considérer la qualité maximale comme le meilleur réglage
Une valeur de qualité élevée peut accroître fortement le poids du fichier. L’amélioration visuelle n’est pas nécessairement perceptible à la taille réelle d’affichage. Il faut choisir le réglage qui conserve les détails nécessaires avec le poids le plus adapté.
Remplacer le fichier PSD par une image exportée
Le PSD reste le format de travail de Photoshop : il conserve notamment les calques, les masques et différents éléments modifiables.
Un WebP ou un JPEG sert principalement à la diffusion finale.
Il est préférable de conserver séparément le document de travail et les fichiers de publication.
Comment intégrer les images optimisées dans WordPress ?
WordPress prend en charge les images WebP depuis sa version 5.8, sous réserve des capacités de l’hébergement. L’intégration doit préserver la qualité de l’image et faciliter son indexation. Les attributs HTML, les dimensions et les performances doivent faire l’objet d’un contrôle après publication.
Importer une image WebP dans la médiathèque
Depuis le tableau de bord WordPress, ouvrir Médias > Ajouter un fichier média.
Sélectionner le fichier WebP et lancer l’importation.
Vérifier ensuite que WordPress accepte le fichier et génère les formats intermédiaires attendus.
La prise en charge dépend notamment de la configuration PHP et des bibliothèques graphiques disponibles sur le serveur. Une image acceptée à l’importation ne garantit pas la production automatique de toutes les tailles dérivées.
Renseigner correctement le texte alternatif
Le texte alternatif décrit le contenu ou la fonction de l’image.
Pour une capture montrant la fenêtre d’enregistrement WebP, un texte pertinent serait :
« Fenêtre Photoshop permettant de choisir la compression avec ou sans perte du format WebP.«
Ce texte explique le visuel sans accumulation de mots-clés.
Pour une image purement décorative, un texte alternatif vide peut être approprié.
Les recommandations de Google Search Central confirment l’intérêt des noms descriptifs, des images accessibles et des textes alternatifs pertinents.
Source : Google Search Central, bonnes pratiques pour les images.
Éviter les problèmes de chargement de l’image principale
L’image principale visible au chargement peut contribuer au Largest Contentful Paint, ou LCP. Le navigateur doit pouvoir identifier et télécharger cette ressource suffisamment tôt. Il faut notamment vérifier le poids du fichier, ses dimensions et ses conditions de chargement.
Une image importante ne devrait pas être chargée tardivement sans raison technique. Les images situées plus bas dans la page peuvent, selon leur rôle, bénéficier du chargement différé.
Le contrôle peut s’effectuer avec Google PageSpeed Insights.
Faut-il conserver une version JPEG ou PNG ?
Les principaux navigateurs actuels prennent largement en charge WebP. Une version de remplacement peut rester utile pour certaines applications, chaînes de traitement ou exigences de compatibilité.
L’élément HTML picture permet de proposer plusieurs sources. Il doit conserver un élément img avec un attribut src valide. Cette structure aide le navigateur à sélectionner la ressource qu’il peut afficher.
Synthèse : quel format d’image choisir dans Photoshop ?
Le WebP représente le premier format à tester pour la plupart des photographies et images matricielles publiées sur le web.
Pour les photographies, le WebP avec perte permet de rechercher un bon équilibre entre poids et qualité. Pour les graphiques sensibles aux artefacts, le WebP sans perte ou le PNG constitue une solution adaptée.
Le JPEG reste utile pour certains besoins de compatibilité. Le GIF conserve un intérêt pour les animations simples, même si des solutions plus efficaces existent.
L’exportation doit toujours se terminer par un contrôle visuel, une vérification du poids et un test sur la page publiée.
FAQ, glossaire et sources
FAQ : exportation web et formats Photoshop
1. Comment enregistrer une image en WebP avec Photoshop ?
Dans Photoshop 23.2 ou une version ultérieure, ouvrir un document RVB en 8 bits/couche. Sélectionner Fichier > Enregistrer une copie, puis choisir WebP. Régler la compression avec ou sans perte et valider l’enregistrement.
2. Pourquoi le format WebP n’apparaît-il pas dans Exporter sous ?
La prise en charge du WebP dépend de la commande Photoshop. Adobe documente son enregistrement natif par « Enregistrer une copie ». La commande « Exporter sous » propose d’autres formats. Il faut vérifier le mode RVB et la profondeur de couleur du document.
3. Le WebP offre-t-il une meilleure qualité que le JPEG ?
Le WebP peut fournir une qualité visuelle comparable avec un poids inférieur. Le résultat dépend des encodeurs et des réglages. Le WebP prend également en charge la transparence et la compression sans perte, contrairement au JPEG traditionnel.
4. Quelle différence existe-t-il entre WebP avec perte et sans perte ?
Le WebP avec perte supprime certaines informations pour réduire le fichier. Le WebP sans perte conserve exactement les pixels encodés. Le premier convient souvent aux photographies. Le second répond aux besoins des schémas, captures d’écran et graphiques précis.
5. Quel format choisir pour une image avec transparence ?
Le WebP et le PNG prennent en charge la transparence avec différents niveaux d’opacité. Le GIF possède une transparence binaire. Le choix dépend des contours, du poids final et des logiciels destinataires. Il faut comparer le rendu réel.
6. Le WebP améliore-t-il le classement d’un site sur Google ?
Le WebP peut réduire le poids des images et contribuer au chargement des pages. Son extension ne constitue pas une garantie de classement. La pertinence du contenu, l’indexation, les performances et les autres signaux SEO restent déterminants.
7. Quelle différence existe-t-il entre PNG-8, PNG-24 et PNG-32 ?
Le PNG-8 repose sur une palette indexée de 256 couleurs maximum. Le PNG-24 représente les couleurs avec 24 bits par pixel. Le PNG-32 ajoute généralement un canal alpha de 8 bits pour gérer différents niveaux de transparence.
8. Quelle résolution choisir pour une image destinée au web ?
La résolution dépend de la largeur d’affichage et de la densité de l’écran. Une image affichée sur 600 pixels CSS peut nécessiter 1200 pixels physiques sur un écran de densité deux. Les versions responsives limitent les téléchargements excessifs.
Glossaire des formats d’images et de l’exportation web
Glossaire des formats d’images et des techniques d’optimisation pour le web. Chaque ligne présente un terme et sa définition. Sur mobile, chaque terme apparaît dans une carte. Quatre termes supplémentaires sont accessibles dans le tableau complémentaire.
| Terme | Définition |
|---|---|
| WebP | Format matriciel destiné au web, prenant en charge la compression avec ou sans perte, la transparence et l’animation. |
| JPEG | Format de compression avec perte, particulièrement adapté aux photographies. |
| PNG | Format d’image à compression sans perte, adapté aux graphiques et à la transparence. |
| GIF | Format d’image indexée prenant en charge les animations et la transparence binaire. |
| Compression avec perte | Méthode qui réduit le poids d’un fichier en supprimant certaines informations de l’image. Ces informations ne peuvent pas être récupérées à partir du fichier compressé. |
| Compression sans perte | Méthode permettant de reconstituer exactement les données encodées, sans dégradation causée par la compression. |
Afficher les lignes supplémentaires
| Terme | Définition |
|---|---|
| Canal alpha | Composante d’une image contenant les informations d’opacité des pixels. Elle permet notamment de gérer différents niveaux de transparence. |
| Palette indexée | Table associant des indices numériques à un nombre limité de couleurs. Chaque pixel référence une couleur présente dans cette table. |
| Profil ICC | Ensemble de données décrivant les caractéristiques colorimétriques d’un espace ou d’un appareil. Il contribue à maintenir une restitution cohérente des couleurs. |
| Rééchantillonnage | Opération qui modifie le nombre de pixels d’une image et recalcule leurs valeurs selon une méthode d’interpolation ou de réduction. |
Sources de confiance
1. Adobe, prise en charge du format WebP dans Photoshop. Documentation officielle des procédures d’enregistrement et des options de compression.
2. Adobe, Enregistrer pour le Web. Description de la fonction héritée et des formats accessibles.
3. Google for Developers, présentation technique du WebP. Caractéristiques du format et comparaisons de compression.
4. MDN Web Docs, guide des formats d’image. Comparaison des formats, des compressions, des transparences et de la compatibilité.
5. Google Search Central, bonnes pratiques SEO pour les images. Indexation des images, textes alternatifs, noms de fichiers et ressources responsives.
6. Adobe, paramètres d’exportation Photoshop. Documentation de la commande Exporter sous.
7. Google, étude comparative de compression WebP. Données de référence sur les performances de compression.
