# L'attribut srcset peut charger des images plus grandes sur mobile que sur ordinateur

**URL:** <https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039>\
**Category:** UX\
**Tags:** mobile\
**Created:** [Mai 6, 2023, 3:12 UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039 "2023-05-06T03:12:51Z")\
**Posts on this page:** 1\
**Showing post:** 11

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [Mai 6, 2023, 1:12 UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039/11 "2023-05-06T13:12:16Z")

</div>

Je me trompe peut-être, mais je pense que cela a du sens.  
Si vous regardez le `srcset` HTML, les images suivantes sont servies en fonction du rapport de pixels de l’appareil (x1, x1,5, x2).

```html
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_690x460.jpeg,
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_1035x690.jpeg 1.5x,
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_1380x920.jpeg 2x

```

Habituellement, les mobiles ont un rapport x2 (ou plus) car ils ont une densité de pixels plus élevée.  
Vous voudrez donc servir des images avec une résolution plus élevée.

> **Rapport de pixels de l'appareil**
>
> > Le rapport de pixels de l’appareil (DPR) est un nombre donné par les fabricants d’appareils et il est utilisé pour les écrans HiDPI (High Dots Per Inch) ou Retina (marque déposée d’Apple), qui font partie des smartphones, tablettes et même certains ordinateurs portables et moniteurs modernes.  
> > Le DPR est en corrélation directe avec la densité de pixels de l’écran, plus la densité est élevée, plus la valeur du DPR est grande.
> > 
> > Le DPR est le rapport entre les pixels physiques (de l’appareil) et les pixels logiques (CSS) dans la direction horizontale (largeur) ou verticale (hauteur) d’un écran.  
> > En d’autres termes, le DPR est un nombre utilisé pour calculer la résolution CSS de l’écran. À partir du DPR, nous pouvons voir directement combien de pixels matériels réels composent un pixel CSS.
> > 
> > Exemple :  
> > Apple iPhone 12  
> > Résolution en pixels de l’appareil (physiques) : 1170 x 2532  
> > DPR : 3  
> > Largeur : 1170/3 = 390, Hauteur : 2532/3 = 844  
> > Par conséquent, résolution en pixels CSS : 390 x 844
> > 
> > Puisque le DPR est de 3, dans la grille de pixels : 3 (largeur) x 3 (hauteur) = 9 ; 9 pixels physiques sont utilisés pour former un pixel CSS.

---

_[View the full topic](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039)._