Skip to content
Aprender Medir Blog Case studies Sobre
Nesta página
  • Pré-requisitos
  • Compreenda as imagens de fundo responsivas
  • Usar consultas de mídia
  • Medida para diferentes dispositivos
  • Resumo

Otimizar imagens de fundo CSS com consultas de mídia

Mar 5, 2020 — Atualizado Mar 5, 2020
Available in: Español, 한국어, 中文, English
Appears in: Tempos de carregamento rápidos
Demian Renzulli
Demian Renzulli
TwitterGitHubGlitch
Nesta página
  • Pré-requisitos
  • Compreenda as imagens de fundo responsivas
  • Usar consultas de mídia
  • Medida para diferentes dispositivos
  • Resumo

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:

  1. 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.
  2. Click the Network tab. 1. Reload the page.
Confira Inspecionar atividade de rede com Chrome DevTools se precisar de mais ajuda com DevTools.

Você verá que a única imagem solicitada é background-desktop.jpg, que tem um tamanho de 1006 KB:

Rastreamento de rede DevTools para a imagem de fundo não otimizada.

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.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 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.

As imagens usadas na demonstração otimizada já foram redimensionadas para caber em diferentes tamanhos de tela. Mostrar como redimensionar imagens está fora do escopo deste guia, mas se você quiser saber mais sobre isso, o guia veicular imagens responsivas cobre algumas ferramentas úteis, como o pacote npm sharp e o ImageMagick CLI.

Medida para diferentes dispositivos #

Em seguida, visualize o site resultante em diferentes tamanhos de tela e em dispositivos móveis simulados:

  1. Abra o site otimizado em uma nova guia do Chrome.
  2. Torne sua janela de visualização estreita (menos de 480px). 1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
  3. Click the Network tab. 1. Reload the page. Observe como a imagem background-mobile.jpg foi solicitada.
  4. Aumente a sua janela de visualização. Quando for maior que 480px observe como background-tablet.jpg é solicitado. Quando for maior que 1025px observe como background-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:

Rastreamento de rede DevTools para a imagem de fundo otimizada.

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.

Desempenho
Last updated: Mar 5, 2020 — Improve article
Return to all articles
Compartilhar
assinar

Contribute

  • Registrar um bug
  • Visualizar código-fonte

Conteúdo relacionado

  • developer.chrome.com
  • Atualizações do Chrome
  • Web Fundamentals
  • Estudos de caso
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos os produtos
  • Termos e privacidade
  • Diretrizes da comunidade

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.