რა პოპულარული სურათის ფორმატები გამოიყენება ვებ-დიზაინში?

• Raster (რასტრული):
  • JPEG (.jpg, .jpeg): კარგია ფოტოებისათვის, მხარს უჭერს ზარალის შემცველ კუმშვას. არ მხარს უჭერს გამჭვირვალობას.
  • PNG (.png): მხარს უჭერს გამჭვირვალობას (ალფა-ჩანართი). PNG-8 მარტივ გამოსახულებებზე პალიტრასთან, PNG-24 უფრო ხარისხიან და სრული ფერადი გრაფიკით. ზარალის გარეშე კუმშვა.
  • GIF (.gif): მხარს უჭერს ანიმაციას და გამჭვირვალობას. შეზღუდულია 256 ფერით. გამოიყენება მარტივი ანიმაციების და იკონკებისათვის.
  • WebP (.webp): შექმნილია Google-ით. მხარს უჭერს ზარალის შემცველ და ზარალის გარეშე კუმშვას, ანიმაციას და გამჭვირვალობას. ჩვეულებრივ, ზომით პატარაა შესაბამის ხარისხში JPEG და PNG-თან შედარებით.
• Vector (ვექტორული):
  • SVG (.svg): მასშტაბირებულია ხარისხის დანაკარგის გარეშე. შესანიშნავია ლოგოტიპებისთვის, იკონკებისთვის, გრაფიკებისთვის. დაფუძნებულია XML-ზე.

ფორმატი	ტიპი	გამჭვირვალობა	ანიმაცია	კუმშვა	საუკეთესო გამოყენება
JPEG	Raster	არა	არა	ზარალის შემცველია	ფოტოებისათვის
PNG	Raster	დიახ	არა	ზარალის გარეშე	გამჭვირვალობის გამოსახულებები, გრაფიკა
GIF	Raster	დიახ (საშუალო)	კი	ზარალის გარეშე	მარტივი ანიმაციები, იკონკები
WebP	Raster	დიახ	კი	ზარალის შემცველ/ზარალის გარეშე	უნივერსალური
SVG	ვექტორული	დიახ	კი (CSS/JS)	ზარალის გარეშე	ლოგოტიპები, იკონკები, გრაფიკა

ფორმატის არჩევა დამოკიდებულია გამოსახულების ტიპზე, ხარისხის მოთხოვნებზე, გამჭვირვალობის და ანიმაციის მხარდაჭერაზე, ასევე საჭირო ზომაზე. <picture> ან srcset ატრიბუტის გამოყენება <img> ტეგში საშუალებას აძლევს წინადადებებში სხვადასხვა ფორმატების შეთავაზებას (მაგალითად, WebP და JPEG) ბრაუზერის მხარდაჭერის მიხედვით, რათა ოპტიმიზაცია მოხდეს.