Imatges responsive en 2023


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:

https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=lr#images-without-dimensions
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Deixa un comentari

L’adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *

twelve + five =

Información básica sobre protección de datos Ver más

  • Responsable: Jordi Juan Pérez.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a NICALIA que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver Política de cookies
Privacidad