Dimensionner une image en REM, que faire dans le code html ?

Bonjour,

Quand un site est dimensionné en rem il semble logique que les images sur ce site qui sont dimensionnées en pixel soient dimensionnées en rem.

Mais dans le code html les déclarations de width et height se font sans unité et implicitement en px.

<img src="mon_image.svg" width="160" height="160" alt="" />

Dans la feuille de style :

img {width: 10rem; height: 10rem}

Si un visiteur a défini sa police par défaut à 32px (cas d'école, il est quasiment aveugle...) l'image aura 320px de large.

Y a-t-il conflit avec la déclaration dans le code html ?

Je vais faire l'essai mais y a-t-il une réponse théorique ?

Salut,

c'est simple :
1. lorsque le html de ta page se charge, l'image prendra les dimensions que tu lui auras paramétrées.
2. lorsque le css de ta page se charge, l'image prendra les dimensions que tu lui auras paramétrées dans ta feuille de style (surcharge).

Le problème étant que tu perdras le CLS¹². Ce qui est une mauvaise pratique si les dimensions sont eronnées.

Donc, tu paramètres la valeur des attributs dans le html de tes images afin d'éviter le problème de CLS¹².
_______
¹ Cumulative Layout Shift
² article MDN
Modifié par Niuxe (22 Dec 2025 - 09:36)

Bonjour Niuxe,

Je ne suis pas sûr d'avoir bien compris.

Ton conseil d'après ce que j'ai compris :
Déclarer à la fois dans le html et le CSS :

<img src="mon_image.svg" width="160" height="160" alt="" />

img {width: 10rem; height: 10rem}

Et je perds le CLS si la;police du visiteur est différente de 16px.

Autre chose, les attributs width et height dans le html, servent-ils à déterminer la taille de l'image ou seulement la ratio entre la hauteur et la largeur.

Ce n'est pas très clair chez MDM :

MDM a écrit :
Utilisez à la fois width et height pour définir la taille intrinsèque de l'image, ce qui lui permet de prendre de la place avant son chargement et de limiter les décalages de mise en page.

Note : Inclure height et width permet au navigateur de calculer les proportions de l'image avant son chargement. Ces proportions sont utilisées pour réserver l'espace nécessaire afin d'afficher l'image et de réduire voire d'empêcher tout décalage à l'affichage, permettant ainsi une navigation plus agréable et de meilleures performances.

Modifié par boteha_2 (22 Dec 2025 - 13:04)

@niuxe
Bien vrai, et on rencontre encore ce phénomène (on trouve aussi le nom "repaint" en anglais) sur de nombreux sites web. Particulièrement les sites qui ont à la fois beaucoup de texte et beaucoup d'images. Le Figaro a été touché un certain temps par ces décalages. Ils ont depuis corrigé ça. C'est très pénible à supporter.
Mais je crois que bothea_2 posait aussi une autre question ; le fait que dans le html, les dimensions des images ont une valeur, mais pas de signe pour définir ces valeurs. Je m'étais aussi posé cette question, et je n'ai pas la réponse.
Qu'en est-il ?
Par curiosité, parce que sinon, ça fonctionne.

@boheta_2
C'est pourtant clairement expliqué : "Inclure height et width permet au navigateur de calculer les proportions de l'image avant son chargement. Ces proportions sont utilisées pour réserver l'espace nécessaire afin d'afficher l'image et de réduire voire d'empêcher tout décalage à l'affichage, permettant ainsi une navigation plus agréable et de meilleures performances".

Les dimensions de l'image données dans le html permettent au navigateur de "réserver" une place pour cette image. La place correspondant aux valeurs données dans le html. Si on ne le fait pas, le navigateur ne réserve pas cette place au moment de son très bref passage. Quand l'image arrive, bien après le texte déjà en place, elle pousse ce texte pour prendre sa place. D'où l'expérience très désagréable pour le visiteur, qui voit la page bouger avant de se stabiliser.
La taille de la police que donne le visiteur dans son navigateur n'a pas d'incidence sur ce problème.
C'est comme au concert, tu réserves une place numérotée, tu la retrouves en arrivant. Tu ne réserves pas, tu vas pousser les gens déjà assis (s'ils acceptent) pour prendre ta place.

