Livraison d'image rapide: optimiser les images pour le Web et les CDN

Voulez-vous augmenter les performances de votre site? Optimisez vos images pour le Web!

Qu'est-ce que cela signifie? Cela signifie offrir des images de haute qualité qui ravissent les visiteurs sans ralentir votre site.

Saviez-vous que 90% des acheteurs sur Etsy disent que la qualité d'image influence leur décision d'achat? De même, Airbnb a constaté que les listes avec des photos professionnelles obtiennent 20% de réservations de plus que celles sans. De belles images stimulent les conversions, mais il y a une prise: de grandes images non optimisées peuvent ralentir considérablement votre site.

Nous avons le dos! C'est là que l'optimisation de l'image entre en jeu.

Dans ce guide, vous apprendrez les meilleures techniques pour optimiser les images pour le Web et les CDN afin d'assurer des temps de chargement plus rapides et de meilleures performances.

3 techniques d'optimisation d'image essentielles pour le Web

Le moyen efficace d'optimiser une image pour le Web est de le servir dans le bon format et de la taille et de le compresser sans perdre de qualité. Passons en revue les trois techniques de base pour commencer votre parcours d'optimisation.

1. Choisir le bon format d'image pour le Web

Des formats plus anciens comme JPEG, PNG et GIF ont bien servi le Web, mais ils n'ont pas l'efficacité des formats de nouvelle génération comme WebP et AVIF. Ces formats modernes offrent la même qualité avec une compression supérieure, ce qui signifie que vos images se chargent plus rapidement sans sacrifier les détails.

Exemple et meilleures pratiques

• Convertissez toujours les images en WebP ou AVIF pour des tailles de fichiers plus petites et de meilleures performances.

L'étude Web.dev de Google a révélé que les images WebP sont de 25 à 34% plus petites que les JPEG comparables, ce qui en fait un choix intelligent pour les sites Web plus rapides. Ci-dessous, vous pouvez voir que le fichier JPEG pèse 43,84 Ko et le WebP One seulement 29,61 Ko, mais la qualité est la même.

IMG

2. Redimensionner les images pour les bonnes dimensions

L'utilisation d'images plus grandes que nécessaire ralentit votre site Web car le navigateur doit les charger et les redimensionner à la volée. En étendant les images à la taille exacte qu'ils seront affichés, vous réduisez la taille du fichier et améliorez la vitesse de chargement.

Exemple et meilleures pratiques

Redimensionnez toujours vos images pour correspondre à la taille de l'affichage réelle de votre site.

• Pour un article de blog WordPress, la largeur de 800px est idéale.

• Pour les images de produits WooCommerce, un minimum de 800px × 800px assure la clarté.

3. Compression d'images sans perte de qualité

La compression de l'image réduit la taille du fichier, ce qui signifie moins de demandes HTTP et des images à chargement plus rapide, tous les deux essentiels pour améliorer la vitesse de la page. Cependant, la compression de trop peut entraîner des photos floues, affectant la crédibilité et le taux de conversion de votre site Web. La clé consiste à trouver le bon équilibre: taille de fichier plus petite sans perte de qualité notable.

Exemple et meilleures pratiques

Utilisez un outil de compression qui ne modifie pas la qualité d'image mais réduit autant que possible la taille du fichier.

Par exemple, pouvez-vous repérer la différence entre ces deux images?

Nous ne pouvons pas! Celui de droite est comprimé de 80% , mais la qualité reste identique.

Maintenant que vous connaissez les trois stratégies de base, vous pouvez aller encore plus loin vos efforts d'optimisation d'image avec des techniques plus avancées et préparer encore plus vos images pour le Web.

Stratégies d'optimisation d'image Web avancés

L'optimisation de l'image va au-delà des formats de compression et de prochaine génération. Considérez des techniques avancées comme le chargement paresseux, les images réactives et l'optimisation de texte alt pour améliorer les performances et le référencement.

1. Implémentation de chargement paresseux pour un chargement de page initial plus rapide

