Comment redimensionner et recadrer automatiquement vos images avec Fasterize ?

Introduction

Le poids des images représente souvent la part la plus importante des ressources téléchargées par un navigateur. Des images trop lourdes ou mal dimensionnées peuvent ralentir l’affichage des pages, dégrader les Core Web Vitals et impacter l’expérience utilisateur.

Pour répondre à ces problématiques, Fasterize permet de redimensionner et recadrer automatiquement les images à la volée grâce à des paramètres d’URL.

Cette fonctionnalité permet notamment de :

• générer plusieurs tailles d’images à partir d’une seule source ;
• adapter les images aux différents écrans ;
• réduire significativement le poids des ressources ;
• améliorer les performances de chargement.

Le traitement est effectué en temps réel puis les images optimisées sont servies directement depuis notre CDN.

Comment fonctionne le redimensionnement d’images avec Fasterize ?

Le moteur d’optimisation Fasterize applique les transformations directement via des paramètres ajoutés à l’URL de l’image.

À chaque requête :

• l’image source est récupérée ;
• la transformation demandée est appliquée ;
• la nouvelle version est mise en cache puis servie via le CDN.

Cela permet de créer dynamiquement différentes variantes d’une même image sans avoir à générer plusieurs fichiers manuellement.

💡 Une seule image source peut ainsi être utilisée pour le desktop, la tablette et le mobile.

Quelle est la différence entre resizing et cropping ?

Fasterize distingue deux mécanismes principaux : le redimensionnement et le recadrage.

Redimensionnement (resizing)

Le redimensionnement conserve les proportions de l’image d’origine.

Par exemple :

• une largeur maximale peut être définie ;
• la hauteur est alors recalculée automatiquement.

Ce mode est particulièrement utile pour :

• les images responsive ;
• les miniatures ;
• les galeries produits.

Recadrage (cropping)

Le recadrage adapte l’image à un format précis en supprimant une partie de l’image.

Contrairement au resizing :

• les proportions originales ne sont pas conservées ;
• une zone de l’image peut être coupée.

Ce comportement est utile pour :

• les bannières ;
• les cartes produits ;
• les formats uniformes dans un listing.

💡 Exemple : transformer une image desktop horizontale en miniature mobile verticale.

Redimensionner une image avec frz-width et frz-height

Définir une largeur maximale

Le paramètre frz-width (ou frz-w) permet de définir une largeur maximale.

Exemple :

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


Dans ce cas :

• l’image est redimensionnée à une largeur maximale de 1000 px ;
• la hauteur est automatiquement calculée pour conserver les proportions.

Définir une hauteur maximale

Le paramètre frz-height (ou frz-h) fonctionne de la même manière pour la hauteur.

Exemple :

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


L’image est alors redimensionnée avec :

• une hauteur maximale de 300 px ;
• une largeur recalculée automatiquement.

Recadrer une image avec Fasterize

Lorsque frz-width et frz-height sont utilisés simultanément, Fasterize peut appliquer un recadrage automatique.

Exemple :

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


L’image est alors adaptée exactement aux dimensions demandées.

Par défaut :

• Fasterize conserve la zone jugée la plus importante de l’image ;
• le mode cover est appliqué.

Choisir la zone de recadrage avec frz-gravity

Le paramètre frz-gravity permet de contrôler la zone conservée lors du recadrage.

Exemple :

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


Valeurs disponibles :

• north
• south
• east
• west
• center
• entropy
• attention

Comprendre entropy et attention

Les modes entropy et attention utilisent des algorithmes de détection automatique.

entropy

Ce mode cible :

• la zone contenant le plus de détails visuels ;
• la région présentant la plus forte “richesse” graphique.

C’est le comportement par défaut du moteur Fasterize.

attention

Ce mode cible :

• les zones attirant naturellement le regard ;
• les couleurs fortes ;
• les zones lumineuses ;
• les visages et tons de peau.

💡 Le mode attention peut être particulièrement utile pour les photos lifestyle ou les visuels contenant des personnes.

Comprendre les modes frz-fit