Je vais faire un essai avec la déclaration suivante :

<img src="mon_image.svg" width="160" height="160" style="width: 10rem; height: 10rem" alt="" />

Et modifier dans le navigateur la taille par défaut de la police, donc la valeur de REM.

je vous tiens informés.

boteha_2 a écrit :

<img src="mon_image.svg" width="160" height="160" style="width: 10rem; height: 10rem" alt="" />

Du style inline ?

Si tu modifies la taille de la police racine, tes 10rem changeront, rendant les attributs width/height HTML inutiles et provoquant du CLS.

La règle d'or :
1. Dimensions en pixels (attributs HTML) pour réserver l'espace.
2. CSS en pixels pour les éléments fixes (img, iframe).
3. Le rem pour tout ce qui doit être fluide : typo, espacements (paddings/margins) et conteneurs de texte.
4. Et n'oublie pas loading="lazy" pour le gain de performance au chargement ! (iframe & img)"
Modifié par Niuxe (22 Dec 2025 - 22:41)

Niuxe a écrit :
Du style inline ? Smiley hum

C'est pour un test.
Cela dit, quand le code html est créé côté serveur (PHP) je ne vois pas d'inconvénient à du style inline.
En petite quantité bien sûr, typiquement pour dimensionner des images avec width, height, parfois padding.
Le CSS .dynamique peut être envoyé soit dans le head de la page (<style>), soit inline.

J'ai fait un test avec du style en rem dans le head :

<style>
img[src="im/co/41.svg"] {width: 6.875rem; height: 6.4816547881rem}
img[src="im/co/122.svg"] {width: 5.3125rem; height: 4.0894567972rem}
</style>

<img src="im/co/41.svg" alt="" width="110" height="104" />
<img src="im/co/122.svg" alt="" width="85" height="66" />

J'ai mis la police par défaut de Firefox à 24, alors que font-size est à 16px dans le root.

À l'affichage rien de choquant, les SVG prennent immédiatement la bonne taille.

Test PageSpeed Insights

First Contentful Paint 0,9 s
Largest Contentful Paint 0,9 s
Total Blocking Time 10 ms
Cumulative Layout Shift 0
Speed Index 0,9 s

Rien d'alarmant me semble-t-il.

Maintenant, si je supprime les déclarations de taille en rem dans <style> les SVG prennent la taille en px donnée dans img.
Donc deviennent plus petites.

Il me semble intéressant de constater que la déclaration CSS dans <style> prend le dessus sur les attributs width et height dans img.


Tu parles de loading mais pour des images au dessus de ligne de flottaison je ne vois pas comment cela peut m'aider.
Modifié par boteha_2 (22 Dec 2025 - 23:06)

Les déclarations de taille de police faites dans les réglages du navigateur sont destinées à modifier la taille des polices du site.
Cependant, ta question est pertinente. J'ai effectué un test sur l'un de mes sites. Sur Chromium, la taille des caractères réduite à "very small", les images du site ne bougent pas. Exceptées celles d'une galerie d'images qui suivent la taille des polices de caractère.
Je n'avais jamais remarqué ça et l'effet n'a lieu que sur cette galerie. Elle est en flex, avec les dimensions données en % dans le css. J'ai effectué un essai avec des dimensions en rem pour cette galerie, ça n'a rien changé ; la taille de la galerie suit la taille des polices.
Qui a une réponse à ce problème ?

Bonjour,

Bongota a écrit :
Les déclarations de taille de police faites dans les réglages du navigateur sont destinées à modifier la taille des polices du site.

C'est vrai, mais si la taille des polices est modifiée il vaut mieux que la taille des blocs où est le texte soit aussi modifiée, et finalement aussi la taille des images.

En gros il faut coder toutes les tailles en rem (ou autre unité relative comme %, em, etc) sauf les bordures qui restent en px.
Modifié par boteha_2 (23 Dec 2025 - 13:05)