La première technique avancée pour préparer des images pour le Web consiste à appliquer un chargement paresseux. Il aide à réduire les temps de chargement des pages initiaux en reportant le chargement des images hors écran jusqu'à ce qu'elles soient nécessaires.

En implémentant le chargement paresseux, vous vous assurez que les images ne se chargent que lorsqu'ils deviennent visibles dans la fenêtre de l'utilisateur, ce qui rend la page plus rapide.

Exemple et meilleures pratiques

Imaginez que vous lisez un article de blog WordPress intitulé «10 meilleures plages en Thaïlande». Au lieu de charger les 10 grandes images à la fois, le chargement paresseux garantit que:

• La première image de plage se charge immédiatement avec la page.

• Les images restantes se chargent uniquement lorsque vous faites défiler vers le bas, en réduisant le temps de chargement initial.

Tout ce que vous avez à faire est de:

• Utilisez le chargement natif = «paresseux» pour les images sous le pli.

• Exclure les images du héros et les éléments visuels clés du chargement paresseux.

2. Préchargement et hiérarchisez vos images critiques à charger d'abord

Dans le même sens, une autre technique avancée d'optimisation d'image Web est de garantir que votre navigateur privilégie les images critiques telles que l'élément de peinture contenu (LCP) le plus grand.

LCP est l'un des principaux vitaux du Web qui mesure le temps qu'il faut pour que votre contenu le plus important soit chargé sur la page (qui est généralement une image). Pour améliorer le LCP, vous devez dire au navigateur de hiérarchiser le rendu de cette image clé le plus rapidement possible.

Exemple et meilleures pratiques

Imaginez un élément LCP sur une page de produit WooCommerce - probablement, l'image du produit principal. Pour le rendre plus rapide, au-delà du chargement paresseux, vous pouvez également:

• Utilisez fetchpriority = ”high” sur l'image LCP pour dire au navigateur de le charger immédiatement.

• Utilisez Rel = ”Preload» si l'image n'est pas dans le HTML initial, garantissant que le navigateur le charge à l'avance.

3. Utilisation d'images réactives pour différentes tailles d'écran

L'utilisation d'images réactives améliore la vitesse de la page en garantissant que les navigateurs chargent la taille d'image la plus appropriée en fonction de l'appareil de l'utilisateur. Cela empêche les images surdimensionnées de ralentir les expériences mobiles tout en maintenant de haute qualité sur des écrans plus grands.

Exemple et meilleures pratiques

• Utilisez l'attribut élément <mage> ou SRCSET pour desservir différentes tailles d'image en fonction de l'appareil de l'utilisateur.

• Optimiser les images séparément pour les écrans mobiles, tablettes et de bureau.

• Concevoir le mobile d'abord lors de la création d'une page ou d'un site Web entier.

Voici les meilleures résolutions d'écran communes dans le monde entier pour référence:

• Bureau : 1920 × 1080, 1366 × 768, 1536 × 864, 1280 × 720

• Mobile : 360 × 800, 390 × 844, 393 × 873, 412 × 915

• Comprimé : 768 × 1024, 1280 × 800, 800 × 1280, 820 × 1180

4. Optimisation de texte alt pour le référencement

Alt-Text améliore l'accessibilité et contribue à l'image du référencement en fournissant aux moteurs de recherche avec un contexte pertinent. Ils donnent une description textuelle des images et peuvent augmenter vos chances d'être présentées dans les principaux résultats de Google Images.

Exemple et meilleures pratiques

• Soyez simple et descriptif mais concis, n'incorporant que les mots clés pertinents naturellement.

• Évitez la farce des mots clés et concentrez-vous davantage sur les descriptions conviviales et significatives.

Par exemple, voici un bon exemple alt-tag pour un produit WooCommerce:

«Jacket en jean bleu surdimensionné pour femmes avec avant boutonné et deux poches de poitrine.»

Cette balise ALT est descriptive, comprend des détails clés et intègre naturellement des mots clés pour le référencement.

D'un autre côté, ce serait un mauvais exemple (remboursement de mots clés): «Jean Blue Jacket Denim surdimensionné surdimensionné de la veste bleue de la veste à la mode à la mode.»

