A instrutura/Professora informou que a melhor abordagem seria uma tag div genérica com background-image. Nesse caso não seria melhor a utilização da tag picuture definindo os source's de cada tamanho?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
A instrutura/Professora informou que a melhor abordagem seria uma tag div genérica com background-image. Nesse caso não seria melhor a utilização da tag picuture definindo os source's de cada tamanho?
Oi, Carlos, como vai?
A sua sugestão faz bastante sentido. A tag <picture> realmente permite trabalhar com diferentes fontes de imagem de acordo com o tamanho ou características do dispositivo, usando <source> e mantendo um <img> como fallback. Para imagens que fazem parte do conteúdo da página, essa costuma ser uma abordagem mais semântica e adequada do que colocar a imagem como background-image em uma <div>.
A diferença aqui está principalmente na intenção da imagem. Na aula, a imagem dos destinos está sendo tratada mais como parte visual do componente, semelhante ao que foi feito no Hero, e por isso a estratégia com background-image facilita bastante a troca da imagem via CSS usando media queries. Além disso, permite controlar propriedades como background-size, background-position e sobreposições sem alterar o HTML.
Então, não significa que <picture> seria incorreto. Na verdade, seria uma ótima alternativa se essas imagens fossem consideradas conteúdo relevante da página. A escolha entre as duas abordagens depende bastante do papel que a imagem desempenha no componente.
Na sua opinião, pensando em acessibilidade, semântica e manutenção do código, você usaria <picture> nesse cenário ou manteria o background-image? Qual seria o principal motivo da sua escolha?
Espero que essa comparação ajude a esclarecer a decisão tomada na aula. O fórum fica à disposição caso queira continuar essa discussão.