Optimisation des images pour le web sur Mac

Le site marketing passe bien tous les tests, à l’exception de la taille des images. Les bannières principales sont enregistrées en PNG avec une largeur de 2800 pixels, et les photos sont ajoutées en JPEG directement depuis l’appareil photo en résolution native. Le CDN met les fichiers en cache mais ne les réduit pas. Avant la publication, ajustez les dimensions des images à la maquette, choisissez le format adapté et réglez la qualité.

Pourquoi les images web semblent lentes

Les navigateurs chargent le poids total du fichier, même si le CSS réduit visuellement la zone d’affichage. Les fichiers sources volumineux dégradent le LCP, augmentent la consommation de données mobiles et atteignent les limites de chargement du CMS.

Commencez par la règle de taille d’affichage de l’article comment compresser les images sur Mac . Réduisez toujours la taille avant de convertir le format.

Choix du format pour le web

Choisissez le format en fonction du contenu et de la prise en charge par les navigateurs de votre pile technique.

Lisez l’article compression avec et sans perte : quelle différence avant d’enregistrer chaque photo sans perte. Pour les bannières, une réduction de taille suivie d’un WebP ou d’un JPEG avec perte et d’une qualité de 80 à 85 est généralement suffisante.

Pour passer du PNG au WebP, consultez l’article PNG vers WebP sur Mac . Conservez le JPEG de secours dans la balise <picture> ou dans la configuration de votre générateur de site statique.

Taille, qualité et diffusion adaptative

Exportez une largeur environ deux fois supérieure à celle de la colonne CSS pour les écrans à haute densité de pixels.

Recommandations de qualité après la réduction de taille :

• Bannières photo : WebP ou JPEG avec une qualité de 80 à 85
• Photos intégrées dans un blog : 75 à 82
• Captures d’écran avec du texte : vérifiez à l’échelle 100 %, privilégiez le PNG ou le WebP avec une qualité plus élevée

Les images adaptatives en HTML utilisent srcset avec plusieurs variantes de largeur. Générez les variantes 1x et 2x à partir d’un seul export fichier maître, si votre processus de build le permet.

Les recommandations Google pour les images dans la recherche conseillent d’utiliser des balises d’image standard, des variantes adaptatives avec un src de secours, des noms de fichiers explicites et un texte alternatif pertinent. La compression accélère le chargement, mais une structure accessible et une description précise restent nécessaires pour l’indexation.

Le chargement différé améliore la sensation de rapidité, mais ne réduit pas le volume total de données téléchargées si chaque visiteur fait défiler l’article jusqu’au bout. Les fichiers sources plus légers restent importants pour les limites de trafic mobile et les factures CDN, même si les images se chargent sous la zone visible.

Après avoir remplacé les bannières, testez la page dans les outils de développement du navigateur avec une limitation de vitesse à 4G. Dans l’onglet Réseau, vérifiez la taille réelle de chaque fichier et assurez-vous que ses dimensions correspondent à la maquette.

Processus d’export sur Mac

Un processus local reproductible est préférable aux uploads ponctuels :

1. Exportez depuis l’outil de design avec la largeur prévue dans la maquette. Évitez de reprendre la largeur de la capture d’écran de l’ordinateur.
2. Réduisez la taille dans Preview si l’export est trop grand (Outils → Ajuster la taille…).
3. Convertissez les bannières en WebP avec cwebp dans Terminal :

brew install webp
cwebp -q 82 -m 6 hero.png -o hero.webp

4. Exportez le JPEG de secours correspondant depuis le même fichier source PNG réduit.
5. Vérifiez le résultat dans l’onglet Réseau des outils de développement du navigateur avant de fusionner les modifications.

oxipng intervient après le redimensionnement pour les ressources transparentes en PNG qui doivent rester dans ce format :

oxipng -o 4 --strip safe icon.png

Documentez les règles de largeur, de qualité et de format dans le dépôt pour éviter que la prochaine campagne ne revienne à l’export d’artboards en 3x.

Traitement local pour les contenus non publics

Les bannières non publiées, les captures d’écran des prix et l’interface de la version bêta doivent rester sur le disque jusqu’au lancement. Les optimiseurs en ligne reçoivent les fichiers sources en résolution native au moment du téléchargement.

L’article les compresseurs de fichiers en ligne sont-ils sûrs ? explique ce que signifie le téléchargement vers un service tiers pour les contenus confidentiels. Les applications locales et les outils Terminal peuvent traiter les fichiers sans les envoyer sur un site pour compression.

Supprimez les données de géolocalisation EXIF des bannières si les balises GPS ne sont pas destinées aux pages publiques. La suppression des métadonnées est une étape distincte qui sert avant tout à protéger la confidentialité. Le gain de taille reste secondaire.

Quand utiliser GetCompress pour préparer les ressources web

Preview, cwebp ou un plugin de build suffisent pour une seule image. Lorsque les designers transmettent régulièrement aux développeurs des fichiers sources en PNG, JPEG, HEIC et autres formats, GetCompress aide à les ramener aux dimensions souhaitées et à préparer les variantes pour le web. Les préréglages et la file d’attente par lot traitent les fichiers localement avant leur intégration dans le build.

La structure adaptative, le CDN, la mise en cache et la mesure des performances restent des étapes séparées. Vérifiez la page publiée et conservez les fichiers maîtres à part des ressources web générées.