5. Tirer parti des CDN pour une livraison d'image plus rapide

Les CDN (réseaux de livraison de contenu) sont une autre technique efficace pour préparer des images pour le Web et améliorer la vitesse de la page.

Les CDN améliorent la vitesse de chargement de l'image en utilisant la mise en cache et le redimensionnement à la volée, garantissant que les images sont livrées dans la bonne taille de l'appareil de l'utilisateur.

Grâce à la mise en cache, une fois qu'une image est optimisée, les CDN n'ont pas besoin de le réoptimiser chaque fois qu'un nouvel appareil le demande. En plus de cela, les images sont servies à partir du serveur le plus proche de l'utilisateur (points de présence), accélérant la livraison d'image.

Exemple

Votre serveur d'origine est à Londres, mais un client de Sydney souhaite accéder à votre site WooCommerce, qui est rempli d'images de produit. Sans CDN, la demande se déplace jusqu'à Londres, puis de retour à Sydney. Cependant, avec un CDN, la demande est traitée par un serveur local en Australie et l'image se charge beaucoup plus rapidement.

Meilleures pratiques pour optimiser les images avec les CDN

• Vérifiez vos URL car une image CDN s'appuie sur les URL pour déterminer l'image à charger et utiliser des paramètres tels que la taille, le format et la qualité.

• Assurez-vous que CDN prend en charge AVIF et WebP car, comme mentionné précédemment, ces formats de nouvelle génération améliorent la compression et la qualité des images.

• Optimisez vos images (par exemple, avec compression) avant d'utiliser n'importe quelle image CDN afin d'ajouter une autre couche d'optimisation.
  

Top outils et plugins pour l'optimisation d'image Web

La meilleure façon d'optimiser les images pour le Web est d'utiliser des plugins d'optimisation des performances tels que WP Rocket, Imagify et RocketCDN. De plus, des outils de conception comme Sketch ou Photoshop peuvent aider à redimensionner les images précisément pour l'utilisation du Web. Une autre règle de base consiste à utiliser un thème WordPress entièrement réactif et un plugin convivial pour s'assurer que les images s'adaptent correctement à différents appareils. Passons en revue chacun de ces outils.

1. Imagify - le plugin d'optimisation d'image le plus simple

Imagify est le plugin d'optimisation d'image le plus simple qui compresse automatiquement les images en vrac tout en maintenant de haute qualité. Imagify vous aide à appliquer les trois techniques d'optimisation d'image de base mentionnées précédemment: la compression, la conversion de nouvelle génération et le redimensionnement des images plus grandes, tout sans effort.

Caractéristiques clés bénéfiques pour l'optimisation Web

Passons en revue ces trois fonctionnalités qui aident à préparer des images pour le Web:

• Le mode de compression intelligent offre automatiquement le meilleur équilibre entre la réduction de la taille du fichier et la qualité visuelle. Il y a un bouton de compression en vrac que vous pouvez appuyer et optimiser toutes vos images à la fois.

Si vous êtes curieux, vous pouvez voir que la qualité est la même sur l'image d'origine (à gauche) vs sur la compressée (à droite):

• Le plugin convertit automatiquement les images en WebP pour de meilleures performances Web. Il y a aussi une option à convertir à AVIF.

• Il y a également la possibilité de redimensionner les images plus grandes lors du téléchargement pour éviter les problèmes de performances.

Le plugin est vraiment adapté aux débutants, et il n'est pas nécessaire d'être un concepteur professionnel. Imagify optimise les images pour le Web en votre nom! Il existe un plan gratuit disponible pour environ 200 images par mois afin que vous puissiez voir les résultats par vous-même.

2. Photoshop

Il s'agit d'un outil puissant pour l'édition et l'optimisation d'image.

• La conversion WebP est disponible sous le fichier > Enregistrer > webp .

• Pour utiliser la compression d'image, allez dans Fichier > Exporter > Enregistrer pour le Web , puis ajustez la taille et la qualité de l'image. Faites attention à ne pas trop compresser et perdre de la qualité.
  

