Muitos sites solicitam recursos pesados, como imagens, que não são otimizados para determinadas telas, e enviam arquivos CSS grandes com estilos que alguns dispositivos nunca usarão. O uso de consultas de mídia é uma técnica conhecida para exibir folhas de estilo e recursos personalizados em telas diferentes com o objetivo de reduzir a quantidade de dados transferidos aos usuários e melhorar o desempenho do carregamento de página. Este guia mostra como usar consultas de mídia para enviar imagens grandes demais, uma técnica conhecida como imagens responsivas.
Pré-requisitos
Para seguir este guia, você precisa conhecer o Chrome DevTools. Se preferir, use o DevTools de outro navegador. Você só precisará mapear as capturas de tela do Chrome DevTools neste guia para os recursos relevantes no navegador de sua escolha.
Sobre as 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.
- Recarregue a página.
Você verá 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 está mostrando novas solicitações feitas pela página. Isso significa que o mesmo plano de fundo da imagem está sendo usado para todos os tamanhos de tela.
Veja 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 fazer a imagem de plano de fundo rolar.background-size: cover: redimensiona a imagem para cobrir todo o contêiner.background-image: url(images/background-desktop.jpg): o URL da imagem.
Quando combinados, esses estilos orientam o navegador a 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.
O uso de uma única imagem de plano de fundo para todos os tamanhos de tela tem algumas limitações:
- A mesma quantidade de bytes é enviada, independentemente do tamanho da tela, mesmo quando, para alguns dispositivos, como smartphones, um plano de fundo de imagem menor e mais leve também seria bom. 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 é esticada ou cortada para cobrir toda a tela, possivelmente ocultando 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
O uso de consultas de mídia é uma técnica comum para declarar folhas de estilo que só se aplicam a determinados tipos de mídia ou dispositivo. Eles são implementados usando regras@media, que permitem definir um conjunto de pontos de interrupção onde são definidos estilos específicos.
Quando as condições definidas pela regra @media forem atendidas (por exemplo, uma certa largura da tela), o grupo de estilos definido dentro do ponto de interrupção será aplicado.
As etapas a seguir podem ser usadas para aplicar consultas de mídia ao site para 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 normalmente têm:
Para 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 ver as alterações feitas.
Medir dispositivos diferentes
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.
- Reduza a janela de visualização (menos de
480px). - Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
- Clique na guia Rede.
- Recarregue a página.
Observe como a imagem
background-mobile.jpgfoi solicitada. - Aumentar a largura da janela de visualização. Quando ele for maior do que
480px, observe comobackground-tablet.jpgé solicitado. Quando ele for maior do que1025px, observe comobackground-desktop.jpgé solicitado.
Quando a largura da tela do navegador é alterada, novas imagens são solicitadas.
Especificamente quando a largura está abaixo do valor definido no ponto de interrupção para dispositivos móveis (480 pixels), você vê o seguinte registro de rede:
O novo plano de fundo para dispositivos móveis é 67% menor do que o para computadores.
Efeitos na Maior exibição de conteúdo (LCP, na sigla em inglês)
Os elementos com imagens de plano de fundo do CSS são considerados candidatos à Maior exibição de conteúdo (LCP, na sigla em inglês). No entanto, as imagens de plano de fundo do CSS não são detectáveis pelo verificador de pré-carregamento do navegador. Isso significa que você pode atrasar a LCP do seu site se não tomar cuidado.
A primeira opção a ser considerada é se a imagem candidata a LCP pode funcionar em um elemento <img> com atributos srcset e sizes para capacidade de resposta. O scanner de pré-carregamento do navegador 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 seria pré-carregar imagens responsivas para garantir o carregamento prévio da imagem certa para o tamanho adequado da janela de visualização. Os atributos media, imagesrcset e imagesizes dos elementos <link> sugerem ao navegador que uma determinada dica de recurso se aplica somente em determinadas condições da janela de visualização, evitando o desperdício de vários pré-carregamentos quando você só quer carregar o recurso adequado à janela de visualização atual.
Resumo
Neste guia, você aprendeu a aplicar consultas de mídia para solicitar imagens de plano de fundo personalizadas para tamanhos de tela específicos e a economizar bytes ao acessar o site em dispositivos menores, como celulares.
Você usou a regra @media para implementar um plano de fundo responsivo. Essa técnica é amplamente aceita por todos os navegadores.
Um novo recurso do CSS: image-set() pode ser usado para o mesmo propósito com menos linhas de código. No momento em que este artigo foi escrito, esse recurso não é compatível com todos os navegadores, mas você pode querer ficar de olho em como a adoção evolui, já que pode representar uma alternativa interessante a essa técnica.