HTML 5 - 3.1 : Préparer les images pour le web
Bienvenue dans ce cours d'HTML5. Cette leçon explique comment préparer vos images pour le web en trois étapes : choisir le bon format, supprimer les métadonnées et compresser/redimensionner. Le choix du format dépend du type d'image. Pour les œuvres, cliparts, dessins et logos, préférez le SVG ou le PNG. Pour les photos, le format JPEG est recommandé. Pour les animations, optez pour le GIF. D'autres formats modernes sont disponibles : WebP, APNG, JP2 et GIFX.
Trois étapes pour optimiser une image
La première étape consiste à supprimer les métadonnées EXIF. Les photos prises avec un téléphone contiennent énormément d'informations : nom du fichier, taille, modèle du téléphone, résolution, et même la géolocalisation. Pour des raisons de confidentialité et pour alléger l'image, il est important de les supprimer. Rendez-vous sur le site exifremove.com, cliquez sur « Select File » pour sélectionner votre image, puis sur « Remove EXIF » : vous voyez la liste complète des données contenues. Cliquez sur « Download Clean » pour récupérer la photo nettoyée. Répétez l'opération pour chacune de vos images.
La deuxième étape est de redimensionner. Ne gardez jamais la résolution originale pour le web, car les images seraient trop lourdes et ralentiraient le chargement. Calculez plutôt la dimension en CSS pixels (sachant qu'environ 16 pixels correspondent à 1 cm). Il est recommandé de créer deux ou trois variantes par image. Sur le site picresize.com, chargez l'image, choisissez « Custom Size » et entrez la largeur souhaitée (par exemple 320, 600 ou 900 pixels). La hauteur se calcule automatiquement pour préserver le ratio. Format JPEG en bonne qualité, lancez la conversion et téléchargez. Faites de même pour les autres tailles et toutes vos images.
La troisième étape est la compression. Les utilisateurs naviguent souvent en 3G ou 4G : vos images doivent être les plus légères possible. Rendez-vous sur tinypng.com, glissez-déposez vos images (JPEG ou PNG, y compris votre logo en PNG). L'outil compresse automatiquement. Vous voyez le gain : pour la première image peut-être seulement 9 %, mais pour d'autres on peut atteindre 19 %, voire 60 % de réduction sur les logos. Téléchargez les images individuellement ou tout d'un coup via « Download All », puis remplacez les images originales dans votre dossier. Voilà pour la préparation des images pour le web !
En résumé
Ce cours explique les quatre étapes essentielles pour préparer des images destinées au web : choisir le format approprié selon le type de contenu (SVG/PNG pour logos, JPEG pour photos, GIF pour animations), supprimer les métadonnées sensibles (géolocalisation, modèle téléphone) via des outils spécialisés, redimensionner les images en CSS pixels adapté au design en créant plusieurs variantes de tailles, et compresser les fichiers finaux pour optimiser le chargement des pages.
Points clés
- Choix du format : SVG ou PNG pour logos/clip art, JPEG pour photos, GIF pour animations, avec alternatives WebP et JP2
- Suppression des métadonnées sensibles (géolocalisation, données téléphone) qui ralentissent les fichiers et posent des risques de confidentialité
- Redimensionnement en CSS pixels avec création de 2-3 variantes (320px, 600px, 900px) pour adapter l'image aux différents écrans et appareils
- Compression finale via outils dédiés pour réduire la taille (gains mesurés : 19% à 60% selon le format et l'image)
- Optimisation critique pour utilisateurs sur réseaux 3G/4G : des images légères garantissent un chargement rapide des pages
Questions fréquentes
Pourquoi doit-on supprimer les métadonnées des images avant de les mettre en ligne ?
Les photos contiennent des données sensibles : géolocalisation, modèle du téléphone, résolution, date de prise. Ces informations ne sont pas nécessaires pour l'affichage web et alourdissent les fichiers. Leur suppression améliore la confidentialité et réduit la taille des fichiers à télécharger.
Combien de variantes de tailles doit-on créer pour chaque image ?
Il est recommandé de créer 2 à 3 variantes pour chaque image (par exemple 320px, 600px et 900px). Cela permet d'adapter le poids et les dimensions de l'image au type d'appareil final (mobile, tablette, desktop).
Quel est l'impact de la compression d'images sur les performances web ?
La compression réduit significativement la taille des fichiers (gains de 19% à 60% selon le format et l'image), ce qui est essentiel pour le chargement rapide des pages, notamment pour les utilisateurs sur réseaux 3G ou 4G.