CodeGym /Cursos /Frontend SELF ES /Imágenes Adaptativas

Imágenes Adaptativas

Frontend SELF ES

Nivel 25 , Lección 4

Disponible

5.1 Atributo srcset

Las imágenes adaptativas juegan un papel importante en la creación de páginas web responsivas y optimizadas. Permiten cargar imágenes de diferentes tamaños y resoluciones dependiendo del dispositivo y condiciones de visualización, lo que mejora el rendimiento y la experiencia del usuario. Las herramientas principales para implementar imágenes adaptativas en HTML son los atributos srcset y sizes.

El atributo srcset se utiliza para indicar múltiples fuentes de imagen con diferentes tamaños o resoluciones. El navegador selecciona la imagen más adecuada en función del dispositivo del usuario.

Sintaxis:

    
      <img src="default.jpg" srcset="image1.jpg 1x, image2.jpg 2x" alt="Example Image">

Dónde:

src: indica la ruta de la imagen por defecto
srcset: contiene una lista de imágenes y sus características, separadas por comas
1x, 2x: indican el factor de escala (por ejemplo, 1x para resolución estándar y 2x para dispositivos con alta densidad de píxeles)

Ejemplo de uso de srcset:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Ejemplo de uso de srcset</title>
        </head>
        <body>
          <img
            src="images/default.jpg"
            srcset="images/image-small.jpg 480w,
              images/image-medium.jpg 800w,
              images/image-large.jpg 1200w"
            alt="Ejemplo de imagen adaptativa">
        </body>
      </html>

Explicación del código:

src="images/default.jpg": indica la imagen por defecto
srcset: contiene una lista de imágenes con sus anchos en píxeles (480w, 800w, 1200w). El navegador elige la imagen más adecuada dependiendo del ancho de la ventana de visualización

5.2 Atributo sizes

El atributo sizes se utiliza en combinación con srcset para indicar el ancho de la imagen en diferentes condiciones de visualización. Esto permite al navegador elegir más precisamente la imagen adecuada.

Sintaxis:

HTML

    
      <img src="default.jpg"
      srcset="image1.jpg 480w, image2.jpg 800w"
      sizes="(max-width: 600px) 480px, 800px"
      alt="Example Image">

Dónde:

sizes: contiene una lista de condiciones de visualización y los anchos de imagen correspondientes
(max-width: 600px) 480px: si el ancho de la ventana de visualización es menor o igual a 600px, usar la imagen de ancho 480px
800px: en todos los demás casos usar la imagen de ancho 800px

Ejemplo de uso de sizes:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Ejemplo de uso de sizes</title>
          <style>
            .responsive-img {
              width: 100%;
              max-width: 100%;
              height: auto;
            }
          </style>
        </head>
        <body>
        <img
          class="responsive-img"
          src="images/default.jpg"
          srcset="images/image-small.jpg 480w,
            images/image-medium.jpg 800w,
            images/image-large.jpg 1200w"
          sizes="(max-width: 600px) 480px,
            (max-width: 900px) 800px,
            1200px"
          alt="Ejemplo de imagen adaptativa">
        </body>
      </html>

Explicación del código:

sizes define el ancho de la imagen para varias condiciones de visualización:

Si el ancho de la ventana de visualización es menor o igual a 600px, usar la imagen de ancho 480px
Si el ancho de la ventana de visualización es menor o igual a 900px, usar la imagen de ancho 800px
En todos los demás casos usar la imagen de ancho 1200px

5.3 Imágenes Adaptativas

Imagen adaptativa para diferentes tamaños de pantalla

Vamos a crear un ejemplo en el que una imagen se adapte a diferentes tamaños de pantalla utilizando los atributos srcset y sizes.

Ejemplo:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Imagen Adaptativa</title>
          <style>
            .responsive-img {
              width: 100%;
              height: auto;
            }
          </style>
        </head>
        <body>
          <img
            class="responsive-img"
            src="images/default.jpg"
            srcset="images/image-small.jpg 480w,
              images/image-medium.jpg 800w,
              images/image-large.jpg 1200w"
            sizes="(max-width: 600px) 480px,
              (max-width: 900px) 800px,
              1200px"
            alt="Ejemplo de imagen adaptativa">
        </body>
      </html>

Explicación del código:

src="images/default.jpg": indica la imagen por defecto
srcset: define tres versiones de la imagen con diferentes anchos (480w, 800w, 1200w)
sizes: define el ancho de la imagen para diferentes condiciones:
- hasta 600px — usar la imagen de ancho 480px
- hasta 900px — usar la imagen de ancho 800px
- más de 900px — usar la imagen de ancho 1200px
.responsive-img: clase CSS que establece el ancho de la imagen al 100% y altura automática, para ocupar el espacio disponible y mantener las proporciones

Anterior Lección anterior

Siguiente Siguiente lección

Comentarios

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION