Acabei de aprender isso com o chatGpt e quero compartilhar com vocês:
Alternativa mais performática: usar com srcset Se você quiser otimizar o carregamento e evitar baixar imagens escondidas, pode usar a tag , que só carrega uma imagem:
<picture>
<source srcset="assets/Desktop/banner1-desktop.png" media="(min-width: 1200px)">
<source srcset="assets/Tablet/banner1-tablet.png" media="(min-width: 768px)">
<img src="assets/Mobile/banner1-mobile.png" class="img-fluid" alt="modelo feminina em fundo lilás">
</picture>
Só a imagem correspondente à media query ativa será carregada.
Muito mais leve para performance.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!