Pourquoi il est important d'optimiser vos images

Lors de la programmation d'une page web, il est important d'utiliser le format correct pour le travail. 

Le cas échéant, le simple fait de changer vos images de png à jpg et d'utiliser des outils de compression appropriés peut faire baisser considérablement le site de votre page, ce qui se traduit par des temps de chargement plus rapides, des expériences plus agréables pour l'utilisateur et, par conséquent, de meilleurs taux de conversion.

C'est également la première chose à laquelle tout développeur web expérimenté devrait s'attaquer puisque, très franchement, c'est la plus facile et la moins longue à mettre en œuvre par rapport à d'autres optimisations.

A quoi ça ressemble en pratique

Je passais en revue le travail d'un nouveau membre du personnel et la page se chargeait lentement. En utilisant le DevTool de Chrome Brower, je suis passé à l'onglet Réseau et j'ai rechargé la page.

La page se trouvait dans la partie supérieure en termes de "Ressources", j'ai donc regardé chacun des fichiers pour vérifier leur taille. J'ai trouvé quelques gros fichiers png (environ 1,6 Mo - 2,2 Mo chacun).

J'ai regardé où ces fichiers étaient affichés sur la page et j'ai remarqué deux choses :

1. Les images étaient utilisées comme images de fond (environ 1920 x 1080 chacune)
2. Les images ne contenaient aucun besoin de transparence

Ces deux éléments méritent d'être pris en compte pour le choix du format.

Comprendre le choix du format

Lorsque vous choisissez le format le plus approprié pour répondre à vos besoins, il est important de comprendre les différences fondamentales entre les formats d'image les plus courants dont nous disposons en tant que développeurs web.

Chacun a ses avantages et ses inconvénients et il est important de comprendre les forces et les faiblesses de chacun pour optimiser votre site web afin d'offrir la meilleure expérience possible aux utilisateurs (et améliorer le référencement).

WebP ... I'm Not a Fan

Les formats les plus courants (sans ordre particulier) :

Mais qu'est-ce que "Lossy" ?

Dans le tableau ci-dessus, vous avez probablement remarqué que les PNG sont généralement plus volumineux que les JPG ("compression modérée" contre "compression élevée"). Ce taux de compression est lié (en partie) au fait que les compressions JPG sont "avec perte" alors que la compression PNG est "sans perte".

Cela signifie que les fichiers PNG s'efforceront de ne pas perdre de détails, mais cela se traduit par une taille de fichier plus importante. Les JPG utilisent des algorithmes pour déterminer quels détails peuvent être sacrifiés ou regroupés pour assurer une taille de fichier plus petite.

Cela ne s'applique pas aux SVG car, bien que le format soit "sans perte", il n'est pas conçu pour contenir des photographies ou des images. Le format SVG est plutôt le format de fichier de choix pour les formes simples (comme les logos et les icônes). Comme les SVG contiennent les calculs mathématiques spécifiques pour dessiner et remplir la forme souhaitée, il est considéré comme une image vectorielle.

C'est pratique car les instructions mathématiques sont extrêmement petites par rapport à la même image qu'un PNG ou un JPG. La limite ici est que le SVG doit être créé comme une image vectorielle dès le départ et ne contient aucun élément complexe (comme dans une photographie).

TL;DR : Lossy sacrifie les petits détails pour obtenir une compression plus élevée, lossless assure que tous les détails sont préservés.

Revenir à notre exemple

Maintenant que nous avons une meilleure compréhension des différences entre les formats de fichiers, revenons à la situation actuelle.

Dans notre cas, les images de fond n'étaient pas de simples formes ou un logo. Nous n'avons besoin d'aucune sorte de transparence. Et les images sont d'assez grandes dimensions, nous voulons donc réduire la taille du fichier autant que possible.

Mon programmeur avait utilisé un fichier PNG car il craignait de perdre des détails. C'est une préoccupation justifiée mais finalement injustifiée puisque nous n'allons pas utiliser une énorme quantité de détails en convertissant le fichier en JPG.

Nous ne profitons pas non plus des autres propriétés du PNG, donc nous ralentissons toute la page pour un gain très faible.

Ce sera donc un JPG.

Les bonnes choses : Plonger plus profondément dans le JPG

Ainsi, le format lui-même comporte des options supplémentaires. En fait, chacun de ces formats comporte de nombreuses options supplémentaires, mais je n'en parlerai pas ici.

Le choix des bons paramètres dépend fortement de la compréhension du cas d'utilisation.

Pour le web, nous n'avons pas besoin d'un DPI (dots per inch) très élevé. Nous utilisons également ces images comme images de fond, donc une grande largeur est logique (1920 dans ce cas).

Dans PhotoShop, vous pouvez facilement régler ces options sous "Taille de l'image". Je commence généralement par modifier le DPI, car le programme a tendance à modifier la largeur de votre fichier lorsque vous jouez avec le DPI.

Il est également important de s'assurer que le fichier est enregistré en RVB. De nombreux photographes nous donnent des images en CMJN car cela est utile pour la photographie et l'impression. Pour le web, le RVB est mieux pris en charge pour les fichiers JPG.

Enfin, lorsque vous "enregistrez sous", assurez-vous de sélectionner l'extension de fichier .jpg. Vous serez invité à attribuer une note de "Qualité" de 1 à 12 (selon votre version de PhotoShop). Je sélectionne généralement "High" au lieu de "Maximum" pour économiser un peu plus sur la taille du fichier.

Une fois le fichier sauvegardé, je fais une étape supplémentaire où je passe l'image par tinypng.com pour encore plus d'économies sur la taille du fichier.

Le résultat

A ci-dessus se trouve le résultat final de l'une des images. J'ai pu suivre les étapes ci-dessus et réduire considérablement la taille du fichier.

Je suis passé d'un fichier PNG de 1,6 Mo à un fichier JPG de moins de 200 Ko avec très peu de différence, visuellement.

Économiser presque 1 Mo et demi ne semble pas être un gros problème, mais pensez à cela sur un appareil mobile. Pensez à cette économie sur une douzaine d'images sur une page. Pensez à cette différence sur des centaines d'images sur un site.

Savoir comment compresser vos fichiers est l'une des choses les plus élémentaires que tout bon développeur web devrait savoir faire. Ces formats sont bien documentés, bien testés, et les informations ne sont que semi-techniques.

Les résultats sont faciles à voir et les fichiers sont tangibles, ce qui rend les idées les plus abstraites faciles à saisir.

... Je continuerai à parler de WebP dans un autre article.