پایان یک کلافگی بزرگ درباره رسپانسیو کردن عکس ها در صفحات وب

قبلاً برای اینکه عکس‌ها توی موبایل و دسکتاپ درست لود بشن، مجبور بودیم این کارها رو بکنیم:

* چند نسخه از یک عکس می‌ساختیم (400px، 800px، 1200px و…)
* با srcset به مرورگر می‌دادیم
* با sizes دستی بهش می‌گفتیم عکس توی هر حالت چقدر جا می‌گیره 😵‍💫

مثال:

<img
  src="img-800.jpg"
  srcset="img-400.jpg 400w, img-800.jpg 800w, img-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
>

مشکل: نوشتن sizes خیلی سخت و حدسی بود.

---

الان چی شده؟

مرورگر خودش هوشمند شده 👇

<img
  src="img-800.jpg"
  srcset="img-400.jpg 400w, img-800.jpg 800w, img-1200.jpg 1200w"
  sizes="auto"
  loading="lazy"
>

---

📌 نتیجه:

* دیگه لازم نیست sizes رو خودمون حساب کنیم
* مرورگر خودش بهترین عکس رو انتخاب می‌کنه


این مقاله داره راجب به همین موضوع صحبت میکنه که خیلی جدید هم بیرون اومده و خوندنش بهتون تو درک موضوع کمک میکنه :‌

https://piccalil.li/blog/the-end-of-responsive-images/

@codehalics | کدهالیک