DocumentationCommerceGuide de configuration

Configuration du redimensionnement des images pour le stockage à distance

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Expérimenté
  • Administration
  • Développeur

Par défaut, Adobe Commerce prend en charge le redimensionnement des images du côté de l’application. Cependant, en activant le module de stockage distant, vous pouvez utiliser Nginx pour décharger le redimensionnement des images 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.

image resize

TIP
Pour Adobe Commerce sur les projets d’infrastructure cloud, voir Configuration de l’espace de stockage distant pour Commerce sur l’infrastructure cloud

Configuration du format d’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 :

  1. Dans le panneau Admin, cliquez sur Stores > Settings > Configuration > General > Web.

  2. Dans le volet de droite, développez Url options.

  3. Dans la section Format d’URL du média de catalogue, effacez Use system value.

  4. Sélectionnez l’URL Image optimization based on query parameters dans le champ Catalog media URL format .

  5. Cliquez sur Save Config.

  6. Passez à la configuration Nginx.

Configuration de Nginx

Pour continuer à configurer le redimensionnement des images côté serveur, vous devez préparer le fichier nginx.conf et fournir une valeur proxy_pass pour l’adaptateur choisi.

Pour permettre à Nginx de redimensionner les images :

  1. Installez le module de filtre d'image Nginx.

    code language-shell 
    load_module /etc/nginx/modules/ngx_http_image_filter_module.so;

  2. Créez un fichier nginx.conf basé sur le fichier nginx.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;
}

  3. [Facultatif] Configurez une valeur proxy_pass pour votre adaptateur spécifique.

recommendation-more-help
386822bd-e32c-40a8-81c2-ed90ad1e198c