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 vão usar. O uso de consultas de mídia é uma técnica comum para fornecer folhas de estilo e recursos personalizados para diferentes telas, reduzindo a quantidade de dados transferidos aos usuários e melhorando o desempenho do carregamento da página. Este guia mostra como usar consultas de mídia para enviar imagens apenas do tamanho necessário, uma técnica conhecida como imagens responsivas.
Pré-requisitos
Este guia pressupõe que você já saiba usar as Ferramentas do desenvolvedor do Chrome. Se preferir, use as ferramentas de desenvolvimento 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 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 as Ferramentas do desenvolvedor.
- Clique na guia Rede.
- Recarregue a página.
A única imagem que está sendo solicitada é background-desktop.jpg
, que tem um tamanho de 1.006 KB:
Redimensione a janela do navegador e observe que o registro de rede não mostra novas solicitações feitas pela página. Isso significa que o mesmo plano de fundo de imagem está sendo usado para todos os tamanhos de tela.
Os estilos que controlam a imagem de plano de fundo estão 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 na vertical e na horizontal.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 criar 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 fica tão bom quanto. Em geral, é recomendável enviar a imagem menor possível que ainda apareça bem na tela do usuário para melhorar o desempenho e salvar os 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
O uso de 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 dispositivo. 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
forem atendidas (por exemplo, uma determinada largura de 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 imagens diferentes 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:
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 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.
- Reduzir a janela de visualização (menos de
480px
). - Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.
- Clique na guia Rede.
- Recarregue a página.
Observe como a imagem
background-mobile.jpg
foi solicitada. - Amplie a janela de visualização. Quando a largura for maior que
480px
, observe comobackground-tablet.jpg
é solicitado. Quando a largura for maior que1025px
, observe comobackground-desktop.jpg
é solicitado.
Quando a largura da tela do navegador é alterada, novas imagens são solicitadas.
Especificamente, quando a largura estiver abaixo do valor definido no ponto de interrupção para dispositivos móveis (480 px), o seguinte registro de rede será exibido:
O tamanho do novo plano de fundo para dispositivos móveis é 67% menor do que o de computador.
Efeitos na maior exibição de conteúdo (LCP)
Elementos com imagens de plano de fundo do CSS são considerados candidatos para Largest Contentful Paint (LCP), mas as imagens de plano de fundo do CSS não são detectáveis pelo scanner de pré-carregamento do navegador, o que significa que você pode atrasar o LCP do seu site se não tomar cuidado.
A primeira opção que você precisa considerar é se a imagem candidata do 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) usar uma imagem de plano de fundo CSS, a segunda opção seria carregar imagens responsivas para garantir que a imagem certa seja carregada para o tamanho adequado da janela de visualização. Os elementos <link>
media
, imagesrcset
e imagesizes
indicam ao navegador que uma determinada sugestão de recurso só se aplica em determinadas condições de viewport, evitando vários carregamentos prévios desnecessários quando você só quer carregar o recurso que se encaixa na viewport 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 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 tem suporte amplo em todos os navegadores.
Um novo recurso do CSS: image-set(), pode ser usado para a mesma finalidade com menos linhas de código. Até o momento, esse recurso não é compatível com todos os navegadores, mas é importante acompanhar a evolução da adoção, já que ele pode ser uma alternativa interessante para essa técnica.