Set the pixel ratio on ParoiCMS

In a website, the pixel ratio is used to define the pixel density per display unit, which allows for adjusting the resolution of images and text for better visual quality on different screens.

The pixel ratio is defined in the file theme/theme.json:

  "pixelRatio": 1.5

We observed (in 2024) that Google's audit tools recommend a value of 1.5. This number is a coefficient by which the width and height of the images requested by the Liquid templates will be multiplied.

For example, the following code requests an image of 300 pixels in width and 200 pixels in height, and it obtains an image of 450 (i.e., 300 × 1.5) by 300 (200 × 1.5):

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

{{ image | info }}

The variable image contains the following fields:

The following code generates the image tag:

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