Чӣ гуна бояд кард, ки тасвир дар дастгоҳҳои мобилӣ дар андозаи ками бор карда шавад?

Барои боргирии тасвирҳо дар андозаи хурдтар дар дастгоҳҳои мобилӣ, тасвирҳои мутобиқшаванда бо ёрии 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) низ барои кам кардани андозаи файлҳо истифода мешаванд.

Бинобар ин, браузери дар дастгоҳи мобилӣ кор мекунад, файлро бо андозаи оптималӣ бор мекунад, ки ин ба такмил додани иҷроиш ва кам кардани трафик кӯмак мекунад.