Imagens Flexíveis
No Capítulo 06, aprendemos a adicionar imagens no HTML. No entanto, notamos que as imagens não se adaptam ao tamanho da tela como os textos.
Para resolver isso, podemos usar a tag <picture>. Com essa tag, é possível adicionar várias imagens com tamanhos diferentes, que se alternam conforme o tamanho da tela do usuário.
Quando Usar a Tag <picture>
A tag <picture> é especialmente útil nas seguintes situações:
- Poupar dados e acelerar o carregamento: Em dispositivos com telas pequenas, como smartphones, não há necessidade de carregar imagens grandes e pesadas. Usar a tag
<picture>permite carregar versões menores das imagens, economizando dados e acelerando o carregamento da página. - Adaptar imagens a diferentes resoluções: Em telas de alta resolução, como monitores Retina, é importante fornecer imagens de maior qualidade para evitar que fiquem pixeladas. A tag
<picture>permite definir diferentes versões da imagem para diferentes resoluções, garantindo uma melhor experiência visual. - Mostrar imagens específicas para diferentes orientações de tela: Em dispositivos que podem ser usados tanto na orientação vertical quanto horizontal, como tablets, a tag
<picture>permite definir imagens diferentes para cada orientação, melhorando a usabilidade e a apresentação do conteúdo.
A tag <picture> permite que você defina várias versões de uma imagem e escolha qual delas será exibida com base no tamanho da tela ou outras condições. Isso é feito usando a tag <source> dentro da tag <picture>. Vamos ver como isso funciona na prática.
Estrutura Básica
A estrutura básica da tag <picture> é a seguinte:
<picture>
<source media="(condição)" srcset="caminho/para/imagem">
<img src="caminho/para/imagem-padrão" alt="Descrição da imagem">
</picture>
Vamos entender cada parte:
<picture>: A tag que envolve todas as versões da imagem.<source>: Define uma condição e a imagem a ser exibida se essa condição for verdadeira.media="(condição)": A condição que deve ser atendida para que a imagem seja exibida. Por exemplo,media="(max-width: 750px)"significa que a imagem será exibida se a largura da tela for de até 750 pixels.srcset="caminho/para/imagem": O caminho para a imagem que será exibida se a condição for verdadeira.<img>: A imagem padrão que será exibida se nenhuma das condições definidas nas tags<source>for atendida.
Exemplo
Vamos ver um exemplo prático para entender melhor. Suponha que temos três versões de uma imagem: uma pequena, uma média e uma grande. Queremos que a versão pequena seja exibida em telas de até 750 pixels de largura, a versão média em telas de até 1050 pixels, e a versão grande em telas maiores que 1050 pixels.
<picture>
<source media="(max-width: 750px)" srcset="imagens/foto-p.png" type="image/png">
<source media="(max-width: 1050px)" srcset="imagens/foto-m.png" type="image/png">
<img src="imagens/foto-g.png" alt="Foto Teste">
</picture>
Com esse código, garantimos que a imagem exibida será a mais adequada para o tamanho da tela do usuário, melhorando a experiência de navegação e otimizando o carregamento do site.
Atributos da Tag <source> media e type
A tag <picture> funciona como uma condicional, onde as tags <source> definem a imagem a ser exibida se a condição especificada for atendida:
- Teste de largura: Verifica a largura da tela. Por exemplo,
media="(max-width: 750px)"testa se a tela tem até 750 pixels de largura. Se for verdadeiro, exibe a imagem configurada emsrcset="imagens/foto-p.png". Caso contrário, passa para o próximo teste. - Imagem a ser carregada: Indica qual imagem deve ser carregada. Use a tag
<img>para obter o caminho da imagem e copie para a tag<source>. Evite nomes de arquivos ou pastas com espaços, acentuação ou letras maiúsculas. - Tipo de imagem: Define o tipo da imagem com o atributo
type="image/png". Especificar a extensão da imagem é importante para evitar erros.
Veja abaixo o código completo com as duas tags:
<picture>
<source media="(max-width: 750px)" srcset="imagens/foto-p.png" type="image/png">
<source media="(max-width: 1050px)" srcset="imagens/foto-m.png" type="image/png">
<img src="imagens/foto-g.png" alt="Foto Teste">
</picture>
A tag <img> será exibida apenas se nenhuma das condições definidas nas tags <source> forem atendidas. Neste exemplo, a imagem será exibida se a largura da tela for superior a 1050 pixels.
Alternativamente, você pode usar o atributo min-width para definir uma condição de largura mínima. Por exemplo, ao usar min-width: 1051px, a imagem será exibida para telas com largura superior a 1050 pixels, obtendo o mesmo efeito.
