Images

Les images comptent pour beaucoup dans l'impression que laisse un site, et représentent souvent une grande part de son poids. Cette rubrique répond aux questions pratiques dans l'ordre où elles se posent : quelles images mettre sur votre site, où trouver des images que vous avez le droit d'utiliser ou comment les prendre vous-même, quel format choisir (JPG, PNG, GIF, WebP, SVG), comment les créer ou les retoucher dans Photoshop ou Figma, comment agrandir une image trop petite avec l'IA, et comment éviter qu'elles ralentissent un site WordPress.

Pour démarrer, lisez Quelles images mettre dans votre site Web ?, puis où trouver des images gratuites sans tomber dans les pièges du droit d'auteur.

Les pages de la rubrique suivent le parcours d'une image, de l'idée jusqu'à la mise en ligne, en trois étapes :

• Choisir et trouver : Quelles images mettre dans votre site Web ? pour savoir quoi montrer sur chaque page, Trouver des images gratuites sur Internet pour les banques d'images et les licences, Prendre des photos pour votre site Web pour réussir vos propres photos avec un smartphone.

• Créer et retoucher : Créer et modifier des images dans Photoshop, Créer et modifier des images dans Figma (avec l'offre gratuite), et Upscale une image pour agrandir une image trop petite grâce à l'IA.

• Préparer pour le Web : Les formats d'images sur le Web (JPG, PNG, GIF, WebP, AVIF, SVG), Les formats d'images dans WordPress (ce que la médiathèque accepte et les tailles qu'elle génère) et Optimiser des images dans WordPress pour alléger un site.

• Vous créez ou refaites votre site : commencez par Quelles images mettre dans votre site Web ?, dressez la liste des photos à prendre, puis suivez Prendre des photos pour votre site Web.

• Il vous faut une image pour un article ou une page : piochez dans les banques d'images gratuites en vérifiant la licence, ou créez-la avec l'IA (voir Créer des images avec l'IA dans la rubrique IA).

• Votre image est trop petite ou floue : voir Upscale une image.

• Vous voulez détourer un produit ou effacer un objet : voir Enlever le fond d'une image et les tutoriels Photoshop.

• Vous hésitez entre JPG, PNG et WebP : la règle et le tableau récapitulatif sont dans Les formats d'images sur le Web.

• WordPress refuse votre fichier (SVG, AVIF, photo d'iPhone en HEIC) : la réponse est dans Les formats d'images dans WordPress.

• Votre site est lent : commencez par Optimiser des images dans WordPress.

Cinq notions reviennent dans toutes les pages de la rubrique.

Une image trouvée sur Internet n'est pas libre pour autant : son auteur garde ses droits, sauf si une licence autorise votre usage (la licence CC0, par exemple, permet un usage commercial sans citer l'auteur). Une personne reconnaissable a en plus un droit sur son image : la CNIL rappelle qu'il faut en principe son accord avant de publier sa photo en ligne, et celui des parents pour un mineur. Les licences et les pièges à éviter sont détaillés dans Trouver des images gratuites sur Internet.

À l'écran, seules les dimensions en pixels comptent ; la résolution en « pixels par pouce » ne sert qu'à l'impression. Préparez chaque image à la taille où elle sera affichée, deux fois plus grande au maximum pour les écrans haute densité. WordPress réduit d'ailleurs automatiquement, depuis sa version 5.3, toute image de plus de 2 560 pixels de large ou de haut, tout en gardant l'original sur le serveur (annonce de WordPress 5.3) : envoyer une photo de 6 000 pixels n'apporte donc rien.

Chaque format a son usage : JPG pour les photos, PNG pour les captures d'écran et la transparence, SVG pour les logos et les icônes. La documentation MDN sur les formats d'images (mise à jour en octobre 2026) recommande de privilégier WebP ou AVIF pour les images en pixels, car ils compressent en général mieux que JPG, PNG et GIF.

Selon le Web Almanac 2025 de HTTP Archive (publié en janvier 2026), les images sont le type de fichier qui pèse le plus lourd sur les pages d'accueil, devant le JavaScript et les polices : 911 Ko d'images pour une page d'accueil médiane sur mobile, qui pèse 2,56 Mo au total. Alléger ses images est donc souvent le moyen le plus simple d'accélérer un site.

Le texte alternatif (attribut alt) décrit l'image pour les personnes qui utilisent un lecteur d'écran et pour les moteurs de recherche. Dans ses recommandations pour les images, Google le présente comme l'information la plus importante pour comprendre une image et demande un texte précis et utile, pas une liste de mots-clés ; un nom de fichier court et descriptif (atelier-poterie-lyon.jpg plutôt que IMG_0423.jpg) aide aussi, un peu. La méthode dans WordPress est expliquée dans Les images dans WordPress.

Pas besoin d'un logiciel coûteux pour les images d'un site. Figma fonctionne dans le navigateur et propose une offre gratuite, Starter ; Affinity est gratuit pour les particuliers ; Photoshop reste l'outil de référence, sur abonnement. Avis et comparatifs : la liste des logiciels et outils de design.

• Vidéos : la rubrique voisine, pour les vidéos de votre site.

• Branding : logo, couleurs et charte graphique, pour des images cohérentes avec votre identité.

• Les médias dans WordPress : la médiathèque dans son ensemble.

• Les membres de la formation WordPress trouvent un module entier consacré aux médias : le module 7 (médiathèque, éditeur d'image, galeries).