De fucking bojos. Entre imatges webp i responsives, “anem apanyats” amb Google.

Fique ací un exemple (que encara no sé si està 100% bé) de com ficar una imatge “responsive” (adaptable a tots els dispositius) en 2023, per a no rebre cap advertència de PageSpeed Insights:

<picture>
              <source media="(min-width: 601px)" srcset="images/webp/imatge.webp" type="image/webp"  >
              	<source media="(max-width: 601px)" srcset="images/webp/imatge-wep-mov.webp" type="image/webp" >
              <img style=" height: auto; width: 100%;" loading="lazy" src="images/imatge.jpg" srcset="images/imatge.jpg 534w, images/imatge-mov.jpg 230w" alt="<?php echo $alt; ?>" title="<?php echo $title; ?>" width="534" height="445">
            </picture>

“Picture” té els dues mides (móvil i escriptori, també podeu fer servir tablet). I la <img> també! amb l’atribut “srcset=” li indiquem les dues mesures.

Imprescindible que les imatges tinguen “width:100% i height:auto” , i millor en una classe CSS que com està a l’exemple. També és imprescindible que les imatges mantinguen una relació d’aspecte.

Podeu trobar més informació en: