CodeGym /Cursos /Frontend SELF PT /Imagens Responsivas

Imagens Responsivas

Frontend SELF PT

Nível 25 , Lição 4

Disponível

5.1 Atributo srcset

Imagens responsivas são super importantes para criar páginas web que são tanto atraentes quanto rápidas de carregar. Elas permitem carregar diferentes tamanhos e resoluções de imagens dependendo do dispositivo e das condições de visualização, o que melhora o desempenho e a experiência do usuário. As ferramentas principais para implementar imagens responsivas em HTML são os atributos srcset e sizes.

O atributo srcset é usado para especificar múltiplas fontes de imagem com diferentes tamanhos ou resoluções. O navegador escolhe qual imagem é mais adequada com base no dispositivo do usuário.

Sintaxe:

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

Onde:

src: indica o caminho para a imagem padrão
srcset: contém uma lista de imagens e suas características, separadas por vírgulas
1x, 2x: indicam a taxa de escala (por exemplo, 1x para resolução padrão e 2x para dispositivos com alta densidade de pixels)

Exemplo de uso do srcset:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Exemplo de uso do 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="Exemplo de imagem responsiva">
        </body>
      </html>

Explicação do código:

src="images/default.jpg": indica a imagem padrão
srcset: contém uma lista de imagens com suas larguras em pixels (480w, 800w, 1200w). O navegador escolhe a imagem mais adequada baseado na largura da janela de visualização

5.2 Atributo sizes

O atributo sizes é usado junto com srcset para indicar a largura da imagem em diferentes condições de exibição. Isso permite que o navegador escolha com mais precisão a imagem adequada.

Sintaxe:

HTML

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

Onde:

sizes: contém uma lista de condições de exibição e as larguras correspondentes das imagens
(max-width: 600px) 480px: se a largura da janela de visualização é menor ou igual a 600px, usa imagem com largura de 480px
800px: em todos os outros casos, usa imagem com largura de 800px

Exemplo de uso do sizes:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Exemplo de uso do 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="Exemplo de imagem responsiva">
        </body>
      </html>

Explicação do código:

sizes define a largura da imagem para diferentes condições de exibição:

Se a largura da janela de visualização é menor ou igual a 600px, usar imagem com largura de 480px
Se a largura da janela de visualização é menor ou igual a 900px, usar imagem com largura de 800px
Em todos os outros casos, usar imagem com largura de 1200px

5.3 Imagens Responsivas

Imagem responsiva para diferentes tamanhos de tela

Vamos criar um exemplo onde a imagem se adapta a diferentes tamanhos de tela usando os atributos srcset e sizes.

Exemplo:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Imagem Responsiva</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="Exemplo de imagem responsiva">
        </body>
      </html>

Explicação do código:

src="images/default.jpg": indica a imagem padrão
srcset: define três versões da imagem com larguras diferentes (480w, 800w, 1200w)
sizes: define a largura da imagem para diferentes condições:
- até 600px — usar imagem com largura de 480px
- até 900px — usar imagem com largura de 800px
- acima de 900px — usar imagem com largura de 1200px
.responsive-img: classe CSS que define que a imagem terá largura de 100% e altura automática, para ocupar o espaço disponível mantendo as proporções

Anterior Lição anterior

Próxima Próxima lição

Comentários

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