Générer des JPEG progressifs avec Cloudinary et Carrierwave ?

Lorsque l’on parle de performance dans le web, il y a ce qui peut se mesurer et la vitesse ressentie.

Il est essentiel de prendre en compte cette dernière pour fournir une bonne expérience à nos utilisateurs. Une technique qui peut aider pour cela est l’utilisation de JPEG progressifs.

Ce format permet d’afficher une version dégradée d’une image alors que celle-ci est à peine téléchargée par le navigateur.

La question est : « Comment générer un JPEG progressif lorsque l’on utilise Cloudinary et CarrierWave ? »

Un uploader CarrierWave standard fonctionnant avec Cloudinary ressemble en général à ceci :

class PictureUploader < CarrierWave::Uploader::Base
  include Cloudinary::CarrierWave

  version :large do
    resize_to_fill 1600, 1200
  end

  version :thumbnail do
    resize_to_fill 200, 150
  end
end

La version large de notre image a une taille plutôt conséquente de 1600px de large et 1200px de haut. Cela représente environ 650 KB ce qui n’est pas négligable.

Avec une connexion réduite à 250kb / s (sur un mobile qui a un peu de mal par exemple), voici les étapes de l’affichage de notre image :

L'image s'affiche morceau par morceau

JPEG progressif

Voyons maintenant comment demander à Cloudinary de générer pour nous un JPEG progressif.

Nous ne pouvons pas conserver l’appel à resize_to_fill en l’état et devons passer à une version légèrement plus explicite :

version :large do
  cloudinary_transformation transformation: [{
    width: 1600,
    height: 1200,
    crop: :fill,
    flags: :progressive,
    gravity: :center
  }]
end

Cette nouvelle manière d’exprimer la transformation apportée à notre image reprend tous les éléments utilisés de façon implicite par resize_to_fill.

La seule addition à cette liste d’éléments est flags: :progressive qui indique à Cloudinary que nous voulons une version progressive de notre image.

Lorsque nous testons cette nouvelle version dans notre navigateur, la différence est claire, notre image s’affiche en qualité dégradée et gagne en qualité au fur et à mesure que le temps passe.

L'image s'affiche en mauvaise qualité et s'améliore petit à petit

Compromis

Les navigateurs modernes supportent tous le format JPEG progressif. Sur les navigateurs ne supportant pas le format (comme l’ami IE8), l’image ne sera affichée qu’une fois celle-ci entièrement téléchargée, pas d’affichage par incréments donc.

Autre point intéressant à noter, contrairement à ce que l’on pourrait croire, un JPEG progressif n’est pas plus lourd qu’un JPEG normal, il peut même être plus léger ce qui semble un bon argument en sa faveur.

Vous avez d’autres techniques pour optimiser la vitesse ressentie ? Venez nous en parler dans les commentaires !

Publié le 25 janvier 2016

Notre vision des choses vous correspond ? Vous avez envie de travailler avec nous ?