• 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');">&nbsp;</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');">&nbsp;</p>

    <p style="width:1000px; height:563px; background:url('http://aaaa.jpg'); background-size:1000px 563px;">&nbsp;</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.