7 novembre 2022

Qu'est-ce qu'un JPEG progressif et comment peut-il ĂȘtre utile pour les sites Web ?

Voyons quels sont les avantages d'un JPEG progressif et la différence entre un JPEG normal.

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.

 

Informations sur l'auteur

Vous avez des doutes ? Vous ne savez pas par oĂč commencer ? Contactez-nous !

Nous avons toutes les réponses à vos questions pour vous aider à faire le bon choix.

Discute avec nous

Discutez directement avec notre support avant-vente.

0256569681

Contactez-nous par téléphone pendant les heures de bureau 9h30 - 19h30

Contactez-nous en ligne

Ouvrez une demande directement dans l'espace contact.

INFORMATIONS

Managed Server Srl est un acteur italien leader dans la fourniture de solutions systÚme GNU/Linux avancées orientées vers la haute performance. Avec un modÚle d'abonnement peu coûteux et prévisible, nous garantissons que nos clients ont accÚs à des technologies avancées en matiÚre d'hébergement, de serveurs dédiés et de services cloud. En plus de cela, nous proposons des conseils systÚme sur les systÚmes Linux et une maintenance spécialisée en SGBD, sécurité informatique, Cloud et bien plus encore. Nous nous distinguons par notre expertise dans l'hébergement de CMS Open Source de premier plan tels que WordPress, WooCommerce, Drupal, Prestashop, Joomla, OpenCart et Magento, soutenus par un service d'assistance et de conseil de haut niveau adapté aux administrations publiques, aux PME et à toutes tailles.

Red Hat, Inc. dĂ©tient les droits de Red HatÂź, RHELÂź, RedHat LinuxÂź et CentOSÂź ; AlmaLinuxℱ est une marque commerciale d'AlmaLinux OS Foundation ; Rocky LinuxÂź est une marque dĂ©posĂ©e de la Rocky Linux Foundation ; SUSEÂź est une marque dĂ©posĂ©e de SUSE LLC ; Canonical Ltd. dĂ©tient les droits sur UbuntuÂź ; Software in the Public Interest, Inc. dĂ©tient les droits sur DebianÂź ; Linus Torvalds dĂ©tient les droits sur LinuxÂź ; FreeBSDÂź est une marque dĂ©posĂ©e de la FreeBSD Foundation ; NetBSDÂź est une marque dĂ©posĂ©e de la Fondation NetBSD ; OpenBSDÂź est une marque dĂ©posĂ©e de Theo de Raadt. Oracle Corporation dĂ©tient les droits sur OracleÂź, MySQLÂź et MyRocksÂź ; PerconaÂź est une marque dĂ©posĂ©e de Percona LLC ; MariaDBÂź est une marque dĂ©posĂ©e de MariaDB Corporation Ab ; REDISÂź est une marque dĂ©posĂ©e de Redis Labs Ltd. F5 Networks, Inc. dĂ©tient les droits sur NGINXÂź et NGINX PlusÂź ; VarnishÂź est une marque dĂ©posĂ©e de Varnish Software AB. Adobe Inc. dĂ©tient les droits sur MagentoÂź ; PrestaShopÂź est une marque dĂ©posĂ©e de PrestaShop SA ; OpenCartÂź est une marque dĂ©posĂ©e d'OpenCart Limited. Automattic Inc. dĂ©tient les droits sur WordPressÂź, WooCommerceÂź et JetPackÂź ; Open Source Matters, Inc. dĂ©tient les droits sur JoomlaÂź ; Dries Buytaert dĂ©tient les droits sur DrupalÂź. Amazon Web Services, Inc. dĂ©tient les droits sur AWSÂź ; Google LLC dĂ©tient les droits sur Google Cloudℱ et Chromeℱ ; Facebook, Inc. dĂ©tient les droits sur FacebookÂź ; Microsoft Corporation dĂ©tient les droits sur MicrosoftÂź, AzureÂź et Internet ExplorerÂź ; La Fondation Mozilla dĂ©tient les droits sur FirefoxÂź. ApacheÂź est une marque dĂ©posĂ©e de The Apache Software Foundation ; PHPÂź est une marque dĂ©posĂ©e du groupe PHP. CloudFlareÂź est une marque dĂ©posĂ©e de Cloudflare, Inc. ; NETSCOUTÂź est une marque dĂ©posĂ©e de NETSCOUT Systems Inc. ; ElasticSearchÂź, LogStashÂź et KibanaÂź sont des marques dĂ©posĂ©es d'Elastic NV. Ce site n'est affiliĂ©, sponsorisĂ© ou autrement associĂ© Ă  aucune des entitĂ©s mentionnĂ©es ci-dessus et ne reprĂ©sente aucune de ces entitĂ©s de quelque maniĂšre que ce soit. Tous les droits sur les marques et noms de produits mentionnĂ©s sont la propriĂ©tĂ© de leurs titulaires respectifs des droits d'auteur. Toutes les autres marques mentionnĂ©es appartiennent Ă  leurs titulaires. MANAGED SERVERÂź est une marque dĂ©posĂ©e au niveau europĂ©en par MANAGED SERVER SRL Via Enzo Ferrari, 9 62012 Civitanova Marche (MC) Italie.

JUSTE UN MOMENT !

Souhaitez-vous voir comment votre WooCommerce fonctionne sur nos systĂšmes sans avoir Ă  migrer quoi que ce soit ? 

Entrez l'adresse de votre site WooCommerce et vous obtiendrez une démonstration navigable, sans avoir à faire absolument quoi que ce soit et entiÚrement gratuite.

Non merci, mes clients préfÚrent le site lent.
Retour en haut de page