Passo 1 de 7
Quando a imagem precisa de outro recorte
Distinguir troca de resolução de direção de arte e reconhecer quando um recorte diferente melhora o destaque visual.
Trilha de aprendizado · Nível 4 · Tutorial 4
Usar picture para oferecer enquadramentos ou formatos alternativos, preservando uma imagem de reserva e um significado consistente.
Quando a imagem precisa de outro recorte
Distinguir troca de resolução de direção de arte e reconhecer quando um recorte diferente melhora o destaque visual. 2 min
Organizar picture, source e img
Monte a estrutura básica de picture e identifique onde ficam os arquivos candidatos, a imagem de reserva e o texto alternativo. 2 min
Escolher recortes com media
Defina uma condição de largura da viewport e preveja quando o navegador seleciona o recorte de source ou a imagem de reserva. 3 min
Oferecer formatos com type
Declare o formato de uma alternativa e preveja sua seleção conforme o suporte do navegador. 3 min
Combinar condições e definir a prioridade
Ordene fontes que combinam recortes e formatos e preveja qual arquivo será selecionado. 3 min
Preservar o significado entre as variantes
Avalie se todos os recortes, inclusive a reserva, preservam a informação essencial e continuam compatíveis com o alt. 2 min
Aplicação final: recortes, formatos e reserva
Corrija uma estrutura picture, confira a seleção de arquivos e preserve o significado da imagem em todos os recortes. 4 min
Passo 1 de 7
Distinguir troca de resolução de direção de arte e reconhecer quando um recorte diferente melhora o destaque visual.
Trocar a resolução mantém o enquadramento e muda a quantidade de pixels, como você já viu com srcset e sizes.
Na direção de arte, você escolhe intencionalmente outro recorte ou composição para destacar o que importa em diferentes condições de exibição.
Na mesma largura disponível, reduzir a foto inteira deixa a ação pequena. Um recorte mais próximo dá destaque à ação.
Uma matéria ensina a modelar um vaso. Em uma viewport estreita, a foto inteira do ateliê cabe, mas as mãos da ceramista ficam pequenas demais. Qual escolha resolve o problema de destaque visual?
O elemento picture funciona como um contêiner de alternativas de fonte para uma imagem. Você declara condições de uso, e o navegador seleciona uma alternativa adequada — por exemplo, um recorte mais próximo para uma viewport estreita.
Dica
Prepare e salve as variantes antes de indicá-las no HTML. picture não recorta imagens nem converte formatos: ele permite selecionar entre arquivos já disponíveis.
Uma foto de produto já tem um bom enquadramento em todas as larguras previstas. Oferecer uma versão com mais pixels, mantendo exatamente a mesma composição, é direção de arte.
Passo 2 de 7
Monte a estrutura básica de picture e identifique onde ficam os arquivos candidatos, a imagem de reserva e o texto alternativo.
Os elementos source são filhos diretos de picture e ficam antes de um único img, obrigatório.
Dentro de picture, cada source usa srcset para indicar os arquivos candidatos. Ele é um elemento vazio: não tem tag de fechamento.
Aqui, o foco é a estrutura, ainda sem condições de seleção.
<picture>
<source srcset="vaso-alternativa.jpg">
<img src="vaso.jpg" alt="Vaso de argila sobre uma bancada">
</picture>Dica
source não exibe uma imagem extra. É img que apresenta a imagem selecionada e mantém o atributo alt, inclusive quando o arquivo escolhido vem de source.
Ordene as linhas para formar uma estrutura válida de picture.
O src de img fornece a imagem de reserva quando nenhum source é aplicável.
Se o navegador não reconhecer picture, ainda poderá apresentar a imagem usando o src de img. Por isso, mantenha esse atributo preenchido com um caminho válido.
Atenção
Se o download do arquivo escolhido em source falhar, não há garantia de tentativa automática do próximo source ou do src de img.
Não conte com a reserva para corrigir caminhos inválidos: confira o carregamento de todos os arquivos.
Associe cada função ao atributo e ao elemento corretos na estrutura básica que você montou.
Toque em um item e depois no par correspondente.
Passo 3 de 7
Defina uma condição de largura da viewport e preveja quando o navegador seleciona o recorte de source ou a imagem de reserva.
O atributo media de source define uma condição para usar aquela alternativa. Aqui, a condição considera a largura da viewport, a área em que o navegador exibe a página.
(min-width: 800px): 800px ou mais.(max-width: 800px): 800px ou menos.O limite está incluído nos dois casos. As medidas são em pixels CSS, e a condição fica no próprio HTML, sem precisar criar uma folha de estilos.
<picture>
<source media="(min-width: 800px)" srcset="horta-ampla.jpg">
<img src="horta-proxima.jpg" alt="Pessoa colhendo alface na horta">
</picture>Com viewport de 800px ou mais, a condição é atendida: o arquivo selecionado é horta-ampla.jpg. Abaixo de 800px, esse source não se aplica, e o navegador usa horta-proxima.jpg, indicado em img.
Agora o requisito mudou: use o recorte próximo em viewports de até 600px, inclusive. Acima disso, use a imagem ampla de reserva.
<picture>
<source media="(___: 600px)" srcset="horta-proxima.jpg">
<img src="horta-ampla.jpg" alt="Pessoa colhendo alface na horta">
</picture>Qual nome de condição substitui ___?
media não identifica um modelo de celular ou computador. Uma janela estreita no computador também pode atender a (max-width: 600px). O critério é a largura da viewport naquele momento.
Dica
media="(max-width: 600px)" participa da escolha do arquivo. Não limita a imagem a 600px nem faz com que ela ocupe toda a viewport. Controlar o tamanho de exibição é uma decisão separada.
<picture>
<source media="(max-width: 600px)" srcset="horta-proxima.jpg">
<img src="horta-ampla.jpg" alt="Pessoa colhendo alface na horta">
</picture>Em um navegador com suporte a picture e com os arquivos disponíveis, quais imagens serão selecionadas nas viewports de 599px, 600px e 601px, respectivamente?
Passo 4 de 7
Declare o formato de uma alternativa e preveja sua seleção conforme o suporte do navegador.
Em um source, o atributo type informa o tipo MIME do arquivo: uma identificação padronizada do seu formato. O navegador usa essa informação para desconsiderar alternativas em formatos que não suporta.
Estas são as correspondências:
image/avifimage/webpimage/jpegO valor de type é o tipo MIME completo, não apenas a extensão do arquivo.
Associe cada formato ao tipo MIME correspondente.
Toque em um item e depois no par correspondente.
Os dois arquivos abaixo já existem e mostram a mesma foto, com o mesmo enquadramento. A diferença é o formato.
<picture>
<source srcset="jardim.avif" type="image/avif">
<img src="jardim.jpg" width="800" height="600"
alt="Canteiro de girassóis ao lado de um caminho de pedras.">
</picture>Em um navegador que reconhece picture:
jardim.avif.source e usa jardim.jpg de img, supondo suporte a JPEG.Atenção
O valor de type deve corresponder ao formato real do arquivo. Escrever type="image/avif" para um arquivo JPEG não o transforma em AVIF. É necessário fornecer um arquivo que já esteja no formato declarado.
<picture>
<source srcset="jardim.webp" type="image/webp">
<img src="jardim.jpg" width="800" height="600"
alt="Canteiro de girassóis ao lado de um caminho de pedras.">
</picture>Os arquivos estão disponíveis nos formatos declarados. Os navegadores A e B reconhecem picture e suportam JPEG. O navegador A também suporta WebP; o B não suporta WebP. Qual é o resultado?
Passo 5 de 7
Ordene fontes que combinam recortes e formatos e preveja qual arquivo será selecionado.
O navegador avalia os elementos source na ordem do documento. Seleciona o primeiro com candidatos válidos em srcset, condição media atendida e type suportado, quando esses atributos estão presentes.
No mesmo source, media e type precisam ser atendidos juntos. Sem media, a fonte não tem restrição de largura.
<picture>
<source type="image/webp" srcset="ciclista-geral.webp">
<source media="(max-width: 600px)" type="image/avif" srcset="ciclista-recorte.avif">
<img src="ciclista-geral.jpg" alt="Ciclista pedalando">
</picture>Atenção
Com viewport de 480 px e suporte a WebP e AVIF, esse código seleciona ciclista-geral.webp. O primeiro source já é aplicável: o navegador não procura depois uma condição de largura mais específica.
Dica
Agrupe as fontes pela condição de recorte e, dentro dela, pela preferência de formatos. Inclua um JPEG com a mesma media antes das alternativas gerais para preservar o recorte mesmo sem suporte a AVIF ou WebP.
Até 600 px, inclusive, use o recorte, preferindo AVIF, depois WebP e depois JPEG. Acima disso, ofereça a imagem geral em WebP.
O img com src="ciclista-geral.jpg" já ficará no final de picture. Ordene os quatro elementos source que vêm antes dele.
Veja a estrutura resultante. ciclista-recorte.jpg preserva o enquadramento para viewports de até 600 px. Já ciclista-geral.jpg, no img, é a reserva geral quando nenhum source é aplicável.
<picture>
<source media="(max-width: 600px)"
type="image/avif" srcset="ciclista-recorte.avif">
<source media="(max-width: 600px)"
type="image/webp" srcset="ciclista-recorte.webp">
<source media="(max-width: 600px)"
type="image/jpeg" srcset="ciclista-recorte.jpg">
<source type="image/webp" srcset="ciclista-geral.webp">
<img src="ciclista-geral.jpg" alt="Ciclista pedalando">
</picture>Exemplo
Em 480 px, com suporte a JPEG, mas sem AVIF nem WebP, os dois primeiros source são desconsiderados pelo formato. O terceiro atende à largura e ao suporte: o recorte JPEG é selecionado antes de chegar ao img.
Use a estrutura da tela anterior. Considere um navegador que reconhece picture, todos os arquivos válidos e disponíveis e um único arquivo por srcset.
Toque em um item e depois no par correspondente.
Passo 6 de 7
Avalie se todos os recortes, inclusive a reserva, preservam a informação essencial e continuam compatíveis com o alt.
As variantes de um picture devem cumprir a mesma finalidade no contexto. O enquadramento pode mudar, mas pessoas, objetos, ações ou relações essenciais precisam continuar visíveis. Nesta imagem sobre doação de livros, o essencial é a entrega entre as duas pessoas.
À esquerda, cena ampla; à direita, recorte aproximado da mesma entrega.
Dica
O alt fica em img e deve atender a qualquer variante selecionada. Os elementos source não têm textos alternativos independentes.
O alt proposto é “Voluntária entrega um livro a uma estudante ao lado de uma estante”. A entrega aparece nos dois enquadramentos, mas a estante não. Como adequar o texto à finalidade de mostrar a doação?
Se o corte elimina informação essencial, revise o arquivo. Na cena da doação, mostrar só o rosto da voluntária não preserva a entrega. Trocar o alt por “Voluntária” não resolve: o texto combina com o recorte, mas a imagem deixa de cumprir sua finalidade.
Dica
Confira também o arquivo indicado em img src: ele deve preservar a informação essencial e ser compatível com o mesmo alt.
Em uma matéria sobre trabalho em dupla na horta, a imagem deve mostrar duas pessoas plantando juntas.
Alt proposto: “Duas pessoas plantam uma muda juntas”.
Quais versões perdem informação essencial? Indique uma correção e diga se o alt pode ser mantido após ela.
Escreva pelo menos 30 caracteres (0/30).
Passo 7 de 7
Corrija uma estrutura picture, confira a seleção de arquivos e preserve o significado da imagem em todos os recortes.
Em uma matéria sobre cerâmica, a imagem mostra uma artesã moldando um vaso no torno. Os recortes fechado e amplo preservam a artesã, suas mãos, o vaso e o torno. Só o amplo inclui prateleiras ao fundo, um detalhe não essencial à matéria.
Os seis arquivos já estão preparados, na mesma pasta do HTML:
ceramica-fechado.avif, ceramica-fechado.webp e ceramica-fechado.jpg.ceramica-amplo.avif, ceramica-amplo.webp e ceramica-amplo.jpg.Até 600 px de largura da viewport, inclusive, use o recorte fechado. Acima disso, use o amplo. Para cada recorte, a preferência é AVIF → WebP → JPEG. A reserva geral deve ser o JPEG amplo.
Dica
Este pedido exige direção de arte: o enquadramento muda. Oferecer apenas resoluções diferentes do mesmo recorte não atenderia ao objetivo.
Este código ainda não atende a todos os critérios do pedido.
<picture>
<source type="image/avif" srcset="ceramica-amplo.avif">
<source type="image/webp" srcset="ceramica-amplo.webp">
<source media="(max-width: 600px)" type="image/avif" srcset="ceramica-fechado.avif">
<source media="(max-width: 600px)" type="image/webp" srcset="ceramica-fechado.webp">
<img src="ceramica-amplo.jpg" alt="Artesã moldando um vaso no torno, com prateleiras ao fundo.">
</picture>Reescreva o picture completo para:
Depois do código, justifique brevemente a ordem escolhida e o ajuste no alt.
Escreva pelo menos 100 caracteres (0/100).
Considere a solução corrigida: recorte fechado até 600 px; amplo acima disso; preferência AVIF → WebP → JPEG.
Associe cada cenário ao arquivo selecionado. O navegador reconhece picture, todos os arquivos são válidos e os formatos listados são os suportados.
Toque em um item e depois no par correspondente.
Resumo
Antes de considerar a implementação pronta, confira:
Parabéns! Você concluiu: Alternar recortes e formatos de imagem com picture
Você concluiu “Alternar recortes e formatos de imagem com picture”. Use os critérios de recorte, compatibilidade, prioridade e significado para montar e revisar suas próximas imagens.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
