Otimizar imagens de fundo CSS com consultas de mídia
Muitos sites solicitam recursos pesados, como imagens, que não são otimizados para determinadas telas, e enviam grandes arquivos CSS contendo estilos que alguns dispositivos jamais usarão. O uso de consultas de mídia é uma técnica popular para fornecer folhas de estilo e ativos personalizados para diferentes telas para reduzir a quantidade de dados transferidos para os usuários e melhorar o desempenho do carregamento da página. Este guia mostra como usar consultas de mídia para enviar imagens que têm o tamanho necessário, uma técnica comumente conhecida como imagens responsivas.
Pré-requisitos #
Este guia pressupõe que você esteja familiarizado com o Chrome DevTools. Você pode usar DevTools de outro navegador, se preferir. Você só precisa mapear as capturas de tela do Chrome DevTools neste guia de volta aos recursos relevantes no navegador de sua escolha.
Compreenda as imagens 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. 1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
- Click the Network tab. 1. Reload the page.
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 log de rede não está mostrando nenhuma nova solicitação feita pela página. Isso significa que a mesma imagem de fundo está sendo usada para todos os tamanhos de tela.
Você pode ver os estilos que controlam a imagem 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);
}Aqui está o significado de cada uma das propriedades usadas:
background-position: center center: Centralize a imagem verticalmente e horizontalmente.background-repeat: no-repeat: Mostrar a imagem apenas uma vez.background-attachment: fixed: Evite fazer a rolagem da imagem 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 instruem o navegador a adaptar a imagem de fundo a diferentes alturas e larguras de tela. Este é o primeiro passo para obter um background 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, independentemente do tamanho da tela, mesmo quando, para alguns dispositivos, como telefones, uma imagem de fundo menor e mais leve pareceria igualmente boa. Em geral, você deseja enviar a menor imagem possível que ainda pareça boa 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 a tela inteira, potencialmente escondendo partes relevantes do plano de fundo para os usuários.
Na próxima seção, você aprenderá como aplicar uma otimização para carregar diferentes imagens 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 se aplicam apenas a determinados tipos de mídia ou dispositivo. Eles são implementados usando @media rules, que permitem definir um conjunto de pontos de interrupção, onde estilos específicos são definidos. Quando as condições definidas pela @media são atendidas (por exemplo, uma certa largura de tela), o grupo de estilos definido dentro do breakpoint 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 está solicitando a página.
- Em
style.cssremova 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 celulares, tablets e desktops geralmente têm:
Para celular:
@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 desktops:
@media (min-width: 1025px) {
body {
background-image: url(images/background-desktop.jpg);
}
}Abra a versão otimizada de style.css em seu navegador para ver as alterações feitas.
Medida 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.
- Torne sua janela de visualização estreita (menos de
480px). 1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools. - Click the Network tab. 1. Reload the page. Observe como a imagem
background-mobile.jpgfoi solicitada. - Aumente a sua janela de visualização. Quando for maior que
480pxobserve comobackground-tablet.jpgé solicitado. Quando for maior que1025pxobserve comobackground-desktop.jpgé solicitado.
Quando a largura da tela do navegador é alterada, novas imagens são solicitadas.
Em particular, quando a largura está abaixo do valor definido no ponto de interrupção móvel (480px), você vê o seguinte Log de rede:
O tamanho do novo plano de fundo do celular é 67% menor do que o do desktop.
Resumo #
Neste guia, você aprendeu a aplicar consultas de mídia para solicitar imagens de fundo personalizadas para tamanhos de tela específicos e economizar bytes ao acessar o site em dispositivos menores, como telefones celulares. Você usou a @media para implementar um plano de fundo responsivo. Esta técnica é amplamente suportada por todos os navegadores. Um novo recurso 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 era compatível com todos os navegadores, mas você pode querer ficar de olho em como a adoção evolui, pois pode representar uma alternativa interessante a essa técnica.