Le paramètre frz-fit contrôle la manière dont Fasterize interprète les dimensions demandées.

cover (mode par défaut)

L’image couvre entièrement les dimensions demandées.

Caractéristiques :

• conservation des proportions ;
• possible recadrage.

Cas d’usage :

• bannières ;
• cartes produits ;
• thumbnails uniformes.

contain

L’image est entièrement visible dans la zone définie.

Caractéristiques :

• aucune partie coupée ;
• conservation des proportions ;
• bandes vides possibles.

Exemple :

?frz-height=100&frz-width=400&frz-fit=contain


fill

L’image est étirée pour remplir exactement les dimensions demandées.

Caractéristiques :

• aucune conservation des proportions ;
• risque de déformation.

Cas d’usage :

• éléments graphiques spécifiques ;
• placeholders.

inside

L’image est redimensionnée pour rester entièrement à l’intérieur des dimensions fournies.

Caractéristiques :

• conservation des proportions ;
• dimensions toujours inférieures ou égales à la cible.

outside

L’image est redimensionnée pour couvrir au minimum les dimensions fournies.

Caractéristiques :

• conservation des proportions ;
• dimensions toujours supérieures ou égales à la cible.

Exemple visuel des différents modes de redimensionnement

Le visuel ci-dessous illustre le comportement des différents modes frz-fit appliqués à une même image source.

Il permet de comparer :

• le redimensionnement simple ;
• le recadrage automatique ;
• la conservation des proportions ;
• les différences entre les modes contain, fill, inside et outside.

💡 Le mode cover est utilisé par défaut par Fasterize lorsqu’une largeur et une hauteur sont définies simultanément.

ModeComportementRecadragecoverRemplit complètement la zoneOuicontainConserve toute l’imageNonfillÉtire l’imageNoninsideReste à l’intérieur des dimensionsNonoutsideDépasse au minimum les dimensionsPossible

Empêcher l’agrandissement des images avec frz-enlarge=false

Par défaut, Fasterize n’agrandit pas les images trop petites.

Le paramètre :

frz-enlarge=false


permet de conserver ce comportement explicitement.

Cela évite :

• une perte de qualité ;
• un flou visuel ;
• des images artificiellement agrandies.

⚠️ Agrandir une petite image n’améliore jamais sa qualité d’origine.

Impact Web Performance du redimensionnement d’images

Le redimensionnement d’images permet de réduire drastiquement le poids des ressources téléchargées.

Les bénéfices principaux sont :

• réduction du temps de chargement ;
• amélioration du Largest Contentful Paint (LCP) ;
• diminution de la consommation CPU côté navigateur ;
• optimisation de l’expérience mobile ;
• réduction de la bande passante utilisée.

Le navigateur n’a également plus besoin de redimensionner lui-même les images, ce qui améliore les performances de rendu.

💡 Utiliser des dimensions adaptées à chaque viewport permet d’éviter le téléchargement d’images inutilement volumineuses.

Limitations de la fonctionnalité

Formats supportés :

• JPEG
• PNG
• WebP
• AVIF

Formats non supportés :

• GIF
• SVG

Cas particulier des images PNG

Certaines images PNG8 peuvent devenir plus lourdes après transformation.

Dans ce cas, il est recommandé d’activer :

• l’optimisation agressive PNG ;
• la conversion PNG24 vers PNG8.

Cela permet de réduire significativement le poids final des images.

Conclusion

Le redimensionnement et le recadrage d’images avec Fasterize permettent d’adapter automatiquement les visuels à chaque contexte d’affichage tout en améliorant les performances Web.

Grâce aux paramètres d’URL :

• plusieurs variantes peuvent être générées à la volée ;
• les images deviennent plus légères ;
• le rendu responsive est simplifié ;
• l’expérience utilisateur est améliorée.

Les paramètres frz-fit et frz-gravity offrent également un contrôle précis sur le rendu final des images.

💡 Pour obtenir les meilleurs résultats, combinez cette fonctionnalité avec les autres optimisations d’images Fasterize.

‍