[PaaS uniquement]{class="badge informative" title="S’applique uniquement aux projets Adobe Commerce on Cloud (infrastructure PaaS gérée par Adobe) et aux projets On-premise."}

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.

redimensionnement de l’image

TIP
Pour les projets d’infrastructure cloud d’Adobe Commerce, consultez Configuration du stockage distant pour Commerce sur l’infrastructure cloud

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 :

  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 de média catalogue, effacez Use system value.

  4. Sélectionnez l’URL de Image optimization based on query parameters dans le champ Format d’URL des médias de catalogue.

  5. Cliquez sur Save Config.

  6. 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 :

  1. Installez le module de filtrage 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 de 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 carte spécifique.

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