Sugestões de tamanhos e srcset

Imagem de uma balança com uma fita métrica
O tamanho das imagens reflete diretamente no peso.


Para entendermos estas duas propriedades precisamos falar primeiro das sugestões de tamanhos.

Quando falamos em performance um dos principais calcanhares de aquiles são as imagens. Elas pesam muito mais do que os textos. Vamos supor que em seu site exista a imagem de um gato com um novelo de lã. E vamos supor ainda que seja uma imagem de alta, com 2890px de largura e 1325 de altura.

O desenvolvimento web tradicional nos ensina a “responsivar” a imagem, definido a largura e tornando a altura automática. Com isso caso o acesso seja feito de um dispositivo móvel com 467px de largura nós vamos dizer para o navegador baixar e carregar uma imagem de 2890px de largura. Uma imagem inúmeras vezes mais larga que o próprio dispositivo. Uma imagem pesada que prejudica a performance.

Para resolver o problema, portanto, nós não colocamos no servidor apenas uma imagem do gato com o novelo de lã, mas sim umas 4 ou 5 de tamanhos diferentes e sugerimos para o navegador o melhor tamanho para cada resolução. Daí o nome da propriedade, sugestões de tamanhos.

A partir do momento que vamos sugerir para o navegador uma imagem para cada resolução é importante que possamos indicar o caminho, o src de cada uma delas. E esta é a missão que cumpre o srcset. Como o nome já diz, um set de src’s para o navegador poder carregar a imagem do gato com novelo de la ideal para cada tipo de resolução.

Imagem que mostra o atributo srcset e as sugesto~es de tamanhos de uma tag img

Destacamos para você identificar a maneira como sugerimos para os navegadores qual imagem é mais interessante para cada largura/tamanho de device.




AUTOR

João Goya


Desenvolvedor web com mais de 10 anos de experiência que em 20204 partiu para o empreendedorismo com a missão de ajudar equipes de marketing a dar visibilidade para o trabalho das pessoas.

Fale comigo pelo whats WhatsApp

PERGUNTAS FREQUENTES


Search Engine Optimizantion, que significa otimização para os mecanismos de busca. SEO se trata de todo o conjunto de técnicas e boas práticas necessárias para fazer um site ranquear melhor no google. Lembre-se sempre que o desejado é que seu site apareça na primeira página. SEO é o conjunto de técnicas necessárias para fazer isso acontecer. Neste post apresentamos como tratamos o SEO dos sites produzidos na casa.

Ambos. O site é importante para você apresentar todas as informações do seu trabalho de forma agrupada e organizada. Sem falar em toda a credibilidade que ele ajuda criar dentro do seu mercado de atuação. As redes sociais são importantes para humanizar o empreendimento. Pessoas não se relacionam com empresas, pessoas se relacionam com pessoas. Mas caso haja dúvida sobre por qual deles começar, nós falamos um pouco mais sobre o assunto neste post.

Tráfego de um site se trata de o número de visitas que ele recebe por mês, dia ou semana. Quanto maior o número de visitas, maior o tráfego do site. Tráfego orgânico é aquele em que você não precisa pagar nada para gerá-lo. Se você compartilhar um post do seu blog em alguma rede social e seus amigos clicarem, você gerou tráfego sem gastar nada. Este é o chamado tráfego orgânico. Mas quando falamos em vendas é necessário um volume maior de visitantes, daí a necessidade de se impulsionar os posts nas redes sociais e no google. É necessário que você coloque dinheiro para trazer mais visitas. Todo o tráfego que exige investimentos é chamado de tráfego pago.


VER TODAS AS PERGUNTAS

FALE CONOSCO


Se você tem dúvidas ou sugetões, ou se quiser pedir um orçamento sinta-se á vontade para entrar em contato.