როგორ დავტვირთოთ სურათების ოპტიმიზაცია ვებგვერდზე?

1. შეკუმშვა: გამოიყენეთ ინსტრუმენტები სურათების ზომის ოპტიმიზაციისთვის ხარისხის დაკარგვის გარეშე (მაგალითად, TinyPNG, Compressor.io).
2. ფორმატები: აირჩიეთ თანამედროვე ფორმატები, როგორიცაა WebP ან AVIF, რომლებიც უკეთეს სიღრმის შემცირებას უზრუნველყოფენ JPEG და PNG-თან შედარებით. ძველი ბრაუზერებისთვის გამოიყენეთ <picture> ან srcset ატრიბუტი fallback-ისთვის.
3. Lazy Loading: გადადეთ სურათების ჩატვირთვა, რომლებიც გარეთ ხედვის ზონაშია, საჭიროებისამებრ. გამოიყენეთ loading="lazy" ან JavaScript ბიბლიოთეკები.
4. რესპონსიული სურათები: მიაწოდეთ სხვადასხვა ვერსიები სურათებისთვის სხვადასხვა ეკრანის ზომებისა და რეზოლუციებისთვის, <picture> ელემენტის ან srcset/sizes ატრიბუტების გამოყენებით.
5. CDN (Content Delivery Network): განათავსეთ სურათები CDN-ზე, რათა უფრო სწრაფად მიაწოდოთ კონტენტი მომხმარებლებს მათთან ყველაზე ახლოს მდებარე ადგილიდან.
6. კეშირება: კონფიგურაცია სწორ კეშ ჰედერებს სერვერზე, რათა ბრაუზერმა შეძლოს სურათების შენახვა და მათი ჩამოტვირთვა ადგილობრივ კეშიდან, განმეორებითი ვიზიტებისას.
7. Placeholder/Blurhash: აჩვენეთ დაბალი ხარისხის "placeholder" ან გენერირებული Blurhash, სანამ სრული ზომის სურათი იტვირთება.

მაგალითი loading="lazy" გამოყენებისთვის:

<img src="image.jpg" alt="სურათის აღწერა" loading="lazy">

მაგალითი <picture> გამოყენებისთვის სხვადასხვა ფორმატებისთვის:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="სურათის აღწერა">
</picture>