Table des matières de l'article :
Saviez-vous que les temps de chargement lents sont l'un des défis les plus courants pour avoir une bonne expérience utilisateur ? Voici quelques techniques pour accélérer les temps de chargement et rendre votre site Web beaucoup plus intuitif.
Le format d'image JPEG est l'un des formats d'image le plus couramment utilisé sur le Web. Le format est souvent utilisé pour les images colorées et complexes telles que les photographies. La spécification JPEG comprend une gamme d'extensions de fichiers valides, mais les plus courantes sont .jpg et .jpeg.
JPEG signifie Joint Photographic Groupe d'experts et a été développé spécialement pour les photos. JPEG compressera une photo ou une image avec des dégradés plus efficacement que PNGS. Lors de l'enregistrement de fichiers JPEG, vous pouvez enregistrer l'image avec différents niveaux de qualité pour réduire la taille du fichier. Comme mentionné, vous pouvez enregistrer la photo au format JPEG ou JPEG progressif en fonction de votre public et de votre objectif. Vous pouvez également voir des références à JPEG2000, bien que ce format ait une meilleure compression, il n'est pas pris en charge par tous les navigateurs.
Quelle que soit l'extension utilisée, toutes les images JPEG seront traitées de la même manière. Bien que toutes les images JPEG ne soient pas créées de la même manière. Il existe un paramètre moins connu dans la spécification des formats d'image. Ce paramètre, appelé mode progressif, peut considérablement améliorer l'expérience d'utilisation des fichiers JPEG sur le Web.
JPEG normal vs JPEG progressif
Le plus grand facteur déterminant d'un format d'image est généralement la compression - les méthodes varient considérablement. C'est d'ailleurs ce qui rend certains formats plus adaptés que d'autres selon l'utilisation de l'image. Même au format JPEG, vous pouvez obtenir des résultats extrêmement variables en fonction des paramètres d'exportation utilisés.
Dans la plupart des programmes d'imagerie, le type de JPEG créé lors de l'enregistrement serait considéré comme "Baseline". Pour être bref, la meilleure façon d'imaginer la ligne de base ou le mode de base est que l'image commence par le haut et soit interprétée ligne par ligne. Déplacer l'image vers le bas de chaque ligne de pixels à la fois pendant qu'elle comprime et/ou affiche l'image.
Pour ceux qui se souviennent encore des fondamentaux des anciens GIF. Le format JPEG progressif peut être compris comme l'équivalent du format Intelaced GIF.
Un GIF entrelacé n'affiche pas sa ligne de balayage de manière linéaire de haut en bas, mais la réorganise de manière à ce que le contenu du GIF devienne clair avant même la fin du chargement. Par exemple, la visionneuse GIF peut afficher des lignes en haut de l'image, puis au centre, puis à la fin, et continuera à remplir les blancs jusqu'à ce que l'image soit entièrement chargée.
Les JPEG progressifs sont similaires aux GIF entrelacés, mais leur schéma de rendu est généralement supérieur à celui utilisé avec les GIF. Avec certaines applications, il est également possible de modifier l'ordre dans lequel les lignes de balayage sont affichées. Contrairement aux GIF entrelacés, les JPEG progressifs sont souvent plus petits que leurs homologues de base.
Le compromis ici est qu'il ne charge qu'une partie des données d'image à la fois. Cela signifie que l'image se chargera en taille réelle avec une apparence pixélisée et deviendra plus claire au fur et à mesure du chargement.
Voir en action
Parfois, la meilleure façon de comprendre quelque chose est de le voir en action. C'est donc exactement ce que nous allons faire ici, nous aurons exactement la même image enregistrée sous les deux types de JPEG à comparer.
Commençons donc par prendre une image de haute qualité pour tester ; dans notre cas, nous utiliserons une photo Pexels de quelques chatons endormis. Comme il s'agit d'une image haute résolution, nous la redimensionnerons un peu avant notre test, nous la redimensionnerons donc de moitié environ. Maintenant qu'elle a été redimensionnée, nous allons exporter deux versions de l'image, une en ligne de base et une progressive. (Les deux images utiliseront exactement les mêmes paramètres autres que cette option, et nous utilisons GIMP pour créer les images.)
JPEG NORMAL
JPEG PROGRESSIF
Ainsi, même si ces images sont assez volumineuses, il est parfois difficile de voir la différence dans leur processus de téléchargement. Sous chaque image se trouve une vue "chronologie" de la façon dont l'image est chargée au fil du temps. Gardez à l'esprit que la visualisation de la chronologie fournie est fortement dramatisée pour illustrer l'idée. Si vous deviez charger la page sans aucun cache local, vous pouvez effectivement voir ce comportement lors du chargement d'images !
Avantages du JPEG progressif
Sur un site Web, le JPEG progressif peut améliorer l'expérience utilisateur. Bien que floue, les visiteurs peuvent déjà voir l'image entière au premier coup d'œil. De plus, étant généralement de plus petite taille, le JPEG progressif peut également réduire l'utilisation de ressources telles que la bande passante et l'espace disque, ce qui permet à votre site Web de se charger plus rapidement.
Les navigateurs populaires, tels que Firefox et Chrome, prennent également en charge les images progressives. Mais si vous utilisez une ancienne version d'Internet Explorer (avant Windows 7), assurez-vous d'installer la dernière mise à jour pour activer la fonctionnalité.
conclusion
Si vous souhaitez que les images de votre site Web se chargent plus rapidement, il est préférable de les modifier au format JPEG progressif. même si vous utilisez des formats modernes comme webp ou AVIF vous devrez toujours utiliser les anciens formats JPEG comme solution de rechange pour les navigateurs qui ne les prennent pas encore en charge.
