Lors de la mise à jour des images d'un site web, l'affichage sur mobile impacte directement l'expérience utilisateur. Pour les débutants, préparer les éléments suivants à l'avance permet d'éviter les problèmes courants comme les images floues, les chargements lents ou les affichages incomplets.
1. Définir les dimensions et proportions des images
La largeur des écrans mobiles est généralement de 375 à 414 px (pixels physiques), mais il faut tenir compte du ratio de pixels de l'appareil (DPR). Voici les tailles recommandées :
- Images plein écran : largeur d'au moins 750 px (375 px × 2), hauteur ajustée en fonction du ratio.
- Images dans le contenu : largeur d'environ 90 % de l'écran, soit 340-370 px, avec une version 2x de 680-740 px.
- Icônes ou petites images : préparez une taille 2x par rapport à l'affichage réel, par exemple 100 × 100 px pour un affichage de 50 × 50 px.
Évitez d'utiliser des images originales trop grandes réduites directement, car cela gaspille du trafic, et ne pas étirer de petites images, ce qui entraînerait un flou.
2. Choisir le bon format d'image
Sur mobile, privilégiez la vitesse de chargement et la compatibilité :
- JPEG : idéal pour les photos riches en couleurs, avec un bon taux de compression.
- PNG : adapté aux icônes ou graphiques simples nécessitant un fond transparent.
- WebP : 25 à 35 % plus léger que le JPEG, avec support de la transparence, mais certains anciens appareils ne le supportent pas ; prévoyez une version JPEG de secours.
Pour les débutants, il est conseillé de préparer les versions JPEG et WebP, et de charger la version appropriée en fonction du support du navigateur via du code. Si vos compétences techniques sont limitées, commencez par le JPEG et optimisez plus tard.
3. Compresser les images pour contrôler la taille des fichiers
Les réseaux mobiles sont variés, et des fichiers trop volumineux ralentissent le chargement. Visez les tailles suivantes :
- Images principales de la page d'accueil : moins de 200 Ko, idéalement moins de 100 Ko.
- Images de contenu : moins de 100 Ko, environ 50 Ko.
- Icônes : moins de 10 Ko.
Utilisez des outils en ligne comme TinyPNG ou Squoosh pour compresser tout en conservant une qualité visuelle acceptable.
4. Rédiger le texte alternatif (alt) des images
Chaque image mobile doit avoir un attribut alt pour les moteurs de recherche et les technologies d'assistance (comme les lecteurs d'écran). Le texte alt doit décrire brièvement le contenu, par exemple « Photo de la zone d'accueil de l'entreprise » plutôt que « Image 1 ». Évitez le bourrage de mots-clés, une description naturelle suffit.
5. Préparer des versions avec différentes résolutions
Les densités d'écran des appareils mobiles varient considérablement. Préparez au moins deux résolutions pour chaque image :
- 1x (résolution standard) : pour les écrans normaux.
- 2x (haute définition) : pour les écrans Retina et autres écrans HD.
Si votre trafic est important, envisagez une version 3x. Utilisez CSS ou l'attribut srcset pour spécifier les différentes versions et laisser le navigateur charger celle qui convient.
6. Tester l'affichage des images sur mobile
Avant la mise à jour, testez impérativement sur un vrai téléphone ou un simulateur de navigateur :
- L'image s'affiche-t-elle complètement, sans étirement ou déformation ?
- La vitesse de chargement est-elle acceptable ? Utilisez le panneau réseau des outils de développement Chrome pour vérifier le temps de chargement.
- Le clic sur l'image redirige-t-il vers le lien attendu (le cas échéant) ?
Si des différences de couleur notables apparaissent entre iOS et Android, ajustez le profil colorimétrique en sRGB.
7. Sauvegarder les images originales et les enregistrements de modifications
Les débutants doivent conserver les images haute résolution originales pour les modifications futures. Notez également le nom, les dimensions, le taux de compression et l'emplacement de téléchargement de chaque image mise à jour pour faciliter le dépannage.
En suivant ces préparatifs, la mise à jour des images sur mobile se déroulera plus facilement et améliorera l'expérience de navigation des utilisateurs. En cas de doute sur les détails techniques, consultez un prestataire de services de création de site web ou référez-vous à la documentation officielle.
