Muitos sites solicitam recursos pesados, como imagens, que não são otimizados para determinadas telas e enviam arquivos CSS grandes que contêm estilos que alguns dispositivos nunca usarão. O uso de consultas de mídia é uma técnica popular para fornecer folhas de estilo e recursos personalizados a diferentes telas, reduzindo a quantidade de dados transferidos para os usuários e melhorando o desempenho de carregamento da página. Este guia mostra como usar consultas de mídia para enviar imagens que têm apenas o tamanho necessário, uma técnica conhecida como imagens responsivas.
Pré-requisitos
Neste guia, presumimos que você já conhece o Chrome DevTools. Se preferir, use o DevTools de outro navegador. Basta mapear as capturas de tela do Chrome DevTools neste guia de volta para os recursos relevantes no navegador de sua escolha.
Entender imagens de plano de fundo responsivas
Primeiro, analise o tráfego de rede da demonstração não otimizada:
- Abra a demonstração não otimizada em uma nova guia do Chrome.
- Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
- Clique na guia Rede.
- Atualize a página.
Você vai notar que a única imagem solicitada é background-desktop.jpg, que tem um tamanho de 1006 KB:
Redimensione a janela do navegador e observe que o registro de rede não mostra nenhuma nova solicitação feita pela página. Isso significa que o mesmo plano de fundo de imagem está sendo usado para todos os tamanhos de tela.
Confira os estilos que controlam a imagem de plano de fundo em style.css:
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat; background-size: cover;
background-image: url(images/background-desktop.jpg);
}
Confira o significado de cada uma das propriedades usadas:
background-position: center center: centraliza a imagem vertical e horizontalmente.background-repeat: no-repeat: mostra a imagem apenas uma vez.background-attachment: fixed: evite rolar a imagem de plano de fundo.background-size: cover: redimensione a imagem para cobrir todo o contêiner.background-image: url(images/background-desktop.jpg): o URL da imagem.
Quando combinados, esses estilos informam ao navegador para adaptar a imagem de plano de fundo a diferentes alturas e larguras de tela. Essa é a primeira etapa para conseguir um plano de fundo responsivo.
Usar uma única imagem de plano de fundo para todos os tamanhos de tela tem algumas limitações:
- A mesma quantidade de bytes é enviada, independente do tamanho da tela, mesmo quando, para alguns dispositivos, como smartphones, um plano de fundo de imagem menor e mais leve ficaria tão bom quanto. Em geral, é recomendável enviar a menor imagem possível que ainda tenha uma boa aparência na tela do usuário para melhorar o desempenho e economizar dados do usuário.
- Em dispositivos menores, a imagem será esticada ou cortada para cobrir toda a tela, o que pode ocultar partes relevantes do plano de fundo para os usuários.
Na próxima seção, você vai aprender a aplicar uma otimização para carregar diferentes imagens de plano de fundo, de acordo com o dispositivo do usuário.
Usar consultas de mídia
Usar consultas de mídia é uma técnica comum para declarar folhas de estilo que serão aplicadas apenas a determinados tipos de mídia ou dispositivos. Elas são implementadas usando regras@media, que permitem definir um conjunto de pontos de interrupção em que estilos específicos são definidos.
Quando as condições definidas pela regra @media são atendidas (por exemplo, uma determinada largura de tela), o grupo de estilos definido dentro do ponto de interrupção é aplicado.
As etapas a seguir podem ser usadas para aplicar consultas de mídia ao site, de modo que diferentes imagens sejam usadas, dependendo da largura máxima do dispositivo que solicita a página.
- Em
style.css, remova a linha que contém o URL da imagem de plano de fundo:
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat; background-size: cover;
background-image: url(images/background-desktop.jpg);
}
- Em seguida, crie um ponto de interrupção para cada largura de tela com base nas dimensões comuns em pixels que as telas de dispositivos móveis, tablets e computadores geralmente têm:
Em dispositivos móveis:
@media (max-width: 480px) {
body {
background-image: url(images/background-mobile.jpg);
}
}
Para tablets:
@media (min-width: 481px) and (max-width: 1024px) {
body {
background-image: url(images/background-tablet.jpg);
}
}
Para dispositivos desktop:
@media (min-width: 1025px) {
body {
background-image: url(images/background-desktop.jpg);
}
}
Abra a versão otimizada de style.css no navegador para conferir as mudanças feitas.
Medir para diferentes dispositivos
Em seguida, visualize o site resultante em diferentes tamanhos de tela e em dispositivos móveis simulados:
- Abra o site otimizado em uma nova guia do Chrome.
- Deixe a janela de visualização estreita (menos de
480px). - Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
- Clique na guia Rede.
- Atualize a página.
Observe como a imagem
background-mobile.jpgfoi solicitada. - Aumente a largura da janela de visualização. Quando ele for mais largo que
480px, observe comobackground-tablet.jpgé solicitado. Quando ele for mais largo que1025px, observe comobackground-desktop.jpgé solicitado.
Quando a largura da tela do navegador é alterada, novas imagens são solicitadas.
Principalmente quando a largura está abaixo do valor definido no ponto de interrupção para dispositivos móveis (480 px), o seguinte registro de rede aparece:
O tamanho do novo plano de fundo para dispositivos móveis é 67% menor do que o de computadores.
Efeitos na Maior exibição de conteúdo (LCP)
Elementos com imagens de plano de fundo CSS são considerados candidatos para Largest Contentful Paint (LCP). No entanto, as imagens de plano de fundo CSS não podem ser descobertas pelo scanner de pré-carregamento do navegador. Isso significa que você pode estar atrasando o LCP do seu site se não tomar cuidado.
A primeira opção a ser considerada é se a imagem candidata ao LCP pode funcionar em um elemento <img> com atributos srcset e sizes para responsividade. O scanner de pré-carregamento do navegador vai descobrir elementos <img> e enviar solicitações para eles enquanto o analisador estiver bloqueado na renderização.
Se você não puder (ou não quiser) evitar o uso de uma imagem de plano de fundo CSS, a segunda opção será pré-carregar imagens responsivas para garantir que a imagem certa seja pré-carregada para o tamanho adequado da janela de visualização. Os elementos <link> media, imagesrcset e imagesizes indicam ao navegador que uma determinada dica de recurso só se aplica em determinadas condições de janela de visualização, evitando vários pré-carregamentos desperdiçados quando você só quer carregar o recurso adequado para a janela de visualização atual.
Resumo
Neste guia, você aprendeu a aplicar consultas de mídia para solicitar imagens de plano de fundo adaptadas a tamanhos de tela específicos e economizar bytes ao acessar o site em dispositivos menores, como smartphones.
Você usou a regra @media para implementar um plano de fundo responsivo. Essa técnica é amplamente compatível com todos os navegadores.
Um novo recurso do CSS, image-set(), pode ser usado para a mesma finalidade com menos linhas de código. No momento da redação deste artigo, esse recurso não é compatível com todos os navegadores, mas vale a pena ficar de olho na evolução da adoção, já que ele pode representar uma alternativa interessante a essa técnica.