Les Images

Afficher une image :

{{ post_img ? post_img.src('medium') : BLANK_IMG }}

<img src="{{ post_img ? post_img.src('medium') : BLANK_IMG }}" alt="" class="cover">    

Optimisation des images

1 - Avec des plugins

retina !

<img src="image-1x.jpg" 
     srcset="image-1x.jpg 1x, image-2x.jpg 2x" 
     alt="Description">

Voici un exemple concret utilisant la balise <picture> pour charger des images optimisées en fonction de la taille d'écran et de la résolution (1x ou 2x) :

Exemple HTML avec <picture> et srcset :

<picture>
    <!-- Pour les écrans larges -->
    <source 
        srcset="image-large-1x.jpg 1x, image-large-2x.jpg 2x" 
        media="(min-width: 1024px)">
    
    <!-- Pour les tablettes -->
    <source 
        srcset="image-medium-1x.jpg 1x, image-medium-2x.jpg 2x" 
        media="(min-width: 768px) and (max-width: 1023px)">
    
    <!-- Pour les smartphones -->
    <source 
        srcset="image-small-1x.jpg 1x, image-small-2x.jpg 2x" 
        media="(max-width: 767px)">
    
    <!-- Fallback (si <source> n'est pas supporté) -->
    <img 
        src="image-default.jpg" 
        alt="Description de l'image">
</picture>

---

Explications :

1. <picture> :

   • Permet de définir plusieurs versions d’une image en fonction des conditions (taille d’écran, résolution).

2. <source> avec media :

   • Le paramètre media définit quand la source doit être utilisée.

     • min-width : largeur minimale.

     • max-width : largeur maximale.

   • Exemple :

     • media="(min-width: 1024px)" : Pour les écrans de bureau (1024px et plus).

3. srcset :

   • Définit plusieurs résolutions d’images.

   • Exemple :

     • image-large-1x.jpg 1x : Image pour résolution standard.

     • image-large-2x.jpg 2x : Image Retina ou HiDPI (résolution x2).

4. <img> :

   • Sert de fallback pour les navigateurs qui ne supportent pas <picture> (comme certains navigateurs anciens).

---

Exemple pratique avec des dimensions d'image :

Appareil	Taille d'écran	Taille d'image recommandée
Smartphone	≤ 767px	600px (1x) / 1200px (2x)
Tablette	768px - 1023px	1000px (1x) / 2000px (2x)
Desktop	≥ 1024px	1600px (1x) / 3200px (2x)

---

Bonus : Exemple CSS pour l'adaptation des images

Ajoutez ce style pour garantir une bonne adaptation des images :

.img {
    width: 100%; /* S'adapte à la largeur du conteneur */
    height: auto; /* Conserve les proportions */
    max-width: 100%;
}

Avec cette approche, votre site offrira des images optimisées et adaptées aux écrans et résolutions des visiteurs, tout en améliorant les performances grâce au chargement d'images pertinentes uniquement.