3. Sketch

Il s'agit d'un excellent outil pour redimensionner et préparer des images pour plusieurs appareils.

• Il est livré avec des maquettes préfabriquées pour iPhone, Android et plus vous garantissez facilement votre image pour une conception réactive.

• Il prend également en charge la conversion WebP: utilisez un fichier> Export> webp.
  

4. CloudConvert et Optimizilla

De nombreux outils en ligne existent pour la compression d'images et la conversion de format, mais il est rare d'en trouver un qui fait les deux. Vous aurez probablement besoin de deux outils distincts pour optimiser les images en ligne telles que CloudConvert et Optimizilla.

Suivez les étapes ci-dessous pour les utiliser ensemble

1. Utilisez CloudConvert pour convertir des JPEG lourds en webp. Faites simplement glisser et déposez vos images dans le champ de fichier de sélection .

2. Téléchargez l'image convertie et compressez-la à l'aide d'un compresseur d'image en ligne tel que Optimizilla.

5. WP Rocket

WP Rocket est le plugin de performance le plus simple et le plus puissant pour optimiser votre contenu et vos images pour le Web tout en améliorant les vitaux du Web de base. Il aide également à passer facilement plusieurs audits Pagespeed Insights. De plus, 80% des meilleures pratiques de performance sont appliquées instantanément, ce qui permet d'économiser du temps et des efforts.

Caractéristiques clés bénéfiques pour l'optimisation Web

WP Rocket aide à aborder presque tous les conseils de la section Advanced Image Optimization Techniques, ce qui en fait une solution de performance tout-en-un.

Passons en revue chaque fonctionnalité:

• Le navigateur et la mise en cache de page (y compris la mise en cache mobile) et la compression GZIP , garantissant que les images et autres actifs se chargent plus rapidement.
• Optimisation critique de l'image: il optimise automatiquement les images ci-dessus de la page afin qu'elles puissent être rendues plus rapidement par le navigateur. Par exemple, l'image LCP sera préchargée et rendue en priorité à l'utilisateur.
• Chargement paresseux : il retarde le chargement des images jusqu'à ce qu'ils soient nécessaires, au lieu de tout en même temps. Cela aide les pages à charger plus rapidement et enregistre les données en affichant uniquement des images lorsque les utilisateurs leur font défiler.

Comparaison des outils d'optimisation d'image pour différents besoins

Voici un récapitulatif des outils en fonction de vos besoins afin que vous puissiez choisir le meilleur pour optimiser les images pour le Web.

Pour des optimisations faciles et efficaces dans WordPress

Imagify est votre meilleur allié. Il gère la compression, la résistance automatique des grandes images et la conversion de format de prochaine génération (WebP / AVIF) directement dans votre tableau de bord WordPress. Vous pouvez optimiser les images individuellement ou en vrac, ce qui permet d'économiser du temps et des efforts sans faire face aux complexités techniques. Et rappelez-vous, Imagify s'assure de ne servir aucune images floues grâce à son mode de compression intelligente!

Pour l'optimisation avancée d'images dans WordPress

Si vous avez besoin de mise en cache, de chargement paresseux, de préchargement des images LCP et d'optimisation des images au-dessus du pli, WP Rocket est la solution incontournable. Il s'intègre à Imagify et fournit une suite complète d'optimisation des performances pour augmenter la vitesse de chargement en quelques clics.

Pour l'optimisation de base en dehors de WordPress

Si vous préférez ne pas utiliser un plugin WordPress, CloudConvert ou Optimizilla sont des convertisseurs en ligne faciles à utiliser qui prennent en charge la compression d'images en vrac et la conversion de format (jusqu'à 20 images à la fois). Cependant, vous devrez re-télécharger manuellement les images optimisées sur WordPress.

Pour un contrôle complet sur la taille de l'image

Utilisez un outil de conception comme Sketch, Photoshop (avancé), GIMP ou outils intégrés comme l'aperçu (Mac) ou les photos (Windows). Le croquis est idéal pour créer facilement des variations de taille multiple pour différents appareils. Photoshop est également génial, mais c'est une courbe d'apprentissage vraiment abrupte.

