Passo 1 de 7
Relacionar resolução, tamanho de exibição e densidade
Diferencie pixels do arquivo, pixels CSS e densidade da tela para calcular uma referência de resolução.
Trilha de aprendizado · Nível 4 · Tutorial 3
Declarar versões de uma mesma imagem para que o navegador selecione um recurso adequado à densidade da tela e à largura prevista de exibição.
Relacionar resolução, tamanho de exibição e densidade
Diferencie pixels do arquivo, pixels CSS e densidade da tela para calcular uma referência de resolução. 3 min
Oferecer candidatos por densidade com srcset
Monte uma lista de candidatos com 1x e 2x para uma imagem com largura de exibição conhecida, mantendo src como fonte de reserva. 4 min
Declarar a largura real dos arquivos com w
Monte listas de candidatos com descritores w coerentes com as dimensões reais dos arquivos, sem misturá-los com descritores x. 4 min
Informar a largura prevista com sizes
Use um valor em px ou vw para informar a largura prevista da imagem, sem confundir essa informação com o controle do tamanho visual. 3 min
Adaptar sizes à largura da viewport
Combine condições de largura, organize sua ordem e acrescente um valor padrão para informar a largura prevista da imagem. 4 min
Entender a escolha feita pelo navegador
Calcule a densidade efetiva, reconheça um sizes incoerente e explique por que a seleção de um arquivo não é garantida. 3 min
Aplicar e revisar srcset e sizes
Complete dois elementos img e revise a coerência entre arquivos, descritores e larguras previstas, sem confundir seleção do recurso com tamanho visual. 4 min
Passo 1 de 7
Diferencie pixels do arquivo, pixels CSS e densidade da tela para calcular uma referência de resolução.
Uma foto com 600 × 400 pixels pode aparecer na página com apenas 300 pixels CSS de largura.
Os 600 pixels indicam a largura do arquivo. Os 300 pixels CSS medem a largura ocupada na página. O pixel CSS é uma unidade de referência para a exibição; você não precisa escrever CSS para trabalhar com essa medida.
A densidade relaciona pixels físicos da tela e pixels CSS.
Assim, a mesma largura em pixels CSS pode corresponder a quantidades diferentes de pixels físicos.
Exemplo
Imagine dois arquivos da mesma foto: um com 300 × 200 pixels e outro com 600 × 400 pixels. Eles preservam o conteúdo, o enquadramento e a proporção; mudam apenas as dimensões em pixels.
Esses arquivos, preparados previamente, são variantes de resolução.
Uma foto tem 800 pixels de largura no arquivo e ocupa 400 pixels CSS de largura na página, em uma tela de densidade 2. Relacione cada informação ao seu significado.
Toque em um item e depois no par correspondente.
Multiplique a largura de exibição em pixels CSS pela densidade da tela. O resultado é uma referência para a largura do arquivo em pixels.
Essa conta ajuda a planejar as variantes, mas não garante qual arquivo o navegador escolherá.
Exemplo
A página está preparada para exibir uma foto com 300 pixels CSS de largura.
Nos dois casos, a imagem continua ocupando 300 pixels CSS de largura na página.
Dica
Versões com mais pixels podem preservar detalhes em telas mais densas, mas geralmente transferem mais dados. Oferecer variantes permite equilibrar definição visual e quantidade de dados baixados.
A marcação HTML declara os arquivos disponíveis; ela não cria essas versões.
Uma foto será exibida com 240 pixels CSS de largura em duas telas de densidades diferentes. Calcule a largura de referência do arquivo para cada tela. Digite apenas os números.
Para a exibição com 240 pixels CSS de largura, a largura de referência do arquivo é ___ pixels.
Mantendo a exibição com 240 pixels CSS de largura, a largura de referência do arquivo agora é ___ pixels.
Passo 2 de 7
Monte uma lista de candidatos com 1x e 2x para uma imagem com largura de exibição conhecida, mantendo src como fonte de reserva.
Considere uma imagem exibida com 240 pixels CSS de largura. Estão disponíveis dois arquivos com o mesmo conteúdo e enquadramento:
caneca-240.jpg: 240 × 160 pixels.caneca-480.jpg: 480 × 320 pixels.O atributo srcset lista os candidatos no próprio elemento img. Cada candidato combina caminho + espaço + descritor, e uma vírgula separa os candidatos.
<img
src="caneca-240.jpg"
srcset="caneca-240.jpg 1x, caneca-480.jpg 2x"
width="240"
height="160"
alt="Caneca azul com alça sobre uma mesa">Dica
Nesse cenário, 240 pixels no arquivo oferecem 1x; 480 pixels oferecem 2x. O descritor expressa a densidade oferecida em relação à largura de exibição adotada. Se essa largura mudar, confira novamente os descritores.
O arquivo caneca-480.jpg tem 480 pixels de largura. Agora, ele será oferecido para uma imagem exibida com 480 pixels CSS de largura. Qual descritor é coerente nesse novo contexto?
Ao acrescentar srcset, mantenha src como fonte de reserva para navegadores sem suporte a srcset.
No exemplo da caneca, src="caneca-240.jpg" mantém essa fonte de reserva, enquanto srcset declara os dois candidatos.
Dica
1x e 2x indicam densidades oferecidas, não tipos de aparelho. Não significam “arquivo para computador” e “arquivo para celular”. O navegador escolhe entre os candidatos; a lista não garante um arquivo específico para cada dispositivo.
A imagem será exibida com 300 pixels CSS de largura. Os arquivos disponíveis, com o mesmo conteúdo e enquadramento, são:
flor-300.jpg: 300 × 200 pixels.flor-600.jpg: 600 × 400 pixels.Complete o srcset abaixo, mantendo o src já declarado.
<img
src="flor-300.jpg"
srcset="___"
width="300"
height="200"
alt="Flor amarela com folhas verdes">Digite apenas o valor de srcset, sem aspas. Coloque o candidato 1x primeiro e o 2x depois, separados por vírgula.
Passo 3 de 7
Monte listas de candidatos com descritores w coerentes com as dimensões reais dos arquivos, sem misturá-los com descritores x.
No srcset, o descritor w informa a largura real, ou intrínseca, do arquivo em pixels. Ele não indica a largura que a imagem deve ocupar na página.
Se o arquivo tem 800 pixels de largura, seu descritor deve ser 800w.
Exemplo
O arquivo ponte.jpg mede 800 × 600 pixels: largura × altura.
O candidato fica ponte.jpg 800w, e não ponte.jpg 600w. Mesmo que a imagem seja exibida com 400 pixels CSS de largura, o descritor continua sendo 800w.
Dica
Um nome como foto-800.jpg não comprova a largura do arquivo. Confira as dimensões nas propriedades da imagem ou em um editor antes de preencher o descritor.
As três versões mostram o mesmo parque. Associe cada arquivo ao descritor correto usando as dimensões verificadas, apresentadas como largura × altura.
Toque em um item e depois no par correspondente.
Descritores x e w são estratégias distintas: não use os dois na mesma lista de srcset.
Uma lista com w descreve as resoluções disponíveis sem vinculá-las a uma única largura de exibição. Com os arquivos que você acabou de conferir, o atributo fica assim:
srcset="parque-p.jpg 480w,
parque-800.jpg 960w,
parque-g.jpg 1440w"Dica
Esse trecho descreve os arquivos, mas não informa o espaço previsto para a imagem na página. Para avaliar os candidatos com w, o navegador também usa essa informação. No próximo step, você vai declará-la com sizes.
Você recebeu três versões da mesma foto de uma praia, com o mesmo enquadramento. As dimensões verificadas são:
praia-p.jpg: 600 × 400 pixels.praia-1200.jpg: 900 × 600 pixels.praia-g.jpg: 1500 × 1000 pixels.O trecho abaixo precisa ser corrigido.
srcset="praia-p.jpg 400w,
praia-1200.jpg 1200w,
praia-g.jpg 2x"Mantenha os três nomes de arquivo e reescreva o srcset usando apenas descritores w. Depois, explique brevemente o que estava errado.
Escreva pelo menos 40 caracteres (0/40).
Passo 4 de 7
Use um valor em px ou vw para informar a largura prevista da imagem, sem confundir essa informação com o controle do tamanho visual.
sizes informa ao navegador a largura prevista de exibição da imagem para avaliar os candidatos com descritores w.
Neste exemplo, a apresentação da página já está preparada para exibir a imagem com 400 pixels CSS de largura. Por isso, declaramos sizes="400px".
Os arquivos deste exemplo têm as larguras indicadas pelos descritores.
<img
src="imagens/jardim-400.jpg"
srcset="imagens/jardim-400.jpg 400w,
imagens/jardim-800.jpg 800w,
imagens/jardim-1200.jpg 1200w"
sizes="400px"
alt="Jardim com um caminho de pedras entre os canteiros">Dica
srcset e sizes orientam a seleção do recurso; não substituem a definição do tamanho visual. A largura informada deve corresponder à apresentação esperada.
Use sizes com candidatos w: ele não se aplica à seleção baseada em descritores x.
Em outra página já preparada, a imagem ocupa sempre 300 pixels CSS de largura. O srcset oferece arquivos de 600 e 900 pixels, declarados como 600w e 900w.
Complete com o valor e a unidade, sem aspas:sizes="___"
1vw corresponde a 1% da largura da viewport. Assim, 50vw representa metade dessa largura — não metade da largura do elemento pai.
Se a apresentação já faz a imagem ocupar metade da viewport, sizes="50vw" comunica esse comportamento ao navegador.
<img
src="imagens/jardim-400.jpg"
srcset="imagens/jardim-400.jpg 400w,
imagens/jardim-800.jpg 800w,
imagens/jardim-1200.jpg 1200w"
sizes="50vw"
alt="Jardim com um caminho de pedras entre os canteiros">Exemplo
Com uma viewport de 1.000 pixels CSS, 50vw informa 500 pixels CSS.
Mesmo que o elemento pai tenha 700 pixels CSS de largura, o valor continua sendo 500, não 350. Se a viewport passar para 800 pixels CSS, 50vw passa a informar 400 pixels CSS.
A apresentação de uma página já faz a imagem ocupar um quarto da largura da viewport, acompanhando as mudanças de largura da janela. O srcset usa descritores w.
Complete usando a unidade vw, sem aspas:sizes="___"
Nessa mesma página, basta trocar sizes="25vw" por sizes="50vw" para garantir que a imagem passe a ocupar visualmente metade da largura da viewport.
Passo 5 de 7
Combine condições de largura, organize sua ordem e acrescente um valor padrão para informar a largura prevista da imagem.
Considere um img com candidatos w em uma página com apresentação já preparada. A imagem ocupa toda a largura da viewport até 600 pixels CSS e ocupa 480 pixels CSS acima desse limite.
Informe essa previsão no atributo sizes:
sizes="(max-width: 600px) 100vw, 480px"(max-width: 600px) verifica se a largura da viewport é menor ou igual a 600 pixels CSS. O valor seguinte, 100vw, informa a largura prevista da imagem quando essa condição vale.
As entradas são separadas por vírgulas. Vale a primeira condição satisfeita. O último valor, 480px, não tem condição: ele é usado quando nenhuma condição anterior é satisfeita.
Atenção
Ao omitir sizes em uma lista com descritores w, o navegador usa 100vw como referência. Isso pode não corresponder ao espaço ocupado pela imagem. Essa referência não define seu tamanho visual.
Em outra página preparada, a imagem ocupa 80% da largura da viewport até 640 pixels CSS. Acima disso, ocupa 520 pixels CSS.
Complete com o valor final, incluindo a unidade:
sizes="(max-width: 640px) 80vw, ____"
Agora, considere uma imagem cuja largura prevista seja:
100vw.50vw.480px.Como as condições com max-width se sobrepõem, coloque o menor limite primeiro:
sizes="(max-width: 600px) 100vw,
(max-width: 1000px) 50vw,
480px"Exemplo
As duas condições são verdadeiras: 500 é menor que 600 e que 1000. Mesmo assim, vale apenas a primeira: 100vw, ou 500 pixels CSS.
Se a condição de 1000px viesse antes, valeria 50vw, ou 250 pixels CSS. Ela impediria o uso da entrada de 600px. O navegador não procura a condição mais específica: usa a primeira satisfeita.
A apresentação desta imagem já está preparada para estas larguras:
100vw.50vw.560px.Ordene as entradas. Ao escrever o atributo, separe-as por vírgulas.
Com a lista organizada conforme as regras acima, associe cada largura da viewport à largura informada por sizes. Todas as medidas estão em pixels CSS.
Toque em um item e depois no par correspondente.
Passo 6 de 7
Calcule a densidade efetiva, reconheça um sizes incoerente e explique por que a seleção de um arquivo não é garantida.
Com descritores w, o navegador usa a largura informada por sizes para calcular a densidade efetiva de cada candidato:
Densidade efetiva = largura do arquivo em pixels ÷ largura indicada por sizes em pixels CSS.
Se sizes tiver condições, use a largura que vale para a viewport do cenário.
Exemplo
Para arquivos cujas larguras reais correspondem aos descritores:
Em uma tela de densidade 2, o candidato de 800w corresponde à referência calculada. Isso orienta a seleção, mas não obriga o navegador a escolhê-lo.
Uma imagem tem sizes="600px". Um dos candidatos tem largura real de 900 pixels e está declarado como 900w.
A densidade efetiva desse candidato é ___ vezes. Digite apenas o número.
O navegador relaciona as densidades efetivas à densidade da tela e às condições de exibição. Condições de rede, preferências do usuário, cache — arquivos já armazenados — e decisões internas também podem influenciar a seleção.
Por isso, não é possível garantir a escolha de um arquivo específico.
Exemplo
Considere uma imagem que ocupa 400 pixels CSS na página:
Esses valores alteram a referência da seleção, não o tamanho visual da imagem.
Dica
Uma escolha inesperada não prova erro na marcação. Confira se os descritores correspondem às dimensões reais dos arquivos e se sizes representa a largura de exibição no cenário avaliado.
Nesta página com apresentação já preparada, a imagem ocupa sempre 400 pixels CSS de largura. A tela tem densidade 2. As larguras reais dos arquivos correspondem aos descritores abaixo.
<img
src="lago-400.jpg"
srcset="lago-400.jpg 400w,
lago-800.jpg 800w,
lago-1200.jpg 1200w"
sizes="800px"
alt="Barco à margem de um lago"
>Qual declaração está incoerente com a largura visual e como você a corrigiria?
Após a correção, lago-800.jpg passa a ser uma escolha obrigatória? Justifique citando um fator que pode influenciar a seleção.
Escreva pelo menos 30 caracteres (0/30).
Passo 7 de 7
Complete dois elementos img e revise a coerência entre arquivos, descritores e larguras previstas, sem confundir seleção do recurso com tamanho visual.
Com largura de exibição fixa e conhecida, descritores x são uma opção direta. Quando essa largura varia, w + sizes permite declarar as resoluções disponíveis e informar a largura prevista em cada situação.
Agora você vai aplicar essas estratégias em dois elementos img.
Dica
Os arquivos de cada conjunto já existem e têm o mesmo conteúdo, enquadramento e proporção. As dimensões informadas foram verificadas.
Acrescente apenas os atributos solicitados: mantenha src, alt, width e height como foram fornecidos.
A imagem ocupa sempre 240 pixels CSS de largura.
Arquivos disponíveis, com largura × altura em pixels:
<img
src="vaso-240.jpg"
alt="Vaso azul sobre uma mesa"
width="240"
height="160"
>Reescreva o img completo, acrescentando um srcset com os dois arquivos e descritores x. Em uma frase, justifique os valores dos descritores.
A apresentação da página já está preparada para exibir a imagem assim:
Arquivos disponíveis, com largura × altura em pixels:
<img
src="jardim-medio.jpg"
alt="Caminho de pedras entre canteiros floridos"
width="960"
height="640"
>Reescreva o img com os três arquivos em srcset usando w. Acrescente sizes com duas condições max-width e um valor final padrão.
Justifique o uso de w + sizes e explique por que esses atributos não definem, por si só, o tamanho visual nem garantem a escolha de um arquivo específico.
Resumo
Compare suas duas respostas com estes critérios:
Parabéns! Você concluiu: Oferecer resoluções de imagem com srcset e sizes
Você concluiu “Oferecer resoluções de imagem com srcset e sizes”. Use o checklist para configurar e revisar candidatos tanto para imagens de largura fixa quanto variável.
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
