Fermer

octobre 22, 2019

Un guide pour optimiser les images sur mobile


À propos de l'auteur

Suzanne Scacca est une ancienne implémentatrice, formatrice et directrice d'agence WordPress qui travaille maintenant en tant que rédactrice indépendante. Elle est spécialisée dans le marketing, le web…
Plus d'informations sur
Suzanne
Scacca

Vous souhaitez créer un site Web mobile ou un PWA convertissant les visiteurs en prospects ou en clients. Mais avec Google et les consommateurs de plus en plus exigeants en matière de vitesse de chargement, que pouvez-vous faire de plus? ImageKit, un service d’optimisation d’images numériques, offre peut-être la solution tout-en-un dont vous avez besoin.

( Cet article est sponsorisé. ) Vous savez à quel point il est crucial de construire des sites Web qui se chargent rapidement . Il suffit qu’une page soit chargée une seconde trop longtemps pour perdre des visiteurs et des ventes. De plus, maintenant que Google a fait de l'indexation par défaut la priorité sur mobile, vous ne pouvez vraiment pas vous permettre de laisser aucune optimisation des performances à la traîne, à quel point il peut être difficile de rendre votre site mobile aussi rapide que votre bureau.

Google prend en compte de nombreux facteurs lors du classement d'un site Web et les visiteurs en tiennent peut-être un certain nombre lorsqu'ils décident d'explorer un site. La vitesse du site Web .

À l’intersection de ces deux sites, il n’est pas surprenant que les images posent de nombreux problèmes avec la vitesse des sites Web. Et même si vous pouvez toujours réduire vos dépenses et créer des sites plus minimalement conçus et centrés sur le contenu, pourquoi faire des compromis?

Les images sont une force puissante sur le Web.

Non seulement vous pouvez bien choisir Les images améliorent l'esthétique d'un site, mais elles facilitent également la consommation de contenu par vos visiteurs. Bien entendu, il existe également des avantages en termes de référencement pour les images.

Alors, concentrons-nous aujourd’hui sur la façon dont vous pouvez toujours concevoir avec autant d’images que vous le souhaitez sans ralentir votre site Web. Cela nécessitera de mettre à jour votre stratégie d'optimisation d'image et d'adopter un outil appelé ImageKit mais l'installation de ce nouveau système ne vous demandera pas beaucoup de travail.

La nécessité d'une optimisation d'image Stratégie pour le téléphone portable

D'après HTTP Archive :

  • La taille moyenne d'un site Web bureau en 2019 est de 1939.5 KB .
  • La taille médiane d'un site web Le site Web mobile de 2019 est de 1745,0 Ko .
 Les kilobytes d'archive HTTP et d'archives mobiles
Les archives HTTP indiquent en moyenne le nombre de kilo-octets de sites Web de bureau et de téléphones mobiles. (Source: HTTP Archive ) ( Grand aperçu )

Si nous ne maîtrisons pas cette croissance, il sera impossible de répondre aux demandes des consommateurs et de Google. vient de fournir des sites rapides. Cela ou nous devrons obtenir vraiment de bonnes capacités d'optimisation pour la vitesse.

En parlant de vitesse, voyons ce que l'archive HTTP dit sur le poids de l'image.

 HTTP Archive octets image vs mobile
L’archive HTTP indique la quantité d’images pesant sur les sites Web de bureau et mobiles. (Source: HTTP Archive ) ( Grand aperçu )

Tel qu'il est aujourd'hui:

  • La taille moyenne des images sur le bureau est de 980,3 Ko
  • La taille médiane des images sur mobile est de 891,7 Ko sur un total de 1745,0 Ko.

En conclusion: les images ajoutent beaucoup de poids aux sites Web et consomment beaucoup de la bande passante. Et bien que ces données montrent que la taille médiane des images sur mobile est inférieure à celle de leurs homologues de bureau, la proportion d'images sur site Web est légèrement plus grande.

Cela dit, si vous avez la bonne stratégie d'optimisation d'image en place, cette On peut facilement y remédier.

Voici ce que cette stratégie devrait impliquer:

1. Redimensionnez correctement vos images

Vous devrez effectuer de nombreuses tâches fastidieuses sans les automatisations appropriées. C'est comme redimensionner vos images.

Mais vous devez le faire, n'est-ce pas?

Supposons que vous utilisiez Unsplash pour obtenir un certain nombre d'images du site Web sur lequel vous travaillez.

 Unsplash photo de Mark Boxx
