Product Card Component with HTML and CSS

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 8 months ago

  Olá @j-pcgoncalves!

  Seu projeto está ótimo!

  Eu tenho uma sugestão sobre o seu código que pode te interessar:

  📌 Você pode usar a tag <picture> quando tiver diferentes versões da mesma imagem 🖼.

  Usar a tag <picture> ajudará a carregar a imagem correta para o dispositivo do usuário, economizando largura de banda e melhorando o desempenho. Exemplo:

  <picture>
      <source media="(max-width: 460px)" srcset="{caminho da imagem desktop aqui}">
      <img src="{caminho da imagem mobile aqui}" alt="{texto alternativo aqui}">
  </picture>
  

  Espero que isso ajude!

  Fora isso, excelente trabalho!

  Marked as helpful

  1

  ---

  

  João Gonçalves•80

  @j-pcgoncalvesPosted 8 months ago

  Olá @danielmrz-dev!

  Não conhecia essa tag de HTML e da utilidade dela, mas sem dúvida que a vou usar nos próximos projetos! É mais fácil do que esconder imagens com CSS para alternar entre imagem de desktop e mobile.

  Muito obrigado pelo Feedback!

  1

  

  Daniel 🛸•44,310

  @danielmrz-devPosted 8 months ago

  @j-pcgoncalves

  Pois é, é uma tag bem útil! Elimina a necessidade de utilizar media queries pra fazer a troca das imagens, consequentemente, reduz código desnecessário 😊

  1