Importante

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!

1
resposta

Por que não utilizar a tag picture?

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?

1 resposta

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.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!