Principe

Le moteur Fasterize permet de redimensionner et recadrer les images à la volée.

Redimensionner (resizing) - L'image source sera redimensionnée à la hauteur et à la largeur spécifiées. Cette action permet de créer plusieurs variantes de tailles différentes pour chaque utilisation spécifique, et ce à partir d'une même image source.

Recadrer (cropping) - L'image source sera redimensionnée à une nouvelle taille qui ne conserve pas les proportions d'origine et une partie de l'image sera supprimée. Cela peut être particulièrement utile pour les images de produits où différents formats doivent être obtenus en ne conservant qu'une partie de l'image.

Notre moteur d'optimisation redimensionne vos images via des paramètres d'URL. Les images sont redimensionnées en temps réel puis servies directement par notre CDN.

Example

// redimensionne l'image pour qu'elle ait une largeur maximum de 1000px. La hauteur de l'image est calculée pour maintenir les proportions.

http://www.domain.com/image.png?frz-w=1000

// redimensionne l'image pour qu'elle ait une hauteur maximum de 300px. La largeur de l'image est calculée pour maintenir les proportions.

http://www.domain.com/image.png?frz-h=300


// recadrage de l'image pour obtenir une image d'une hauteur de 100px et d'une largeur de 400px. La zone de recadrage est automatiquement détectée pour conserver l'élément le plus important de l'image.

http://www.domain.com/image.png?frz-height=100&frz-width=400


// recadrage de l'image pour obtenir une image d'une hauteur de 100px et d'une largeur de 400px,recadrée à partir du centre de l'image

http://www.domain.com/image.png?frz-height=100&frz-width=400&frz-gravity=center

// redimensionnement  de l'image pour obtenir une image d'une hauteur de 100px et d'une largeur de 400px contenant l'image (l'image n'est pas recadrée)

http://www.domain.com/image.png?frz-height=100&frz-width=400&frz-fit=contain

Image d'origine

w=250	h=100	w=250, h=100	w=250, h=100, fit=inside
w=250, h=100, fit=contain	w=250, h=100, fit=fill	w=250, h=100, fit=outside

Paramètres de réglage

frz-resizeimgs=true

Si l'option n'est pas activée dans votre configuration, force l'utilisation de la feature pour la ressource requêtée avec ce paramètre.

frz-height=x ou frz-h=x

Spécifie la hauteur maximale de l'image en pixels. Le comportement exact dépend du fit mode (décrit ci-dessous).

frz-fit=mode

Affecte l'interprétation de `frz-width` et `frz-height`. Les modes disponibles sont:

• cover - Recadré pour couvrir les deux dimensions fournies (valeur par défaut).
• contain - Intégré dans les deux dimensions fournies.
• fill - Ignore la proportion de l'image en entrée et étire les deux dimensions fournies.
• inside - En conservant les proportions, redimensionnez l'image pour qu'elle soit aussi grande que possible tout en vous assurant que ses dimensions sont inférieures ou égales à celles spécifiées.
• outside - En conservant les proportions, redimensionnez l'image pour qu'elle soit aussi petite que possible tout en veillant à ce que ses dimensions soient supérieures ou égales à celles spécifiées.

frz-gravity=position

Les différentes valeurs possibles sont : north, northeast, east, southeast, south, southwest, west, northwest, center, entropy, attention.

Les valeurs entropy et attention utilisent un algorithme de détection de la zone de l'image la plus intéressante.

La valeur entropy est utilisée par défaut. 

D'un point de vue technique,

• entropy : cible la région avec la plus forte entropie (au sens de Shannon).
• attention : cible la région avec la plus haute fréquence de luminance, la saturation de couleur et la présence de tons de la peau.

frz-enlarge=false

Spécifie le fait d'accepter d'agrandir une image après redimensionnement.

Par défaut, le moteur ne fait pas d'agrandissement d'images.

Impact WebPerf

L'impact attendu est une diminution drastique du poids de l'image. Celle-ci est donc téléchargé plus rapidement par le navigateur. Par ailleurs, le navigateur n'a pas besoin de redimensionner l'image ce qui économise des cycles CPU.

Limitations

La fonctionnalité est supportée pour les images JPEG, PNG, WebP et AVIF. Les formats GIF et SVG ne sont pas supportés.

Les images PNG peuvent avoir un poids d'image plus important si elles étaient en PNG8. Nous conseillons d'activer l'option "optimisation agressive (PNG24 vers PNG8)" pour réduire le poids de l'image.