Définir le pixel ratio sur ParoiCMS

Dans un site web, le pixel ratio sert à définir la densité de pixels par unité d'affichage, ce qui permet d'adapter la résolution des images et du texte pour une meilleure qualité visuelle sur différents écrans.

Le pixel ratio se définit dans le fichier theme/theme.json :

  "pixelRatio": 1.5

Nous avons constaté (en 2024) que les outils d'audits de Google recommandent une valeur de 1.5. Ce nombre est un coefficient par lequel sera multiplié la largeur et la hauteur des images demandées par les templates Liquid.

Par exemple, le code suivant demande une image de 300 pixels en largeur et 200 pixels en hauteur, et il obtient une image de 450 (c'est-à-dire 300 × 1,5) sur 300 (200 × 1,5) :

{% useImage image
  , uid: doc.featuredImage.uid
  , size: "300x200" %}

{{ image | info }}

La variable image contient les champs suivants :

Le code suivant génère la balise image :

<img
  src="{{ image.url }}"
  width="{{ image.width }}"
  height="{{ image.height }}"
  alt="">