Joyeux Noël,

1) j'ai fait une expérience avec sur une page plus de 150 vignettes, sur une colonne verticale, selon la hauteur de l'écran de 3 à 10 vignettes affichées.

Pour chaque vignette cette déclaration, avec paramètres propres à la vignette :

<img src="im/pr/2335G.jpg" width="110" height="109" style="width: 6.875rem; height: 6.7890625rem" loading="lazy" alt="">

Cela fonctionne bien.

First Contentful Paint 1,5 s
Largest Contentful Paint 1,5 s
Total Blocking Time 0 ms
Cumulative Layout Shift 0
Speed Index 2,4 s

La taille est bien en rem, donc dépendante des réglages du visiteur.

2) Dans de rares cas, j'aimerais ne pas tenir compte des paramètres du visiteur, pas exemple imposer font-size à 16px alors qu'il réclame une autre valeur.

J'ai l'impression que c'est impossible avec CSS.

j'ai essayé

:root
{
font-size: 16px !important
}

Sans effet.
Modifié par boteha_2 (25 Dec 2025 - 16:08)

a écrit :
Dans de rares cas, j'aimerais ne pas tenir compte des paramètres du visiteur, par exemple imposer font-size à 16px alors qu'il réclame une autre valeur.

Tenter d'imposer sa vision de développeur est un vieux rêve qui n'a jamais fonctionné. Il faut laisser les utilisateurs définir la taille de base des polices de caractères. L'immense majorité ne touche d'ailleurs jamais à cette valeur. Le travail du développeur est justement de penser à cette inconnue et de proposer ce qui fonctionnera le mieux.
Je ne comprends pas ce que viennent faire les mesures de performance dans ce cas précis. Que le visiteur décide d'une autre valeur de taille de police ou que ce soit toi qui le fasse dans le html, ça ne va pas changer les performances du site. Ce ne sont pas les dimensions que tu donnes dans le html qui définissent le poids des images, mais le poids réel de ces images. Si tu proposes une image de 1024x768 pesant 1 Mo mais que tu donnes comme dimensions 400x250, ce sont bien 1 Mo qui vont être chargés, inutilement.
Dans ce cas, lazy load, srcset, size et Pixel Density s'avèrent d'un meilleur secours.

Bonjour Bongota,

Bongota a écrit :
Tenter d'imposer sa vision de développeur est un vieux rêve qui n'a jamais fonctionné. Il faut laisser les utilisateurs définir la taille de base des polices de caractères.

100 % d'accord, c'est d'ailleurs pour cela que je passe des px aux rem.
Si je cherche comment ignorer le choix du visiteur c'est juste pour contrôler la taille d'un bouton, pas méchant et pas important.

Bongota a écrit :
Je ne comprends pas ce que viennent faire les mesures de performance dans ce cas précis. Que le visiteur décide d'une autre valeur de taille de police ou que ce soit toi qui le fasse dans le html, ça ne va pas changer les performances du site.

Je mesure la performance pour cette déclaration répétée x fois avec des valeurs différentes :

<img src="im/pr/2335G.jpg" width="110" height="109" style="width: 6.875rem; height: 6.7890625rem" loading="lazy" alt="">

Il y a des indications de taille en px (implicitement) et en rem, il me semble que cela mérite une petite mesure.

Les attributs HTML width et height ne servent plus réellement à fixer la taille finale d’affichage, mais à définir le ratio intrinsèque de l’image. Le navigateur s’en sert pour réserver l’espace dès le parsing du HTML et éviter le CLS.

Bonjour,

harrystyles a écrit :
Les attributs HTML width et height ne servent plus réellement à fixer la taille finale d’affichage, mais à définir le ratio intrinsèque de l’image.

Quand la taille de l'image est calculée en rem il est indispensable de donner au moins la width en CSS, en plus de width et height dans le code html.

Quand elle est calculée en px et que width et height sont renseignés dans le code html je ne sais pas si c'est utile d'en rajouter une couche dans le CSS, mais visiblement cela ne nuit pas.