Aujourd'hui, plus de 60% du trafic web mondial provient des appareils mobiles, une tendance en constante augmentation. Il est donc impératif que votre site web offre une expérience utilisateur irréprochable sur ces plateformes, où les images jouent un rôle déterminant. Des visuels mal optimisés peuvent entraîner des temps de chargement excessifs, une consommation de données superflue pour les visiteurs, et un affichage aléatoire compromettant la crédibilité de votre site.
Fort heureusement, en adoptant les bonnes approches et en exploitant les outils HTML adéquats, vous pouvez aisément ajuster vos images pour une restitution idéale sur mobile. Ce guide complet vous familiarisera avec les balises HTML fondamentales, les formats d'image les mieux adaptés, les techniques avancées de responsive images et de lazy loading, ainsi que les pratiques exemplaires en matière d'ajustement côté serveur et d'accessibilité. Notre but est de vous doter des savoirs et des aptitudes nécessaires pour proposer une expérience visuelle haut de gamme à tous vos utilisateurs mobiles.
Bases HTML : la balise ` ` et ses attributs essentiels pour le mobile
La balise ` ` représente l'élément de base pour intégrer des visuels dans vos pages web. Toutefois, pour peaufiner l'affichage de ces éléments sur mobile, il est crucial d'appréhender et d'employer judicieusement ses attributs clés. Nous allons examiner l'attribut `alt`, les couples `srcset` et `sizes`, sans oublier `width` et `height`.
Présentation de la balise ` `
La syntaxe élémentaire de la balise ` ` se présente ainsi : `
`. L'attribut `src` désigne l'URL de l'image à manifester. L'attribut `alt` s'avère capital pour l'accessibilité : il procure une description textuelle du visuel qui sera déclamée par les lecteurs d'écran aux utilisateurs malvoyants. De plus, les moteurs de recherche l'exploitent pour saisir le contenu du visuel et améliorer l'indexation de votre page. Un attribut `alt` de qualité doit être concis, précis et informatif, relatant le contenu et le contexte de l'image. Par exemple, pour une image d'un chat noir assis sur un canapé, un attribut `alt` approprié serait : `alt="Chat noir confortablement installé sur un canapé en cuir"`. Enfin, bien que non formellement obligatoire en HTML5, il est sage de refermer la balise ` ` afin de garantir une meilleure compatibilité et une maintenance facilitée du code.
L'attribut `srcset` et `sizes` : le responsive images 101
Pour diffuser des visuels adaptés aux différentes dimensions d'écran des appareils mobiles, les attributs `srcset` et `sizes` se révèlent indispensables. Ils autorisent la soumission de diverses versions de l'image en fonction de la résolution de l'écran, optimisant ainsi le temps de chargement et la consommation de données. Cette technique est essentielle pour un HTML responsive images tutoriel.
L'attribut `srcset` définit une liste de sources d'images, chacune étant associée à une largeur ou une densité de pixels déterminée. Par exemple : `srcset="image-petit.jpg 320w, image-moyen.jpg 768w, image-grand.jpg 1200w"`. Le descripteur `w` indique la largeur de l'image en pixels. Le navigateur sélectionnera l'image la plus pertinente d'après la largeur de l'écran et l'attribut `sizes`. Il est également concevable d'employer le descripteur `x` pour viser les écrans Retina/HiDPI qui arborent une densité de pixels supérieure. Par exemple, `srcset="image-2x.jpg 2x"` offrira l'image `image-2x.jpg` aux écrans manifestant une densité de pixels égale ou supérieure à 2.
L'attribut `sizes` configure la taille d'affichage du visuel selon les media queries. Par exemple : `sizes="(max-width: 320px) 100vw, (max-width: 768px) 50vw, 100vw"`. L'unité `vw` (viewport width) représente la largeur de la fenêtre d'affichage. Dans cet exemple, si la largeur de l'écran est inférieure à 320 pixels, l'image occupera l'intégralité de la largeur de l'écran (100%). Si la largeur de l'écran oscille entre 320 et 768 pixels, l'image recouvrira la moitié de la largeur de l'écran (50%). Sinon, l'image couvrira toute la largeur de l'écran (100%). Cela permet de moduler la taille de l'image en fonction de la mise en page du site sur divers dispositifs. Pour un agencement à une seule colonne sur mobile, on utilisera `100vw`. Pour une structure à deux colonnes sur tablette, on optera pour `50vw`.
Illustrons cela par un exemple concret :
<img src="image-moyen.jpg" alt="Description de l'image" srcset="image-petit.jpg 320w, image-moyen.jpg 768w, image-grand.jpg 1200w" sizes="(max-width: 320px) 100vw, (max-width: 768px) 50vw, 100vw">L'attribut `width` et `height` : anticiper le rendu pour éviter le CLS (cumulative layout shift)
Le Cumulative Layout Shift (CLS) est une mesure de performance web qui évalue les décalages visuels imprévus durant le chargement d'une page. Des images dépourvues d'attributs `width` et `height` peuvent concourir au CLS, car le navigateur ignore la taille du visuel tant qu'il n'est pas complètement chargé. Cela peut occasionner des sauts de contenu et une expérience utilisateur dégradée.
Afin d'esquiver le CLS, il est vivement encouragé d'incorporer les attributs `width` et `height` à la balise ` `. Ces attributs signalent au navigateur la taille de l'image, lui donnant la possibilité de réserver l'espace nécessaire avant le chargement de l'image. Cela permet d'éviter les décalages visuels. De plus, en spécifiant les attributs `width` et `height`, vous avez la faculté de préserver le rapport d'aspect de l'image, même si elle est redimensionnée par le CSS. Par exemple, si l'image présente une largeur de 800 pixels et une hauteur de 600 pixels, vous pouvez définir `width="800"` et `height="600"`. Si vous ambitionnez de redimensionner l'image à l'aide du CSS, vous pouvez employer `width: 100%` pour qu'elle s'adapte à la largeur de son contenant, tout en conservant son rapport d'aspect initial.
Divers outils existent pour générer automatiquement les attributs `srcset`, `sizes`, `width` et `height` à partir d'une image, ce qui rationalise le processus d'ajustement. Explorez des solutions comme Cloudinary ou Imgix pour automatiser la création de ces attributs et optimiser vos images à grande échelle.
Formats d'images : choisir le bon format pour le mobile
Le choix du format d'image est déterminant pour perfectionner l'affichage sur mobile. Chaque format possède ses avantages et ses inconvénients en termes de compression, de qualité et de compatibilité avec des fonctionnalités spécifiques. Opter pour un format inapproprié peut peser négativement sur le temps de chargement et l'esthétique visuelle.
Comparaison des formats d'images : JPEG, PNG, GIF, WebP, AVIF
- JPEG : Avantages : compression efficace, approprié pour les clichés complexes riches en couleurs. Inconvénients : compression avec perte, susceptible d'altérer la qualité si la compression est trop intense. Recommandé pour les photographies.
- PNG : Avantages : compression sans perte, prend en charge la transparence. Inconvénients : plus volumineux que le JPEG pour les images affichant une profusion de couleurs. Conseillé pour les logos, les icônes et les visuels comportant du texte.
- GIF : Avantages : tolère l'animation. Inconvénients : palette de couleurs limitée (256 couleurs), compression moins performante. Utile pour les animations brèves et simples.
- WebP : Avantages : compression supérieure aux formats JPEG et PNG, prend en charge la transparence et l'animation. Recommandé en tant qu'alternative moderne aux formats traditionnels. Offre une diminution de la taille des fichiers sans dégradation notable de la qualité.
- AVIF : Avantages : compression encore plus pointue que le WebP, compatible avec le HDR. L'avenir des images sur le web, malgré une prise en charge navigateur moins répandue pour le moment.
Le tableau ci-dessous récapitule les particularités essentielles de chaque format :
| Format | Type de compression | Support de la transparence | Support de l'animation | Utilisation recommandée |
|---|---|---|---|---|
| JPEG | Avec perte | Non | Non | Photos complexes |
| PNG | Sans perte | Oui | Non | Logos, icônes, texte |
| GIF | Avec perte | Oui | Oui | Animations courtes et simples |
| WebP | Avec et sans perte | Oui | Oui | Alternative moderne à JPEG et PNG |
| AVIF | Avec perte | Oui | Oui | Le futur des images sur le web |
Le format WebP : un atout majeur pour l'optimisation mobile et la conversion mobile
Le format WebP est un format d'image novateur mis au point par Google, qui propose une compression plus performante que les formats JPEG et PNG, tout en préservant une qualité visuelle comparable. Il supporte également la transparence et l'animation, ce qui en fait une alternative polyvalente aux formats classiques. Le transfert de JPEG à WebP peut engendrer une réduction de la taille des fichiers oscillant entre 25 et 34 % pour une qualité d'image analogue. Concernant les PNG, la diminution peut atteindre 26 %.
Pour exploiter le WebP, vous devez en premier lieu convertir vos images existantes au format WebP. De nombreux outils en ligne et logiciels sont en mesure de mener à bien cette conversion. Ensuite, vous pouvez employer la balise ` ` afin de proposer le WebP aux navigateurs compatibles et le JPEG/PNG aux autres. Un exemple de code :
<picture> <source srcset="mon-image.webp" type="image/webp"> <img src="mon-image.jpg" alt="Description de l'image"> </picture>Ce code transmet au navigateur l'instruction de charger l'image WebP si celui-ci la prend en charge. Si le navigateur ne prend pas en charge le WebP, il chargera l'image JPEG. Certains CDN facilitent la conversion automatique au format WebP, simplifiant ainsi le processus d'ajustement. Pour plus d'informations, consultez l'article de Google sur la création et l'utilisation des images WebP.
Optimisation de la compression : trouver le juste milieu entre taille et qualité et améliorer l'optimisation image mobile performance
Même après avoir sélectionné le format d'image approprié, il est vital d'optimiser la compression en vue de réduire la taille du fichier sans trop altérer la qualité visuelle. Un visuel excessivement volumineux peut ralentir le chargement de la page et impacter négativement l'expérience utilisateur, notamment sur les appareils mobiles dotés de connexions lentes. Selon une étude de Akamai, les sites convertissant leurs images vers le format WebP ont vu leur temps de chargement diminuer de 2,2 secondes, améliorant ainsi leur référencement et leur taux de conversion.
Divers outils en ligne et logiciels existent pour compresser les images, à l'instar de TinyPNG, ImageOptim, Compressor.io et Kraken.io. Ces instruments font appel à des algorithmes de compression sophistiqués dans le but de diminuer la taille des fichiers sans perte de qualité perceptible. Lors de la compression, il est primordial de régler les paramètres de compression (qualité JPEG, nombre de couleurs PNG) afin de dénicher le meilleur compromis entre taille et qualité. Adopter des plugins conçus pour compresser automatiquement les images lors de leur téléchargement sur un CMS (WordPress, Drupal, etc.) peut également automatiser une partie du processus. À titre d'exemple, ShortPixel représente une extension WordPress prisée qui propose un perfectionnement automatique des images.
Techniques avancées : améliorer l'expérience utilisateur mobile
Améliorer l'expérience utilisateur sur mobile est essentiel. Ces techniques avancées permettront de rendre l'affichage de l'image agréable et rapide pour l'utilisateur. Nous allons aborder le lazy loading, l'optimisation côté serveur et la priorisation des ressources.
Lazy loading : charger les images uniquement quand elles sont visibles et améliorer le lazy loading images mobile
Le lazy loading (chargement différé) consiste à ne charger les visuels qu'au moment où ils deviennent visibles dans la fenêtre d'affichage. Cela permet d'atténuer le temps de chargement initial de la page et d'économiser la bande passante, singulièrement sur les appareils mobiles. Une étude menée par Google a démontré que l'implémentation du lazy loading peut réduire le temps de chargement initial de la page de 40% et diminuer la consommation de données de 30%.
La mise en œuvre native du lazy loading est d'une grande simplicité : il suffit d'ajouter l'attribut `loading="lazy"` à la balise ` `. Par exemple : `
`. Il convient toutefois de vérifier la compatibilité avec les navigateurs et de prévoir une solution de repli pour les navigateurs plus anciens. Pour une compatibilité optimale, vous pouvez vous appuyer sur des bibliothèques JavaScript telles que Lozad.js ou l'Intersection Observer API. Ces bibliothèques offrent davantage de latitude et de contrôle sur le comportement du lazy loading, vous permettant de précharger les images situées à proximité de la zone visible. L'emploi d'espaces réservés (couleur de fond, images de substitution) peut également prévenir les sauts de contenu pendant le chargement des images.
Optimisation côté serveur : compression et redimensionnement à la volée
L'optimisation côté serveur implique la compression et le redimensionnement des images sur le serveur, avant de les acheminer vers le navigateur. Cela décharge le navigateur de cette tâche et optimise le temps de chargement. L'usage des CDN donne accès aux avantages de l'ajustement côté serveur. Cette technique contribue à l'optimisation images mobile performance.
- CDN (Content Delivery Network) : Les CDN sont des réseaux de serveurs répartis géographiquement qui mettent en cache le contenu de votre site web et le servent aux utilisateurs à partir du serveur le plus proche. Ils fournissent des fonctions d'ajustement des images, à l'image du redimensionnement automatique, de la compression et de la conversion en WebP.
- Logiciels de serveur (ImageMagick, GraphicsMagick) : Vous pouvez vous servir de scripts pour redimensionner et compresser les images durant leur chargement sur votre serveur, en recourant à des logiciels tels que ImageMagick ou GraphicsMagick. Ces logiciels peuvent être intégrés à des CMS (WordPress, Drupal, etc.).
Il est capital de mettre en cache les images optimisées afin d'éviter de les recalculer à chaque requête. Cela peut s'effectuer en configurant les en-têtes de cache appropriés sur votre serveur.
Priorisation des ressources : charger en priorité les images critiques
La priorisation des ressources revient à charger en priorité les images indispensables à l'affichage initial de la page. Cela améliore la perception de la vitesse et offre une meilleure expérience utilisateur. Il est important de cibler les images qui bloquent le rendu initial de la page et d'identifier celles qui sont essentielles.
- Preload des images critiques : Vous pouvez utiliser la balise ` ` dans l'en-tête (` `) du document pour indiquer au navigateur de charger l'image en priorité.
- Chargement adaptatif : Vous pouvez moduler les images à charger en fonction de la connexion réseau de l'utilisateur. Par exemple, vous pouvez charger des images basse résolution sur les connexions lentes.
Les outils d'analyse de performance, comme Google PageSpeed Insights, peuvent vous aider à déterminer les images qui entravent le rendu de la page.
Pour vous aider à mieux comprendre les options disponibles, voici une comparaison des outils et des méthodes d'optimisation des images :
| Outil/Méthode | Description | Avantages | Inconvénients |
|---|---|---|---|
| TinyPNG | Compression d'images PNG et JPEG | Facile à utiliser, bonne compression, gratuit pour un usage limité | Compression avec perte, limites sur la taille des fichiers |
| ImageOptim | Optimisation d'images pour macOS | Gratuit, puissant, compression sans perte | Uniquement pour macOS |
| Google PageSpeed Insights | Analyse de la performance web | Gratuit, fournit des recommandations d'optimisation | Complexe à interpréter, focus sur la performance globale |
| Lazy Loading | Chargement différé des images | Améliore le temps de chargement initial, économise la bande passante | Nécessite une implémentation technique, peut affecter le SEO si mal implémenté |
| CDN (Cloudinary, Imgix) | Distribution du contenu sur un réseau de serveurs, optimisation d'images à la volée | Améliore la vitesse de chargement, automatise l'optimisation, fonctionnalités avancées | Payant, peut être complexe à configurer |
Accessibilité : rendre les images accessibles à tous et amélioration de l'accessibilité images web mobile
Il est impératif de prendre en compte l'accessibilité au moment d'intégrer des images sur votre site. L'audience doit être la plus vaste possible et l'emploi de l'attribut `alt` ou d'alternatives textuelles favorise l'accessibilité.
L'attribut `alt` : la clé de l'accessibilité des images et de l'indexation
L'attribut `alt` s'avère essentiel pour l'accessibilité des images. Il fournit une description textuelle de l'image, laquelle sera restituée par les lecteurs d'écran aux utilisateurs malvoyants. Il sert également aux moteurs de recherche pour saisir le contenu de l'image et optimiser l'indexation de votre page.
- Décrire l'image de manière concise et instructive : L'attribut `alt` doit rendre compte du contenu et du contexte de l'image de façon limpide et précise.
- Éviter les mots-clés superflus : Ne recourez pas à des mots-clés inutiles afin de ne pas être perçu comme un spam par les moteurs de recherche.
- Laisser l'attribut `alt` vide si l'image est strictement décorative : Si l'image n'apporte aucune information essentielle, vous pouvez omettre l'attribut `alt` (`alt=""`).
Par exemple, pour une image affichant un logo d'entreprise, un attribut `alt` pertinent serait `alt="Logo de l'entreprise X"`. Un attribut `alt` inapproprié serait `alt="logo entreprise image web site internet"`.
Alternatives textuelles pour les images complexes et amélioration de l'accessibilité
En ce qui concerne les images complexes, telles que les graphiques ou les diagrammes, il peut s'avérer nécessaire de fournir des alternatives textuelles plus détaillées.
- Légendes : Joignez des légendes aux images complexes afin d'apporter un contexte supplémentaire.
- Descriptions longues : Exploitez l'attribut `aria-describedby` pour associer une image à une description plus explicite au sein du document.
- Transcriptions : Fournissez des transcriptions textuelles pour les images qui comportent du texte.
Tester l'accessibilité des images et tester l'accessibilité images
Il est indispensable de tester l'accessibilité de vos images afin de vous assurer qu'elles soient utilisables par l'ensemble des utilisateurs. Des outils d'analyse d'accessibilité tels que WAVE ou Axe peuvent vous aider à vérifier si vos images sont accessibles. Il est également préconisé de tester vos pages à l'aide d'un lecteur d'écran pour contrôler que les descriptions alternatives sont correctement restituées.
Optimiser vos images pour un web mobile performant et améliorer l'optimisation images mobile performance
En mettant en œuvre les recommandations et les techniques abordées dans cet article, vous serez en mesure d'optimiser vos images afin d'obtenir une restitution idéale sur mobile. Cela bonifiera l'expérience utilisateur, réduira le temps de chargement de vos pages et optimisera votre indexation. L'ajustement des images est favorable à l'expérience utilisateur de votre site en général. En moyenne, un site web qui optimise ses images peut observer une progression de 15 % de son taux de conversion.
Les technologies d'images sur le web évoluent à un rythme rapide, à l'image de l'avènement de nouveaux formats tels qu'AVIF et de techniques de compression adaptative. Il est crucial de se tenir informé des dernières tendances afin de continuer à proposer une expérience visuelle de premier ordre à vos utilisateurs mobiles. N'omettez pas de mener un audit régulier des performances et de l'accessibilité de vos images pour déceler les axes d'amélioration. Pour cela, vous pouvez utiliser Lighthouse, un outil intégré à Chrome qui vous donnera des indications claires sur les optimisations à réaliser.