Configuration du redimensionnement des images pour le stockage distant
Par défaut, Adobe Commerce prend en charge le redimensionnement des images côté application. Cependant, en activant le module de stockage étendu, vous pouvez utiliser Nginx pour décharger le redimensionnement de l’image côté serveur, où vous pouvez économiser des ressources de disque et optimiser l’utilisation du disque.
Le diagramme suivant montre comment Nginx récupère, redimensionne et stocke les images dans le cache. Le redimensionnement est déterminé par les paramètres inclus dans l’URL, tels que la hauteur et la largeur.
Configuration du format des URL dans Adobe Commerce
Pour redimensionner les images côté serveur, vous devez configurer Adobe Commerce afin de fournir des arguments pour la hauteur, la largeur et l’emplacement (URL) de l’image.
Pour configurer Commerce pour le redimensionnement d’image côté serveur :
-
Dans le panneau Admin, cliquez sur Stores > Settings > Configuration > General > Web.
-
Dans le volet de droite, développez Url options.
-
Dans la section Format d’URL de média catalogue, effacez Use system value.
-
Sélectionnez l’URL de
Image optimization based on query parameters
dans le champ Format d’URL des médias de catalogue. -
Cliquez sur Save Config.
-
Passez à la configuration Nginx.
Configurer Nginx
Pour continuer à configurer le redimensionnement de l'image côté serveur, vous devez préparer le fichier nginx.conf
et fournir une valeur proxy_pass
pour la carte choisie.
Pour permettre à Nginx de redimensionner les images :
-
Installez le module de filtrage d'image Nginx.
code language-shell load_module /etc/nginx/modules/ngx_http_image_filter_module.so;
-
Créez un fichier
nginx.conf
basé sur le fichier denginx.conf.sample
de modèle inclus. Par exemple :code language-conf location ~* \.(jpg|jpeg|png|gif|webp)$ { set $width "-"; set $height "-"; if ($arg_width != '') { set $width $arg_width; } if ($arg_height != '') { set $height $arg_height; } image_filter resize $width $height; image_filter_jpeg_quality 90; }
-
[Facultatif] Configurez une valeur
proxy_pass
pour votre carte spécifique.