Tamanho adequado de imagem de fundo para a Web

Ao elaborar um site, é importante entender como cada imagem, caixa de texto e hiperlink interage entre si para criar um conjunto funcional. Isso é ainda mais importante para imagens de fundo, que podem proporcionar cor e estilo a um layout minimalista. Entretanto, se essa imagem não for otimizada com as dimensões e o tamanho corretos do arquivo, isso poderá afetar o desempenho de seu site ou esticar a imagem de maneira desagradável. Abaixo, descrevemos algumas dicas essenciais para selecionar e redimensionar imagens de fundo para a web.


Precisa de imagens para o seu projeto? A impressionante coleção do Shutterstock de mais de 70 milhões de imagens pode ajudar você! Veja o que a nossa biblioteca disponibiliza para você.


Tamanho é tudo
Imagens de fundo são ótimas para tornar um site atraente, mas quanto mais dependente de imagens, mais lento será o site. Para evitar sobrecarregar o site com muitos dados, é preciso encontrar o equilíbrio ideal entre a qualidade e o tamanho da imagem. Deve-se pensar sobre os padrões de resolução de hoje, que informam quantos pixels são exibidos em uma tela. 

Atualmente, as resoluções de desktop e tablet mais populares são 1280 x 800, 1366 x 768 e 1920 x 1080. Por outro lado, os smartphones exibirão o site com uma resolução muito menor, como 320 x 480 ou 800 x 480. Por fim, os computadores equipados com telas Retina precisam de imagens duas vezes maiores do que a de um monitor comum. 

Encontrando o meio-termo
Como é possível criar uma imagem de fundo que atenda a todos esses requisitos? Se quiser usar uma imagem de fundo altamente detalhada, é melhor manter o tamanho do arquivo abaixo de 1 MB (se possível, abaixo de 100 KB). 

Uma boa ideia é usar uma imagem de plano de fundo de 1 MB, que pode forçar os limites de velocidade comum da Internet do usuário, mas não afetará sua experiência na Web. Além disso, se a mesma imagem de fundo for usada em todo o site, será possível aumentar a resolução, já que a imagem será armazenada no cache do usuário após ser carregada pela primeira vez. Recomendamos redimensionar sua imagem de fundo para que ela tenha uma taxa de 1,777 para 1, que é ideal para telas com uma resolução de 1920 x 1080. 

  • Este artigo foi útil?

Não consegue encontrar o que você está procurando?