Importance de l'optimisation des images sur mobile
Naviguer sur un site depuis un mobile est devenu courant. Les images, éléments les plus lourds d'une page, influencent directement la rétention et la conversion. Optimiser les images pour mobile ne se limite pas à réduire leur poids : il faut tenir compte de la résolution, de la connexion réseau et de la taille d'écran. Voici les points essentiels à retenir pour la refonte ou la maintenance d'un site professionnel.
Adaptation des dimensions et de la résolution
Les écrans mobiles varient de 4,7 à 6,7 pouces avec des résolutions différentes. Utiliser une image de 1920 px de large sur mobile gaspille du débit et ralentit le chargement. Recommandations :
- Utiliser la technique d'image responsive (attributs srcset et sizes) pour que le navigateur charge la taille adaptée à l'écran.
- Pour les images à largeur fixe, ne pas dépasser 750 px (largeur courante des smartphones) et prévoir une version 2x (1500 px) pour les écrans Retina.
- Pré-générer plusieurs tailles d'images plutôt que de redimensionner une grande image originale.
Choix du format d'image
Chaque format a ses avantages en compression, rendu des couleurs et compatibilité. Pour le mobile, privilégier :
- WebP : plus léger que JPEG et PNG à qualité égale, largement supporté par les navigateurs mobiles. Utiliser la balise <picture> avec une fallback JPEG ou PNG.
- JPEG pour les photos, avec une compression modérée (qualité 80 %) pour réduire le poids.
- PNG pour les icônes ou graphiques nécessitant de la transparence, mais préférer SVG quand c'est possible.
- Éviter les formats non compressés comme BMP ou TIFF.
Stratégie de chargement des images
Sur mobile, la connexion peut être instable. Le chargement différé (lazy load) est une technique courante :
- Charger les images hors écran uniquement lorsqu'elles entrent dans la zone visible.
- Utiliser l'attribut HTML loading="lazy" ou une bibliothèque JavaScript.
- Envisager le JPEG progressif pour afficher d'abord un aperçu flou, améliorant l'expérience d'attente.
Éviter de charger trop d'images simultanément. Utiliser des sprites CSS pour regrouper les petites icônes et réduire les requêtes HTTP.
Adaptation responsive et CSS
Les images doivent s'adapter à la largeur du conteneur sans déborder ni se déformer :
- En CSS, définir max-width: 100%; height: auto; pour un redimensionnement proportionnel.
- Pour les images de fond, utiliser background-size: cover ou contain avec des media queries.
- Définir un ratio hauteur/largeur pour éviter les décalages de mise en page (CLS). Utiliser padding-top en pourcentage ou la propriété aspect-ratio.
Compression et outils
Compresser les images avant téléchargement est crucial pour réduire le trafic. Outils recommandés :
- En ligne : TinyPNG, Squoosh, Compressor.io (supporte le traitement par lots).
- Logiciels locaux : Photoshop (Enregistrer pour le Web), ImageOptim (Mac).
- Automatisation : intégrer des plugins de compression dans les outils de build (Webpack, Gulp).
Conserver une qualité visuelle raisonnable : qualité JPEG entre 70 et 85 %, PNG en 8 bits ou quantifié.
CDN et mise en cache
Utiliser un CDN pour accélérer l'accès mondial, surtout sur mobile. Configurer des en-têtes de cache (Cache-Control: max-age=31536000) pour que le navigateur conserve les images et réduise les rechargements.
Erreurs courantes
- Se concentrer uniquement sur le poids de l'image sans tenir compte de la netteté sur les écrans Retina, ce qui donne des images floues.
- Utiliser une qualité 100 % pour toutes les images, ce qui les rend trop lourdes.
- Ne pas fournir d'images différentes selon la taille d'écran, forçant les petits écrans à charger de grandes images.
- Négliger l'attribut Alt, ce qui nuit à l'accessibilité et au référencement.
Conclusion
L'optimisation des images sur mobile est un processus continu qui implique la génération, le choix du format, la stratégie de chargement et l'adaptation responsive. Dans la gestion quotidienne du site, vérifier régulièrement la vitesse de chargement et le poids des images, et optimiser en fonction des données sur les appareils des utilisateurs. Pour une refonte de site professionnel, intégrer ces bonnes pratiques dans les spécifications de développement front-end pour améliorer les performances et l'expérience utilisateur.
