-
Taille image
Ces derniers temps, j'utilise une écriture pour dimensionner les images, qui n'est pas claire pour certains; alors, je vais revenir à une écriture plus compréhensible même si elle provoque un petit inconvénient.
Une adresse image se présente sous une forme de ce genre: <img src="http://aaaaaaaa.jpg">
Cette adresse image correspond à l'image que vous avez hébergée, en taille (largeur/hauteur) et en poids (px).
Plus une image est grande et donc lourde en px, et plus le temps de transfert de votre hébergeur à votre blog est long, d'autant plus long qu'il y a d'images dans votre article.
Pour une image placée en direct dans votre article, deux écritures au moins: exemple en 1000x563px pour conserver le ratio 16/9.
<img style="width:1000px; height:563px;" src="http://aaaaa.jpg">
<img src="http://aaaaa@1000x563.jpg">
La première écriture conserve le poids de l'image hébergée et la redimensionne; un peu plus longue en écriture.
La seconde écriture redimensionne l'image en réduisant son poids en rapport; l'inconvénient en écriture est qu'on ne peut copier/coller directement l'adresse: il faut ajouter @1000x563 dans l'adresse.
*********
Lorsque l'image est placée en fond de cadre, même choix d'écriture.
<p style="width:1000px; height:563px; background:url('http://aaaa.jpg');"> </p>
Dans cette écriture, le cadre mesure 1000px par 563px mais l'image est dans sa taille d'origine; deux écritures encore:
<p style="width:1000px; height:563px; background:url('http://aaaa@1000x563.jpg');"> </p>
<p style="width:1000px; height:563px; background:url('http://aaaa.jpg'); background-size:1000px 563px;"> </p>
La première écriture dimensionne l'image de fond à la taille du cadre que vous avez définie.
La seconde écriture utilise l'image en format d'origine et le dimensionnement est fait par background-size.
*********
Le dimensonnement de l'image de fond par background-size peut s'écrire: background-size:cover;
Dans ce cas, l'image va s'adapter aux dimensions du cadre, quitte à la déformer.
J'ai repris différents codes proposés pour qu'ils soient plus clairs à utiliser.