DocumentationAEMGuide de l’utilisateur

[AEM Assets]{class="badge positive" title="S’applique à AEM Assets)."}

À propos de l’imagerie dynamique avec rapport des pixels d’appareil côté client (RPD) client-side-dpr

Dernière mise à jour : 9 septembre 2026
  • S'applique à :
  • Experience Manager as a Cloud Service

Créé pour :

  • Admin
  • User

La solution d’imagerie dynamique actuelle utilise des chaînes d’agent utilisateur pour déterminer le type d’appareil utilisé (ordinateur de bureau, tablette, mobile, etc.).

Les fonctionnalités de détection d’appareil (DPR basé sur des chaînes d’agent utilisateur) sont souvent inexactes, en particulier pour les appareils Apple. En outre, chaque fois qu’un nouvel appareil est lancé, il doit être validé.

Le DPR côté client fournit des valeurs parfaitement précises et fonctionne pour n’importe quel appareil, qu’il s’agisse d’Apple ou de tout autre nouvel appareil publié.

Utilisation du code DPR côté client

Applications rendues côté serveur

  1. Chargement de l’init du service worker (srvinit.js) en incluant le script suivant dans la section d’en-tête de votre page de HTML :

    code language-javascript 
    <script type="text/javascript" src="srvinit.js"></script>

    Adobe recommande de charger ce script avant tout autre script, de sorte que le service worker commence immédiatement l’initialisation.

  2. Insérez le code de balise d’image DPR suivant en haut de la section corps de votre page de HTML :

    code language-html 
    <img src="aem_dm_dpr_1x.jpg" style="width:1px;height:1px;display:none"
    srcset="aem_dm_dpr_1x.jpg 1x, aem_dm_dpr_1.1x.jpg 1.1x, aem_dm_dpr_1.2x.jpg 1.2x, aem_dm_dpr_1.3x.jpg 1.3x, aem_dm_dpr_1.4x.jpg 1.4x, aem_dm_dpr_1.5x.jpg 1.5x, aem_dm_dpr_1.6x.jpg 1.6x,          aem_dm_dpr_1.7x.jpg 1.7x, aem_dm_dpr_1.8x.jpg 1.8x, aem_dm_dpr_1.9x.jpg 1.9x,
    aem_dm_dpr_2x.jpg 2x, aem_dm_dpr_2.1x.jpg 2.1x, aem_dm_dpr_2.2x.jpg 2.2x, aem_dm_dpr_2.3x.jpg 2.3x, aem_dm_dpr_2.4x.jpg 2.4x, aem_dm_dpr_2.5x.jpg 2.5x, aem_dm_dpr_2.6x.jpg 2.6x, aem_dm_dpr_2.7x.jpg 2.7x, aem_dm_dpr_2.8x.jpg 2.8x, aem_dm_dpr_2.9x.jpg 2.9x,
    aem_dm_dpr_3x.jpg 3x, aem_dm_dpr_3.1x.jpg 3.1x, aem_dm_dpr_3.2x.jpg 3.2x, aem_dm_dpr_3.3x.jpg 3.3x, aem_dm_dpr_3.4x.jpg 3.4x, aem_dm_dpr_3.5x.jpg 3.5x, aem_dm_dpr_3.6x.jpg 3.6x, aem_dm_dpr_3.7x.jpg 3.7x, aem_dm_dpr_3.8x.jpg 3.8x, aem_dm_dpr_3.9x.jpg 3.9x,
    aem_dm_dpr_4x.jpg 4x, aem_dm_dpr_4.1x.jpg 4.1x, aem_dm_dpr_4.2x.jpg 4.2x, aem_dm_dpr_4.3x.jpg 4.3x, aem_dm_dpr_4.4x.jpg 4.4x, aem_dm_dpr_4.5x.jpg 4.5x, aem_dm_dpr_4.6x.jpg 4.6x, aem_dm_dpr_4.7x.jpg 4.7x, aem_dm_dpr_4.8x.jpg 4.8x, aem_dm_dpr_4.9x.jpg 4.9x,
    aem_dm_dpr_5x.jpg 5x">

    Vous devez inclure ce code de balise d’image DPR avant toutes les images statiques dans votre page HTML.

Applications rendues côté client

  1. Insérez les scripts DPR suivants dans la section d’en-tête de votre page de HTML :

    code language-javascript 
    <script type="text/javascript" src="srvinit.js"></script>
<script type="text/javascript" src="dprImageInjection.js"></script>

    Pour éviter plusieurs requêtes réseau, vous pouvez combiner les deux scripts DPR en un seul.

    Adobe recommande de charger ces scripts avant tout autre script dans la page de HTML.
    Adobe recommande également d’initialiser votre application à l’aide d’une balise HTML différente au lieu de l’élément de corps . En effet, dprImageInjection.js injecte dynamiquement la balise d’image en haut de la section du corps de la page HTML.

Téléchargement des fichiers JavaScript client-side-dpr-script

Les fichiers JavaScript suivants sont fournis à titre de référence uniquement dans le cadre du téléchargement. Si vous envisagez d’utiliser ces fichiers dans des pages HTML, veillez à modifier le code de chaque fichier pour répondre à vos propres besoins.

  • dprImageInjection.js
  • srvinit.js
  • srvwrk.js

Téléchargement des fichiers JavaScript

Related Articles
recommendation-more-help
experience-manager-cloud-service-help-main-toc