Picture

Copiar

<picture>
    <!-- Mobile 3x -->
    <source srcset="images/demo_mobile_x3.webp"
        media="(max-width: 767px) and (min-resolution: 3dppx)">

    <!-- Mobile 2x -->
    <source srcset="images/demo_x2.webp"
        media="(max-width: 767px) and (min-resolution: 2dppx)">

    <!-- Mobile 1x -->
    <source srcset="images/demo_mobile_x1.webp"
        media="(max-width: 767px)">

    <!-- Desktop 3x -->
    <source srcset="images/demo_x3.webp"
        media="(min-width: 768px) and (min-resolution: 3dppx)">

    <!-- Desktop 2x -->
    <source srcset="images/demo_x2.webp"
        media="(min-width: 768px) and (min-resolution: 2dppx)">

    <!-- Desktop 1x -->
    <source srcset="images/demo_x1.webp"
        media="(min-width: 768px)">

    <!-- Imagen fallback con atributos declarados -->
    <img
    src="images/demo_mobile_x1.webp"
    alt="Imagen adaptable"
    loading="lazy"
    decoding="async"
    class="responsive-img">
</picture>