Pour un contrôle complet sur la taille de l'image et les niveaux de compression

Photoshop permet un contrôle précis sur les niveaux de compression avant d'exporter l'image. Cependant, avec une grande puissance s'accompagne d'une grande responsabilité et assurez-vous de ne pas trop compresser votre image.

Pour un CDN puissant avec une configuration facile

Si vous recherchez un CDN sans tracas abordable avec intégration WordPress, RocketCDN est un excellent choix. Il est livré avec un plugin WordPress dédié, ce qui signifie qu'aucune configuration technique complexe (enregistrements CNAME par exemple) n'est nécessaire de votre côté. Avec les points de présence mondiaux (POP), il assure une livraison rapide d'images dans le monde, ce qui est idéal pour les sites Web multilingues avec des visiteurs de différentes régions.

Bien sûr, d'autres CDN sont disponibles et bien performants, mais ils viennent souvent avec des coûts plus élevés et une configuration plus technique, ce qui peut être difficile pour les débutants.

Mesurer l'impact de l'optimisation de l'image sur le Web: 6 métriques

Pour mesurer l'impact de l'optimisation de l'image, vous pouvez utiliser des outils de performance, des outils de vérification de réactualité, des outils de données (comme Google Analytics) et des mesures clés pour déterminer si vos optimisations fonctionnent. Passons en revue.

Voici une liste de mesures et de KPI que vous pouvez suivre pour mesurer le succès de vos efforts d'optimisation d'image.

1. Temps entièrement chargé

Il mesure combien de temps il faut pour qu'une page se charge complètement. Les images optimisées devraient réduire ce temps.

2. La plus grande peinture contenu

La plus grande peinture contente (LCP) mesure combien de temps il faut pour le plus grand contenu visible (souvent une image ou un grand bloc de texte) à charger sur une page. Étant donné que les images sont généralement les plus grands éléments affectant le temps de chargement, les optimiser directement améliorent le LCP.

Si votre score LCP s'améliore après la compression et le redimensionnement de l'image, cela signifie que vos optimisations fonctionnent!

3. Taille du fichier image

Les tailles de fichiers plus petites signifient des temps de chargement plus rapides sans perdre de qualité. Une fois que vous avez implémenté la compression et la conversion de format de prochaine génération, vous devriez voir que la taille de votre fichier d'image est beaucoup plus petite d'au moins 40%.

4. Poids de la page

C'est la taille totale des actifs d'une page, y compris les images. Avec des images optimisées, vous devez enregistrer quelques Ko.

5. Taux de rebond des utilisateurs mobiles

Un taux de rebond élevé peut indiquer une charge lente ou une mauvaise réactivité mobile. Si vous améliorez l'expérience utilisateur mobile en servant des images de taille appropriée, les visiteurs devraient être plus disposés à interagir avec votre contenu et à ne pas partir immédiatement.

6. Temps moyen sur la page pour les utilisateurs mobiles

Si les utilisateurs restent plus longtemps, cela suggère une meilleure expérience et que les images sont bien optimisées.

Notez qu'il est également utile de vérifier les sections des audits et des meilleurs problèmes de GTmetrix et Pagespeed Insights, avant et après les modifications. Si les optimisations fonctionnent bien, vous devriez voir des améliorations telles que «coder efficacement les images», les «images hors écran» ou les «images de taille correctement» marquées en vert.

5 outils à utiliser pour vérifier si l'optimisation de l'image fonctionne

1. Gtmetrix

Propulsé par le phare, GTMetrix analyse la vitesse et les performances du site Web.

• Les KPI mesurés pour l'optimisation de l'image: temps entièrement chargé, la plus grande peinture contente (Core Web Vitals), poids de page.

• Section d'audit pour l'optimisation de l'image: La section des problèmes supérieurs met en évidence les domaines d'amélioration.

IMG

2. PagesPeed Insights

L'outil alimenté par Google de Google évalue les performances de la page.

