Responsividade_X_Eficiência

Link de Acesso: https://paulohor2030.github.io/Responsividade_X_Eficiencia_Versao2/

Como equilibrar Responsividade e Eficiência na carga de imagens?

Quando queremos ter imagens com resolução adequada aos equipamentos que estaremos trabalhando,

teremos que fazer com que a programação se adeque ao equipamento/device que irá abrir o site.

Se o Browser utilizado suportar a propriedade srcset, podemos configurar o tamanho da imagem de acordo com a

resolução do equipamento (ie, celular, desktop, laptop, monitor 4k):

• Se for um celular, poderá ser uma resolução menor,
  no nosso por exemplo [até 480px de largura] , width= 200w.
• Quando for uma tela mediana, teremos que usar uma resolução
  igualmente mediana, no nosso por exemplo [de 481px até 1024px de largura], width= 400w.
• Entretanto, quando a tela tiver uma resolução 4K ou mais, nos casos de ultrawide [maior que 1024px de largura],
  deveremos trabalhar com uma resolução superior, no nosso por exemplo, width= 600w.

**** Atenção ****

Cabe ressaltar que em caso do browser nao suportar a propriedade srcset,
nós já prevemos com o uso da imagem no tamanho de 200 x 100.

Trecho do código HTML mais relevante:

'''

src="imagens/logo.png"
srcset="
imagens/thermosafe_logo_200x100.png 200w,
imagens/thermosafe_logo_400x200.png 400w,
imagens/thermosafe_logo_600x300.png 600w

sizes="(max-width: 480px) 200px, (max-width: 1024px) 400px, 600px"
alt="ThermoSafe — Confiança em cada número"
class="logo">
''' "