Ինչպե՞ս ապահովել, որ պատկերն բեռնի փոքրացված չափով մոբայլ սարքերում։

Մոբայլ սարքերում փոքր չափի պատկերներ բեռնելու համար օգտագործվում են ադապտիվ պատկերներ 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)՝ ֆայլերի չափը նվազեցնելու համար:

Այսպիսով, մոբայլ սարքի բրաուզերը բեռնում է օպտիմալ չափի ֆայլը, ինչը բարելավում է կատարողականությունը և նվազեցնում է տրաֆիկը։