WDD 131: Fundamentos da Web Dinâmica

S03 – Atividade de Aprendizagem: Imagens Responsivas

Visão Geral

O trabalho do design de imagens responsivas é oferecer suporte a páginas com pesos menores e entregar conteúdo no tamanho da tela. Você trabalhou na otimização básica de imagens usando tipos de imagem, dimensionamento e ajustes de nível de qualidade. Você também precisa estar ciente da aparência da imagem em diferentes tamanhos de tela. Esta atividade tem como objetivo reduzir o tamanho da página, mantendo-se consciente da clareza e funcionalidade da imagem em diferentes tamanhos de tela e janelas de visualização ou viewports (a área visível de uma página da web).

Preparação

Um princípio fundamental da experiência do usuário (UX) é que os usuários esperam rolar páginas da web verticalmente sem precisar rolar horizontalmente para visualizar o conteúdo. Além disso, os usuários não precisam aumentar ou diminuir o zoom para ver o conteúdo da página de forma nítida. Como as larguras das janelas de visualização variam, você não deve depender de uma largura específica para que a página seja renderizada corretamente.

Esta atividade se concentra no uso do atributo srcset para imagens usando os elementos picture e source. O navegador analisa a sintaxe da imagem responsiva e decide qual imagem é a melhor correspondência.

Esta atividade pressupõe o seguinte:

• O metaelemento da janela de visualização foi aplicado corretamente ao documento.
• As imagens a serem usadas foram otimizadas para a web, limitando a largura e a altura (dimensões) das imagens ao mínimo necessário para o design da página em qualquer tamanho de visualização.
• As imagens são de um tipo/formato web válido.
• As imagens são compactadas para reduzir o tamanho geral do arquivo. Em muitos pacotes de software de edição de imagem, isso é chamado de redução da "qualidade".
• O desenvolvedor criou e salvou imagens para uso em diferentes tamanhos de tela.

  A direção de arte envolve cortar e redimensionar imagens para focar a atenção do usuário em uma parte específica delas, garantindo que os objetivos do design sejam atendidos em diferentes tamanhos de janela de visualização.

  Leitura: 📄 Direção de Arte – MDN

Imagens responsivas são imagens que se ajustam perfeitamente a qualquer tamanho de navegador. O atributo srcset permite que o navegador escolha a melhor imagem para exibir de acordo com o tamanho e a resolução da tela do dispositivo. O atributo srcset é usado com os elementos picture e source.

O srcset oferece suporte à segmentação de diferentes intervalos de navegadores. Uma imagem diferente pode ser renderizada dependendo da largura da tela. Aqui está um exemplo:

    <picture>
  <source srcset="imagens/principal-grande.webp" media="(min-width: 1000px)">
  <source srcset="imagens/principal-media.webp" media="(min-width: 550px)">
  <img src="imagens/principal-pequena.webp" alt="Templo de Orem Utah" width="400" height="200">
</picture>

Instruções da Atividade

Configuração de Arquivo e Pasta

1. Se ainda não existir, crie uma pasta chamada "semana03" no diretório wdd131.
2. Adicione um novo arquivo chamado "imagens-responsivas.html" à pasta semana03.
3. Forneça uma estrutura HTML básica para o arquivo imagens-responsivas.html.
4. Se ainda não existir, adicione uma pasta "estilos" à pasta semana03 e adicione um novo arquivo CSS chamado "imagens-responsivas.css" à pasta estilos.
5. Se ainda não existir, crie uma pasta chamada "imagens" no seu diretório semana03.

Edição de Imagens

1. Navegue até a Lista de Templos e clique no link do templo de sua escolha para obter acesso à Biblioteca de Mídia dele.
2. Na Biblioteca de Mídia do templo, clique em uma das imagens e baixe uma versão grande dela usando Salvar imagem como... ou método equivalente.
3. Usando um editor de imagens, como o Pixlr E, carregue a imagem baixada e crie 3 (três) imagens diferentes:
   • Cada imagem deve ter um corte diferente (direção de arte)
   • Salve todas as três imagens no formato de arquivo WebP com qualidade em torno de 50%.
   • Crie uma versão pequena chamada "principal-pequena.webp" com 500 px de largura por 250 px de altura.
   • Crie uma versão média chamada "principal-media.webp" com 1000 px de largura por 500 px de altura.
   • Crie uma versão grande chamada "principal-grande.webp" com 1500 px de largura por 750 px de altura.
     Observe que as proporções de todas essas imagens são 2:1 para consistência.
4. Coloque todas elas na sua pasta de imagens semana03.

HTML: Elemento Picture

1. No seu arquivo html, adicione um elemento main com um elemento de divisão genérico com a classe "principal".
2. Dentro do elemento div, adicione um elemento picture.
3. Dentro do elemento picture, adicione um elemento source com atributos para media e srcset.
   Abreviação Emmet (inserir sintaxe + tabulação):

   main>div.principal>picture>source:media*2+img

4. Defina o caminho do srcset para a maior imagem.
5. Defina o atributo de mídia como min-width: 1000px, que é a largura da imagem principal grande criada anteriormente.
6. Se necessário, copie e cole a linha de origem da marcação e altere a imagem para a imagem média e a largura mínima para 500px.

   Nenhuma dessas imagens será renderizada em uma página. É necessário um elemento img com um src.

7. Adicione o elemento img com um src referenciando a imagem menor.
8. Defina o valor do atributo alt como uma descrição da imagem.
9. Defina os atributos width e height com a largura e altura da imagem maior. Quais devem ser os valores de largura e altura? Já que você tem uma foto de 500 px por 250 px, uma de 1000 px por 500 px e outra de 1500 px por 750 px? É importante manter a proporção da imagem, conforme o navegador a utiliza para renderizar o espaço necessário para o carregamento da imagem. Podemos usar a imagem grande de 1500 e 750 ou qualquer proporção equivalente.

      <div class="principal">
  <picture>
    <source srcset="imagens/principal-grande.webp" media="(min-width: 1000px)">
    <source srcset="imagens/principal-media.webp" media="(min-width: 500px)">
    <img src="imagens/principal-pequena.webp" alt="Nome e localização do templo" width="500" height="250">
  </picture>
</div>

CSS:

• Na folha de estilo, habilite o comportamento responsivo para a imagem definindo a largura do elemento img como 100% e a altura como auto (ou vice-versa). Esta é a maneira mais fácil de manter a proporção da imagem.

  .principal img {
    width: 100%;
    height: auto;
  }

• Ou você pode usar object-fit com contêineres de imagens definidos. Basta ter cuidado com a direção de arte para obter resultados responsivos.

  .principal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  Aqui está um exemplo desse erro e uma solução usando CSS object-fit no CodePen ☼ object-fit

• Outra solução é usar a propriedade aspect-ratio.