Voici un exemple de photo trouvée sur Unsplash, celle-ci provient de Mark Boss. (Source: Unsplash ) ( Grand aperçu )

Contrairement aux référentiels de grande qualité dans lesquels vous pourriez choisir de choisir la taille ou le format de fichier dans lequel vous téléchargez le fichier, vous ne recevez pas un choix ici.

Vous téléchargez donc l’image et toutes les autres dont vous avez besoin. Vous avez ensuite le choix d'utiliser l'image telle quelle ou de la redimensionner manuellement. Après avoir examiné la taille du fichier et les dimensions de l'image, vous réalisez qu'il serait judicieux de le redimensionner.

 Dimensions d'origine de l'image d'Unsplash
Voici les dimensions d'origine de l'image Unsplash: 5591 × 3145 px. (Source: Unsplash ) ( Grand aperçu )

Cette image particulière est exportée au format 3.6 Mo et 5591 × 3145 px. C’est beaucoup trop gros pour n’importe quel site Web.

Il n’ya aucune raison de télécharger des images de plus de 1 Mo – et même de pousser plus loin. En ce qui concerne les dimensions? Cela dépend de la largeur de votre site, mais je pense qu’un maximum de 1200 à 2000 px devrait être votre maximum

Vous devrez suivre ce même processus, que les images proviennent d’un site de stockage ou de quelqu'un DSLR. Le fait est qu'aucune image source ne sortira jamais de la "bonne" taille pour votre site Web, ce qui signifie qu'un redimensionnement doit avoir lieu à un moment donné.

De plus, les sites Web réactifs affichent des images de différentes tailles en fonction de l'appareil. ou navigateur, ils sont visualisés sur. Et puis il y a les différents cas d'utilisation – comme une image pleine taille par rapport à une vignette ou une photo produit complète par rapport à une image sélectionnée.

Ainsi, il y a davantage de redimensionnement à faire même après votre départ. par la difficulté de les redimensionner manuellement.

Voici ce que vous ne devriez pas faire :

  • Redimensionner les images une par une. Cela prend beaucoup de temps et est inefficace.
  • Utilisez le redimensionnement du navigateur pour afficher vos images de manière réactive, car cela peut entraîner des problèmes.

Vous pouvez plutôt intégrer votre serveur d'images existant (sur votre hôte Web) ou un service de stockage externe (comme S3). ) avec ImageKit. Vous pouvez également utiliser la médiathèque d’ImageKit pour stocker vos fichiers.

 Téléchargement de la médiathèque ImageKit
C’est à quel point il est facile de télécharger un nouveau fichier dans la médiathèque ImageKit. (Source: ImageKit ) ( Grand aperçu )

Comme vous pouvez le constater, ImageKit a accepté le téléchargement des photos et dimensions de la photo Unsplash. Il en va de même pour l’origine des fichiers.

Cependant, une fois que vous avez intégré vos images ou votre stockage d’images avec ImageKit, l’outil prend le contrôle de la taille de vos images. Vous pouvez voir comment cela se fait ici:

 Points de terminaison URL de l'image ImageKit
Les points de terminaison URL de l'image ImageKit permettent aux utilisateurs de contrôler plus facilement les paramètres de redimensionnement de l'image. (Source: ImageKit ) ( Grand aperçu )

Permettez-moi de vous expliquer brièvement ce que vous regardez ci-dessus:

  • La Préférence d'origine de l'image raconte ImageKit où les images doivent être optimisées. Dans ce cas, il s’agit de la médiathèque ImageKit et ils seront affichés sur mon site Web.
  • L’ancienne URL d’image rappelle l’emplacement de nos images sur le serveur.
  • Le ] New Image URLs explique où vos images seront optimisées avec ImageKit.

La formule est assez simple. Vous prenez l'URL d'origine de votre image et vous la transformez avec la nouvelle URL ImageKit.

L'URL ImageKit seule réduira instantanément la taille de vos fichiers image. Toutefois, si vous souhaitez redimensionner les dimensions de votre image pendant que vous y êtes, vous pouvez utiliser des paramètres de transformation pour le faire.

Par exemple, il s’agit de la photo Unsplash telle que vue dans la médiathèque de mon site Web. Elle réside sur mes propres serveurs. C'est pourquoi l'adresse affiche ma propre URL:

 Une image Unsplash sans redimensionnement
Comment une image pleine taille de Unsplash peut-elle apparaître si vous la laissez telle quelle sur votre serveur. (Source: Unsplash ) ( Grand aperçu )

