Quais formatos de imagem populares são utilizados na web?

• Raster (Rasterizados):
  • JPEG (.jpg, .jpeg): Bom para fotografias, suporta compressão com perdas. Não suporta transparência.
  • PNG (.png): Suporta transparência (canal alfa). PNG-8 para imagens simples com paleta, PNG-24 para imagens de maior qualidade com gama completa de cores. Compressão sem perdas.
  • GIF (.gif): Suporta animação e transparência. Limitado a 256 cores. Usado para animações simples e ícones.
  • WebP (.webp): Desenvolvido pelo Google. Suporta compressão com e sem perdas, animação e transparência. Geralmente menor em tamanho com qualidade semelhante em comparação com JPEG e PNG.
• Vetorial (Vetores):
  • SVG (.svg): Escala sem perda de qualidade. Ideal para logotipos, ícones, gráficos. Baseado em XML.

Formato	Tipo	Transparência	Animação	Compressão	Melhor uso
JPEG	Rasterizado	Não	Não	Com perdas	Fotografias
PNG	Rasterizado	Sim	Não	Sem perdas	Imagens com transparência, gráficos
GIF	Rasterizado	Sim (simples)	Sim	Sem perdas	Animações simples, ícones
WebP	Rasterizado	Sim	Sim	Com perdas/Sem perdas	Uso geral
SVG	Vetorial	Sim	Sim (CSS/JS)	Sem perdas	Logotipos, ícones, gráficos

A escolha do formato depende do tipo de imagem, requisitos de qualidade, suporte de transparência e animação, bem como do tamanho de arquivo necessário. O uso de <picture> ou do atributo srcset na tag <img> permite oferecer diferentes formatos (por exemplo, WebP e JPEG) dependendo do suporte do navegador para otimizar o desempenho.