Ce formate de imagini populare sunt utilizate în designul web?

• Raster (Imagini raster):
  • JPEG (.jpg, .jpeg): Bun pentru fotografii, suportă compresie cu pierderi. Nu suportă transparență.
  • PNG (.png): Suportă transparență (canal alfa). PNG-8 pentru imagini simple cu paletă, PNG-24 pentru imagini de calitate superioară cu gamă completă de culori. Comprimare fără pierderi.
  • GIF (.gif): Suportă animație și transparență. Limitat la 256 de culori. Folosit pentru animații simple și pictograme.
  • WebP (.webp): Dezvoltat de Google. Suportă comprimare cu și fără pierderi, animație și transparență. De obicei mai mic în dimensiune cu o calitate similară comparativ cu JPEG și PNG.
• Vector (Vectorial):
  • SVG (.svg): Se scalează fără pierdere de calitate. Ideal pentru logo-uri, pictograme, grafice. Bazat pe XML.

Format	Tip	Transparență	Animație	Comprimare	Cea mai bună utilizare
JPEG	Raster	Nu	Nu	Cu pierderi	Fotografii
PNG	Raster	Da	Nu	Fără pierderi	Imagini cu transparență, grafice
GIF	Raster	Da (simplu)	Da	Fără pierderi	Animații simple, pictograme
WebP	Raster	Da	Da	Cu pierderi/Fără pierderi	Utilizare universală
SVG	Vectorial	Da	Da (CSS/JS)	Fără pierderi	Logo-uri, pictograme, grafice

Alegerea formatului depinde de tipul imaginii, cerințele de calitate, suportul pentru transparență și animație, precum și de dimensiunea fișierului necesar. Utilizarea <picture> sau atributul srcset în tag-ul <img> permite oferirea diferitelor formate (de exemplu, WebP și JPEG) în funcție de suportul browser-ului pentru a optimiza performanța.