Poids

La question que je me pose est de savoir si réduire l'affichage par un attribut adaptatif réduisait le poids de l'image: eh bien, Non !

L'image s'affiche bien en taille définie mais le transfert se fait sur l'image hébergée à sa taille d'origine: autrement dit, l'image s'affiche en 1536x864px mais pèse autant que celle en 1920x1080px !

Il semble donc que si nous voulons réduire le poids de tranfert d'une image, hébergée en 1920x1080px (par exemple) et l'afficher en taille adaptative, il faille cumuler deux écritures: l'attribut largeur adaptatif: width:80vw; et le dimensionnement par @1536x864.jpg.

Cette image pèse:

en 1920x1080 :887ko

en 1536x864: 650ko

Je l'ai hébergée en 1920x1080px sur Ekla et je vais la publier en la dimensionnant:

— par style="80vw";

— par <img src="http://ekladata.com/y-oSQ0y0xcDkdHgSUk-4Y5m_-9s@1536x864.jpg">, qui correspond à 80% de la largeur de mon écran

— par <img style="80vw;" http://ekladata.com/y-oSQ0y0xcDkdHgSUk-4Y5m_-9s@1536x864.jpg">

En 80vw sur l'image hébergée en 1920x1080px, le poids est de 887ko avec affichage en 1536x864px sur mon écran.

En @1536x864.jpg, le poids est de 555ko avec affichage en 1536x864px non adaptatif.

En 80vw et @1536x864.jpg, le poids est de 555ko en adaptatif.

Il semble donc que nous pouvons héberger nos images dans le format qui nous convient, les dimensionner à la création, par @WxH.jpg et ajouter l'attribut qui nous convient pour l'affichage en adaptatif.

Même en redimensionnant l'image par un logiciel de traitement d'image, elle pèse 650ko pour 555ko avec @WxH.jpg: curieux mais je vais appliquer et ne plus m'embêter à redimensionner avant hébergement !

Ne pas oublier, lorsque vous définissez les valeurs @WxH.jpg de conserver le ratio de vos images (16/9, 4/3...) pour ne pas le déformer.