A marcação de imagem responsiva pode ser dividida em dois cenários: situações em que o objetivo é as imagens mais eficientes possíveis e situações em que você precisa de controle explícito sobre qual origem de imagem o navegador seleciona. Você pode considerá-las como sintaxes descritivas e prescritivas, respectivamente.
Neste módulo, você vai conhecer as duas abordagens. Primeiro, vamos falar sobre srcset e sizes e como ajudar o navegador a fazer a melhor
escolha com base no que ele sabe sobre o usuário, o dispositivo e a situação de navegação. Em seguida, você descobrirá o elemento <picture>,
que permite o controle explícito sobre a seleção da origem com base em fatores como tamanho da janela de visualização e suporte do navegador para formatos de imagem.
Sintaxes descritivas
Uma sintaxe descritiva fornece ao navegador informações sobre as origens da imagem e como elas serão usadas, mas deixa a decisão para o navegador. Esse é, de longe, o cenário mais comum. Para a grande maioria das imagens, você não quer controle granular sobre o comportamento do navegador. Os navegadores têm muito mais informações à disposição do que os desenvolvedores da Web e podem tomar decisões complexas com base nessas informações. Não é possível prever os contextos de navegação dos usuários com precisão, porque há informações demais sobre o hardware, as preferências e as velocidades de conexão dos usuários. Na melhor das hipóteses, você pode dar palpites, mas não tem como saber certamente a experiência de cada usuário na Web. O caso de uso central para imagens responsivas é estritamente orientado a metas, do ponto de vista de um desenvolvedor: permitir que os navegadores façam as solicitações de imagem mais eficientes possíveis com base nas informações que o navegador tem em mãos.
Para permitir que os navegadores façam essas escolhas, srcset permite que você forneça ao navegador uma lista de possíveis fontes para preencher um único
<img>, enquanto sizes permite que você forneça ao navegador informações sobre como essa <img> será renderizada. Você vai aprender a usá-los
no próximo módulo.
Sintaxes prescritivas
Com uma sintaxe prescritiva, você diz ao navegador o que fazer — que fonte selecionar, com base em critérios específicos definidos por você. Embora esse caso de uso não seja tão comum quanto "apenas carregar o recurso mais eficiente para renderizar essa imagem", ele nos permite fornecer instruções de uso ao navegador para considerar informações que não tem antes da transferência de recursos, como o conteúdo das origens ou seus formatos.
Embora srcset e sizes forneçam uma sintaxe para transmitir informações ao navegador do usuário e permitir que ele tome decisões sobre
origens de imagem, há momentos em que é necessário ter controle explícito sobre qual arquivo de origem é apresentado e quando. Por exemplo, talvez você
queira mostrar versões do mesmo conteúdo de imagem com proporções diferentes, com base nos diferentes tratamentos de design nos pontos de interrupção do layout,
ou garantir que apenas navegadores com suporte a uma codificação específica recebam fontes específicas.
Nesses casos, convém ter controle explícito sobre qual origem é exibida e quando. Essas são garantias que srcset e sizes não podem oferecer
por padrão. Para ter esse controle, precisamos usar o elemento <picture>.