Como acelerar imagens de fundo
Imagens de fundo geralmente são usadas em locais que possuem algum texto ou conteúdo na parte superior. Pode ser um controle deslizante, uma imagem em destaque da postagem do blog (como abaixo) ou uma imagem principal.
Provavelmente, eles estão carregando lentamente e podem afetar a experiência do usuário devido ao aumento no Largest Contentful Paint (LCP) se estiverem na dobra acima.
Por que as imagens de fundo são lentas?
Solicitações de baixa prioridade
Se a imagem estiver dentro de um arquivo CSS externo, ela será baixada somente após o download e análise do arquivo CSS, e quando a classe CSS for realmente usada em HTML.
Isso pode refletir em sua métrica principal de sinais vitais da web, como Maior pintura com conteúdo (LCP) se essas imagens de fundo estiverem na dobra acima.
Se for uma tag IMG, a imagem será baixada instantaneamente quando o HTML for analisado.
Carregamento e pré-carregamento difíceis de preguiçosos
As tags IMG podem aproveitar o carregamento lento do navegador nativo, que não requer nenhum JavaScript.
Você ainda pode carregar lentamente imagens de fundo se elas estiverem em HTML como um estilo embutido. Plug-ins como FlyingPress detecte-os automaticamente e carregue-os lentamente.
No entanto, se a imagem de fundo estiver dentro de um arquivo CSS externo ou interno, as coisas ficarão complicadas, pois não conseguimos descobrir se um elemento HTML tem uma imagem de fundo ou não.
Nota: Se você estiver usando FlyingPresstemos uma classe auxiliar “preguiçoso-bg” para carregar lentamente imagens de fundo, mesmo dentro de arquivos CSS.
Use a tag IMG com ajuste ao objeto
Imagens de fundo são comumente usadas em controles deslizantes com algum texto/conteúdo no centro, ou você tem um div fixo e deseja colocar uma imagem que irá ‘preencher’ sem redimensionar a área (tamanho do fundo: capa).
Anteriormente era muito difícil conseguir isso com tags IMG. Portanto, usar imagens de fundo fazia sentido.
No entanto, há uma nova propriedade CSS ajuste ao objeto: capa que dá com o mesmo benefício. Suporte ao navegador também é bom.
Pré-carregar imagem de fundo
Esteja você usando uma imagem de fundo ou uma tag IMG, se a imagem estiver na dobra acima, pré-carregue essa imagem. O pré-carregamento informa ao navegador para baixar aquela imagem em alta prioridade.
Tag IMG com hack ‘display: none’
Imagens de fundo podem ser usadas em conjunto com background-color, background-repeat, background-attachment, background-positione background-blend-mode etc.
Então, em algumas situações, é melhor usar background-image em vez de uma tag IMG para aproveitar outras propriedades CSS.
Você pode adicionar uma tag IMG normal com display: none. Isso instruirá o navegador a baixar a imagem imediatamente, mas exibi-la usando uma imagem de fundo.
Adicione imagens responsivas
Você adiciona srcset e tamanhos a imagens normais para fornecer imagens responsivas com base no dispositivo:
Da mesma forma, você pode fazer o mesmo para imagens de fundo usando conjunto de imagens:
Caso contrário, você entregará a mesma imagem grande para um MacBook de 2880px e um iPhone 6s de 750px!
Imagem de fundo embutida em HTML
Se a sua imagem de fundo estiver dentro de um arquivo CSS externo, incorpore-a no HTML. Dessa forma, o navegador não precisa esperar baixar o arquivo CSS e depois baixar a imagem.
