• taille image

    Nos appareils photos nous donnent des images avec des résolutions importantes (20Mpx à 14Mpx) et dans des dimensions également importantes, trop importantes pour les publier sur un blog sans les réduire.

    Un exemple sur le nouvel appareil d'une fidèle visiteuse: le choix proposé par l'appareil est:

    5184x3888 ratio:4/3  soit 20Mpx.

    5184x2920 ratio:16/9 soit 15Mpx.

    1600x1200 ratio:4/3 soit 1.9Mpx

    Le ratio 4/3 est, je crois, moins utilisé désormais et le 16/9 plus général mais c'est une question de goût. (rapport entre largeur et hauteur).

    Nous avons donc deux difficultés:

    - ta taille pour publier notre image dans notre zone article de blog et

    - le poids de cette image pour l'afficher depuis notre plateforme sur notre page, ce qui dépend également de la qualité de votre connexion ou de celle de vos visiteurs/ses.

    Si nous hébergeons notre image en grand format, nous pourrons ensuite l'afficher dans une taille définie mais les transferts de l'image sera toujours à partir de votre image "lourde"; seul, l'affichage la réduira en taille à l'affichage.

    Si notre article comporte plusieurs images, en montage ou non, les temps de chargements de ces images s'ajoutera et peut devenir important.

    Un autre paramètre permet de réduire le poids d'une image est de diminuer sa compression donc, sa netteté ... mais cela a des limites !

     

    Nous nous retrouvons donc devant la nécessité de réduire la taille de nos images, afin de les héberger dans un format qui s'approche de celui de la publication.

    Pour réduire la taille d'un image, nous avons différentes possibilités:

    Sans logiciel de traitement d'image, vous trouvez, en ligne et en gratuit, des sites qui transforment votre image en taille d'origine dans le format choisi; vous téléchargez cette image réduite et vous l'hébergez comme d'habitude.

    Avec logiciel de traitement d'image, gratuit ou non (Photofiltre, The Gimp...), vous pouvez redimensionner votre image et l'héberger comme d'habitude.

    La réduction de la taille d'une image diminue mécaniquement son poids (voir ci-dessus et ci-dessous), pour une même image au même ratio (16/9).

    1920x1080px 927ko

    1536x864px  687ko

    800x450px    234ko

    **************

    Sachant héberger notre image dans un format proche de celui de la publication, donc avec un poids de transfert minimum, nous pouvons dimensionner notre image dans notre article, par le code html.

    Soit, vous utilisez l'icône "image" de la création d'article et vous déterminez taille et position de vos images.

    Soit, vous copiez l'adresse de votre image et vous pouvez lui ajouter les attributs de taille (et décoration) avec le positionnement choisi.

    <img style="width:800px;" src="http://ekladata.com/PbMinc8AGeUSfB7zKN6w0LVIo3Q.jpg">

    <img src="http://ekladata.com/PbMinc8AGeUSfB7zKN6w0LVIo3Q@800x450.jpg">

    <p style="width:60vw; height:33.75vw; margin:2vh auto; background:url('http://ekladata.com/PbMinc8AGeUSfB7zKN6w0LVIo3Q.jpg'); background-size:cover;">&nbsp;</p>

     

    Mettre l'image en fond de cadre oblige à déterminer largeur et hauteur de ce cadre mais, avec background-size:cover; l'image remplit automatiquement le cadre, quelles que soient ses dimensions, en la déformant, éventuellement.