¿Qué formatos de imagen populares se utilizan en el diseño web?

• Raster (Rasterizados):
  • JPEG (.jpg, .jpeg): Bueno para fotografías, soporta compresión con pérdida. No soporta transparencia.
  • PNG (.png): Soporta transparencia (canal alfa). PNG-8 para imágenes simples con paleta, PNG-24 para imágenes de mayor calidad con gama completa de colores. Compresión sin pérdida.
  • GIF (.gif): Soporta animación y transparencia. Limitado a 256 colores. Se usa para animaciones simples e íconos.
  • WebP (.webp): Desarrollado por Google. Soporta compresión con y sin pérdida, animación y transparencia. Generalmente más pequeño en tamaño con calidad similar en comparación con JPEG y PNG.
• Vector (Vectoriales):
  • SVG (.svg): Se escala sin pérdida de calidad. Ideal para logotipos, íconos, gráficos. Basado en XML.

Formato	Tipo	Transparencia	Animación	Compresión	Mejor uso
JPEG	Rasterizado	No	No	Con pérdida	Fotografías
PNG	Rasterizado	Sí	No	Sin pérdida	Imágenes con transparencia, gráficos
GIF	Rasterizado	Sí (simple)	Sí	Sin pérdida	Animaciones simples, íconos
WebP	Rasterizado	Sí	Sí	Con pérdida/Sin pérdida	Uso general
SVG	Vectorial	Sí	Sí (CSS/JS)	Sin pérdida	Logotipos, íconos, gráficos

La elección del formato depende del tipo de imagen, requisitos de calidad, soporte de transparencia y animación, así como del tamaño de archivo necesario. El uso de <picture> o del atributo srcset en la etiqueta <img> permite ofrecer diferentes formatos (por ejemplo, WebP y JPEG) según el soporte del navegador para optimizar el rendimiento.