• KPI mesurés pour l'optimisation de l'image: score de performance global, la plus grande peinture contente.

• Section d'audit pour l'optimisation de l'image: La section de diagnostic met en évidence les problèmes à résoudre.

IMG

3. Google Analytics

Il suit le trafic du site Web et le comportement des utilisateurs, contribuant à prendre des décisions de marketing basées sur les données.

• KPI mesuré pour l'optimisation de l'image : taux de rebond, temps moyen sur page pour les utilisateurs de bureau et mobiles.

Par exemple, suivez ces étapes pour mesurer le temps moyen sur la page pour les utilisateurs mobiles

• Accédez à Google Analytics> Engagement> Aperçu (ou une page spécifique)

• Comparez le bureau par rapport aux données mobiles

• Sélectionnez les dates d'optimisation avant et après

4. Cadenceseo.com

C'est un outil puissant pour vérifier la réactivité du site Web et la convivialité.

• Ce qu'il vérifie: il vérifie à quoi ressemble votre site Web sur plusieurs appareils (tablette, mobile et bureau) et vous montre les améliorations qui doivent être apportées.

5. Imagify

Imagify compresse les images directement à partir de la bibliothèque WordPress et suit les économies de taille de fichier.

• KPI mesuré pour l'optimisation de l'image: réduction de la taille des fichiers d'image.

5 mauvaises pratiques communes dans l'optimisation d'image Web

Avant de commencer à optimiser vos images pour la conception Web, prenez un moment pour passer en revue ces cinq mauvaises pratiques standard. Éviter ces pièges aidera à vous assurer que vous êtes sur la bonne voie pour améliorer non seulement les performances, mais aussi l'expérience utilisateur.

Sur-compression entraînant une perte de qualité

La compression des images trop peut entraîner une mauvaise qualité et une expérience utilisateur négative. Visez toujours à équilibrer la compression avec une qualité visuelle avec un outil efficace qui peut faire le travail pour vous.

Négliger les optimisations d'images spécifiques au mobile

Le non-redimensionnement des images pour différentes tailles d'affichage (comme le mobile, la tablette et le bureau) peut entraîner des temps de chargement plus lents et une utilisation inutile des données, principalement lorsque de grandes images sont utilisées dans de petits conteneurs. Le redimensionnement des images selon le contexte est essentiel pour des performances optimisées.

S'en tenir aux formats «lourds» comme GIF ou JPEG

S'appuyer sur des formats obsolètes comme GIF et JPEG peut entraîner des tailles de fichiers plus grandes. Envisagez d'utiliser des formats plus récents comme WebP ou AVIF pour une qualité égale et des tailles de fichiers plus petites.

Des images de chargement paresseux au-dessus du pli

Le chargement paresseux est excellent pour les images hors écran, mais les images essentielles, comme celles au-dessus du pli, doivent être prioritaires pour améliorer le temps de chargement perçu.

Uniquement en utilisant une compression sans perte

Si vous utilisez un outil de compression fiable, vous devez toujours opter pour une compression avec perte. Vous ne devriez pas remarquer une différence visuelle entre la compression avec perte et sans perte. Les modes avec perte réduiront bien plus les tailles de fichiers que celles sans perte.

Emballage

Vous devriez maintenant être bien équipé pour optimiser les images pour le Web, des techniques de base aux techniques avancées! Avec les bons outils, vous pouvez vous assurer que vos images sont entièrement optimisées et tirer parti des CDN pour augmenter la vitesse de votre page. Vous savez également comment suivre vos progrès avec des mesures de performances clés et les meilleurs outils de test.

Pour lancer votre parcours d'optimisation sans risques, suivez ces deux étapes puissantes:

• Commencez par Imagify - installez-le gratuitement et optimisez jusqu'à 200 images sans frais. De plus, vous pouvez restaurer vos images originales si nécessaire.

• Installez WP Rocket - bénéficiez instantanément de 80% des meilleures pratiques de performance, y compris la mise en cache et l'optimisation critique de l'image. Il y a une garantie de remboursement de 14 jours, vous pouvez donc l'essayer également sans risque!