Pour savoir à quoi ça ressemble une fois que ImageKit l'a transformé, j'échange mon nom de domaine avec le point de terminaison fourni par ImageKit. J'ajoute ensuite mes paramètres de redimensionnement d'image ( ils vous permettent de faire davantage que redimensionner également) et rattachez le reste de l'URL qui pointe vers mon stockage d'images.

C'est ce qui se produit lorsque j'utilise ImageKit pour redimensionner automatiquement mon image à 1000 × 560 pixels:

 Redimensionnement d'image de point final ImageKit
Les points finaux ImageKit permettent aux utilisateurs de définir le mode de redimensionnement de leurs images, comme dans cet exemple. (Source: ImageKit ) ( Image agrandie )

Pour créer cette image redimensionnée, j'ai transformé l'URL d'ImageKit en:

https: // imagekit .io / vq1l4ywcv / tr: w-1000, h-560 /…

Ce sont les paramètres largeur (w-) et hauteur (h-) qui ont réduit les dimensions du fichier. [19659005] Maintenant, comme vous pouvez le constater, ce n’est pas aussi parfait en pixels que l’image originale, mais c’est parce que la compression appliquée au fichier est assez lourde (80%). Je vais expliquer comment cela fonctionne ci-dessous.

En attendant, voyons comment l'image est toujours aussi belle ainsi que les gains que nous sommes sur le point d'accélérer.

 Exemple de redimensionnement d'ImageKit sur une photo originale Unsplash [19659015] C'est ce qui peut arriver après que les utilisateurs d'ImageKit redimensionnent leurs images. (Source: <a href= Unsplash ) ( Grand aperçu )

Auparavant, il s'agissait d'un fichier de 3,6 Mo pour l'image 5591 × 3145 px. À présent, il s’agit d’un fichier de 128 Ko pour l’image px 1000 × 560.

Pour adoucir l’affaire, ImageKit facilite le redimensionnement de vos images à l’aide de la transformation d’image basée sur une URL. Cela fonctionne essentiellement comme ceci:

  • Vous enregistrez une image principale dans la bibliothèque multimédia d'ImageKit ou sur votre serveur préféré.
  • ImageKit utilise automatiquement plusieurs techniques pour réduire considérablement la taille de l'image.
  • Vous pouvez ensuite utiliser le redimensionnement et les images d'ImageKit. paramètres de recadrage pour modifier chaque image en fonction de la taille et de la résolution des périphériques.

Lorsque 91mobiles profitait de cette forme d'optimisation de l'image, il économisait 3,5 To chaque mois sur son site web avec la bande passante. Et ils n’ont rien à faire que de s’intégrer à la plateforme. Il n'était pas nécessaire de déplacer leurs images vers ImageKit ou un autre service de stockage tiers. Tout s'est déroulé dans l'infrastructure existante.

2. Utiliser des formats d’image à chargement plus rapide

Il n’ya pas que la taille de vos images qui drainent l’espace de stockage et la bande passante. Les types de fichiers que vous utilisez ont également un impact.

Les PNG en général, sont utilisés pour des logos, des images contenant du texte et d'autres images superfines à fond transparent. Bien que vous puissiez les utiliser pour enregistrer vos photos, elles ont tendance à produire les plus grandes tailles. Même lorsqu'une compression sans perte est appliquée, les fichiers PNG conservent une taille supérieure à celle des autres types de fichiers.

Les fichiers GIF sont l'équivalent animé des fichiers PNG et utilisent également la compression sans perte.

JPGs ]d’autre part, conviennent mieux aux images et aux photos colorées. Ils sont plus petits et réduisent avec une compression avec pertes. Il est possible de compresser suffisamment les fichiers JPG pour les obtenir à une taille gérable, mais vous devez faire attention, car une compression avec pertes dégrade la qualité globale d'un fichier et vous ne pouvez plus revenir en arrière une fois que c'est fait.

WebPs gagnent en popularité depuis que Google les a introduites au début des années 2010. Selon une étude de Google les WebP peuvent être plus petits que les autres entre 25% et 34% des JPG . De plus, vous pouvez utiliser à la fois des compressions avec perte et sans perte sur les WebP pour les réduire encore plus.

Il convient de garder à l’esprit que les WebP sont qu’ils ne sont pas universellement acceptés. Au moment de l’écriture, les WebPs n’étaient pas acceptés par les appareils iOS. Cependant, les dernières versions de tous les autres navigateurs, Google ou autre, les afficheront volontiers.

