Retour à l'accueil

Optimiser les images avec la balise <picture/> et différentes sources

Quand on utilise des images dans une page web, il est important de les rendre le plus léger possible.

Optimiser les images

La première étape va être de les dimensionner correctement. Pour ce faire, j’utilise iloveimg.com. Le service va permettre de garde le ratio de l’image afin de ne pas créer de déformation.

Une fois l’image à une taille raisonnable, il est possible de la compresser avec compressor.io.

Ces 2 étapes vont déjà permettre d’aléger considérablement vos images.

Proposer différents formats

Pour optimiser encore cela, vous pouvez convertir vos images en WEBP. Il s’agit d’un format d’image créé par Google qui a l’avantage d’être plus léger (et si vous ne le proposez pas, Google n’aime pas vraiment).

Mais en ne proposant que du WEBP, les images n’apparaitront pas sur certains navigateurs plus anciens. C’est le cas notamment des versions plus anciennes de safari encore très utilisées par des personnes ayant des macs d’il y a quelques années.

La solution à ce problème va donc être de proposer différentes sources.

<figure>
  <picture>
    <source
      width="428"
      height="561"
      srcset="/assets/3d-model.webp"
      type="image/webp"
    />
    <img width="428" height="561" class="" src="/assets/3d-model.png" alt="" />
  </picture>
</figure>

De cette manière, si le navigateur est capable de lire du WEBP, c’est cette source qui lui sera servie. Dans le cas contraire, il aura toujours accès au format alternatif (PNG dans l’exemple).

Utiliser les media queries

En plus de servir différentes sources, on va pouvoir servir une image différente selon la taille de l’écran du visiteur. Dans le cadre d’un iPhone, il n’est pas utile de servir une image de 1900px de large. C’est du poids inutile.

<figure>
  <picture>
    <source
      srcset="{config.api"
      +
      data.attributes.Hero.data.attributes.url}
      height="{data.attributes.Hero.data.attributes.height}"
      width="{data.attributes.Hero.data.attributes.width}"
      media="(min-width: 1000px)"
      type="image/webp"
    />
    <source
      class="w-full h-full object-cover"
      srcset="{config.api"
      +
      data.attributes.Hero.data.attributes.url}
      height="{data.attributes.Hero.data.attributes.height}"
      width="{data.attributes.Hero.data.attributes.width}"
      media="(max-width: 999px)"
      type="image/webp"
    />

    <img
      class="w-full h-full object-cover"
      src="{config.api"
      +
      data.attributes.Hero.data.attributes.url}
      height="{data.attributes.Hero.data.attributes.height}"
      width="{data.attributes.Hero.data.attributes.width}"
      alt=""
    />
  </picture>
</figure>

Dans l’exemple, on aura une image pour les écrans de moins de 1000px et une pour les plus grands.

Mettre des tailles explicites

Autant que possible, il faut mettre les attributs width et height pour que le navigateur puisse anticiper la taille de l’image avant le chargement. Cela permet d’éviter que, pendant le chargement, la page ne prévoit 0px de large et de haut.