Parabéns pela postagem, outro atributo interessante é o srcset="" e a tag <picture></picture> para imagens responsivas, onde podemos sugerir imagens com menor resolução para que o navegador possa dimencionar para dispositivos com um conexão mais lenta ou menor processamento. Um artigo muito bom sobre essa propriedade é o da Alura: Srcset: Trabalhando com imagens responsivas

  • Exemplo para imagens iguais mas em resoluções diferentes:

    <img src="imagem-alta-qualidade.png" 
srcset="imagem-baixa-qualidade.png, imagem-media-qualidade.png, imagem-alta-qualidade.png" 
alt="Descrição da imagem">

  • Exemplo para duas imagens diferentes banner-desktop e banner-mobile:

    <picture>
    <source srcset="assets/img/banner-desktop.jpg" media="(min-width: 1024px)" >
    <img src="assets/img/banner-mobile.jpg" alt="Capa do Instalura">
</picture>
MGNhá 2 anos

Exato, e vale resaltar que usando a tag <picture> é possível colocar imagens no formato webp, que atualmente é o formato que mais consegue compactar o tamanho de uma imagem mantendo uma ótima qualidade. Criada pelo Google em 2010, atualmente ela consegue a mesma qualidade ou superior de um jpg e uma qualidade com minima diferença de um png com transparência. Podendo reduzir mais de 30% do tamanho.

Seu defeito é que nem todos navegadores suportam, aí que vem a ajuda da tag <picture>, você precisará ter a versão da imagem em webp dentro na tag <source> e a versão jpg ou png na tag <img>. Assim os navegadores que não suportam webp irão ignorar a versão em webp e ler normalmente a versao "original", e navegadores que suportam iram ler as imagens webp e carregar seu site muito mais rápido. Ganhando pontuação no SEO e rankeamento no Web Light.

Quando há muitas imagens no seu site, e você utiliza webp, seu site pode carregar até 60% mais rapido. Eu já testei e garanto que a experiência do usuário melhora muito e o Google gosta de sites que utilizam esse formato.