Vi que no questionário abaixo é indicado importar as imagens via CSS.
Por mais que funcione, temos alguns problemas que precisam ser levados em consideração:
- Imagens na primeira dobra são assets críticos, se elas estiverem numa tag de imagem no HTML o preload scanner do browser vai adiantar o request dela com fetchpriority de high
- As imagens desse exemplo estão abaixo da dobra, ao aplicar lazy loading nas imagens via tag (loading="lazy") removemos esses assets bloqueantes do carregamento da página
- Como imagens são assets que precisam ser baixados e carregados, se você não alocar espaço pra ela no DOM, enquanto carrega ela vai "chacoalhar" o site ao carregar, causando um layout shift. CLS é um problema de performance que pode ser melhorado atribuindo um height e um width à tag de imagem, o que é possível apenas no HTML.
- Usando as tags picture e source podemos carregar imagens num formato progressivo como .webp e adicionar um fallback em MOZpng ou outros formatos
No geral é desaconselhável carregar imagens no CSS, pela API limitada mas principalmente por problemas de performance.