En ce qui concerne l’aide d’ImageKit, c’est simple:

 Paramètres de format d’image Image Kit
Ce paramètre ImageKit met le responsabilité sur ImageKit de servir le meilleur format de fichier. (Source: ImageKit ) ( Grand aperçu )

Lorsque ce paramètre est configuré, ImageKit détermine automatiquement le meilleur format de fichier pour la livraison de chacun de vos fichiers. Il prend en compte le le format et le contenu de l'image d'origine dépendaient de la compatibilité de l'appareil avec le visiteur.

Les fichiers JPG, PNG et GIF seront tous convertis en WebP lorsque cela est possible, par exemple si le visiteur visite Chrome (qui les accepte). Si ce n’est pas possible – par exemple, si le visiteur visite Safari (qui ne l’accepte pas) – ImageKit sera converti au meilleur format (c'est-à-dire le plus petit) avec les transformations définies. Il peut s’agir d’un fichier PNG ou JPG.

Nykaa a été en mesure de tirer parti de cette stratégie d’optimisation de l’image d’ImageKit. Même si leur site Web avait déjà été conçu à l'aide d'une combinaison de fichiers JPG et PNG et était stocké à divers endroits sur le Web, ImageKit s'est chargé d'automatiser les formats d'image directement à partir des URL d'origine.

3. Compresser les images

Ensuite, nous devons parler de compression d’images. Je l'ai déjà mentionné plusieurs fois, mais il en existe deux types:

Lossless

. Cette forme de compression est utilisée sur les fichiers PNG et GIF. Pour compresser le fichier, les métadonnées sont supprimées. De cette façon, l’intégrité de l’image reste intacte, mais le rétrécissement du fichier n’est pas aussi important que celui obtenu avec une compression avec perte.

Lossy

Cette forme de compression s’applique aux fichiers JPG et WebPs. Pour compresser le fichier, certaines parties de l'image sont «perdues», ce qui peut donner à certains points une apparence plus granuleuse que l'image d'origine. Dans la plupart des cas, cela est à peine perceptible, à moins que vous ne regardiez de près les deux images côte à côte. Mais pour vos visiteurs, la dégradation est facile à manquer car il n’ya pas d’original à comparer.

Avec la compression avec pertes, vous devez contrôler le pourcentage de fichiers dégradés. Une plage de sécurité serait comprise entre 70% et 80%. ImageKit, par défaut, définit son optimisation à 80% et estime que vous pouvez économiser au moins 20% à 25% de la taille de votre fichier, sans cela. En réalité, cependant, c'est probablement plus (nous examinons plus de 40%, comme dans l'exemple d'image Unsplash ci-dessus):

 Paramètres de compression avec perte ImageKit
Ce paramètre ImageKit permet à ses utilisateurs de décider du niveau de compression avec perte qu'ils souhaitent. veulent appliquer à leurs JPG. (Source: ImageKit ) ( Grand aperçu )

Vous pouvez modifier ce paramètre pour maintenir la qualité par défaut, tout en vous donnant les tailles d'image qui permettent le chargement rapide de votre site. [19659005] Que vous utilisiez le paramètre d'optimisation par défaut ou personnalisé, n'oubliez pas d'activer les paramètres de compression supplémentaires disponibles dans l'onglet Avancé

 Paramètres d'optimisation avancés d'ImageKit
ImageKit fournit des paramètres d'optimisation d'image avancés pour les fichiers JPG et PNG. (Source: ImageKit ) ( Image agrandie )

Ces trois réglages vous permettront notamment de compresser le plus possible et en toute sécurité.

Le premier Le réglage «Enregistrer une copie», par exemple, conserve vos images d'origine sur le serveur ImageKit. Ainsi, vous avez une copie de la précompression de l'image sans avoir à en gérer la charge sur votre propre serveur.

Le deuxième paramètre “Préserver les métadonnées de l'image” vous permet d'appliquer une compression sans perte lorsque cela est possible.

le dernier paramètre "Mode de compression d'images PNG" vous permet de décider du niveau d'optimisation sans perte que vous souhaitez utiliser sur vos fichiers PNG: maximum, minimum ou aucun.

Une fois terminé, vous obtiendrez des résultats comme celui-ci, comme indiqué ci-dessous. Comparaison côte à côte:

 Comparaison entre le JPG compressé et le fichier original de Unsplash
Cette comparaison côte à côte d'une image Unsplash de Luke Jeremiah montre un fichier compressé et un fichier JPG d'origine. (Source: Unsplash ) ( Grand aperçu )

Il s'agit d'un fichier JPG d'Unsplash. Pouvez-vous dire quel est l'original et quelle est la version compressée et redimensionnée d'ImageKit?

Celle de gauche avec la bordure noire est la suivante:

  • 1500 × 1005 px
  • 266 KB
  • Compressée à 95 %

Celui de droite avec la bordure blanche est le suivant:

  • 5444 × 3649 px
  • 2.5 MB
  • Original

À vous de décider quels paramètres de compression et d'optimisation ImageKit vous ' Vous êtes plus à l'aise avec l'utilisation, puis configurez en conséquence.

4. Enregistrement sur et extraction d'images à partir d'un serveur externe

Il existe deux méthodes pour exécuter des images à l'aide d'ImageKit.

La première consiste à télécharger vos images directement dans sa médiathèque:

 ImageKit Médiathèque
ImageKit permet aux utilisateurs de stocker leurs images dans sa médiathèque au lieu de leurs propres serveurs. (Source: ImageKit ) ( Grand aperçu )

Le second consiste à intégrer votre site Web ou votre service de stockage externe. Nous avons déjà vu cette partie d’ImageKit. C’est là que vous obtenez vos points de terminaison d’URL pour que vous puissiez définir vos paramètres d’image:

 Intégrations ImageKit
ImageKit s’intègre aux systèmes de gestion de contenu, au stockage tiers et à Cloudinary. (Source: ImageKit ) ( Image agrandie )

Même avec toutes les optimisations ci-dessus, vous pouvez toujours rencontrer des difficultés avec le stockage et la maintenance des images, en raison de la ils affectent votre vitesse ou la quantité de stockage que vous devez conserver.

Par exemple, si vous stockez vos images sur votre serveur, vous serez éventuellement à court d'espace (sauf si vous avez un compte d'hébergement de la taille d'un monstre). 19659005] Lorsque vous construisez des magasins de commerce électronique ou des sites Web commerciaux gigantesques avec des milliers voire des millions d'images et des tailles d'image correspondantes, vous ne pouvez pas vous permettre d'héberger ces images vous-même. Certes, il existe un moyen de les servir plus rapidement aux visiteurs (ce que je vais expliquer au point suivant), mais pourquoi assumer la charge et le coût du stockage supplémentaire s’il n’est pas obligé de le faire?

5. Ajouter un CDN

Un CDN est un autre outil d'optimisation essentiel pour les grands référentiels d'images. Pensez-y comme à un deuxième serveur, seul celui-ci met en cache (copie) votre site Web et le sert dans des centres de données très proches de vos visiteurs dans le monde entier.

En conséquence, le temps nécessaire pour envoyer votre site Web et son Des milliers d'images de produits de New York à Bangladesh en Inde se déroulent incroyablement vite.

Avec ImageKit, vous bénéficiez du privilège de servir vos images non seulement via ses serveurs de traitement principaux, mais également via AWS CloudFront CDN (inclus dans tous les plans), qui compte plus de 150 sites dans le monde entier.

Sintra cliente d’ImageKit, a fait un bond en avant en termes de performances après son passage à ImageKit. Avec le CDN d'image ImageKit (qui compte des nœuds de diffusion dans le monde entier), le temps de chargement des pages a été réduit de 18%.

Conclusion

Ce qui est particulièrement intéressant avec ImageKit, c'est qu'il ne s'agit pas simplement d'une mesure préventive contre le ralentissement. causée par des images. Vous pouvez l'utiliser pour corriger et améliorer de manière rétroactive et améliorer les sites Web mobiles et les PWA, même s'ils contiennent déjà des millions d'images. De plus, le centre de performances vous permet de surveiller facilement les images de votre site Web et d'identifier les possibilités d'amélioration de la vitesse.

De plus, comme vous pouvez le constater à l'aide des astuces ci-dessus, ImageKit a simplifié considérablement le travail que vous auriez autrement. Si vous souhaitez le gérer manuellement ou le configurer via un plug-in.

Les consommateurs et Google devenant plus exigeants jour après jour quant à la vitesse de chargement des sites Web sur mobile, voici le type de stratégie d'optimisation de l'image dont vous avez besoin. Cela allégera votre charge tout en garantissant que les images ajoutées avant ou après ImageKit sont optimisées au maximum. Mieux encore, vos clients bénéficieront de plus de prospects et de conversions plus importantes.

 Smashing Editorial (yk)




Source link