როგორ გავხადოთ სურათი მობილურ მოწყობილობებზე შემცირებული ზომით იტვირთოს?

მობილურ მოწყობილობებზე მცირე ზომის სურათების ჩატვირთვისთვის გამოიყენება ადაპტური სურათები HTML და CSS-ის საშუალებით:

1. გამოიყენეთ <img> ელემენტი srcset და sizes ატრიბუტებით, რათა ბრაუზერმა აირჩიოს შესაბამისი ზომის სურათი ეკრანის ზომის მიხედვით:

<img src="image-large.jpg"
     srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
     alt="სურათის აღწერა">

2. გამოიყენეთ CSS სურათის მაქსიმალური სიგანის შეზღუდვისთვის:

img {
  max-width: 100%;
  height: auto;
}

3. ასევე შესაძლებელია თანამედროვე სურათის ფორმატების (WebP, AVIF) გამოყენება ფაილის ზომის შემცირების მიზნით.

ამ გზით, მობილური მოწყობილობის ბრაუზერი ჩამოტვირთავს ოპტიმალურ ზომის ფაილს, რაც გაუმჯობესებს შესრულებას და შეამცირებს ტრაფიკს.