استفاده جدید تصاویر در CSS با استفاده از image-set

تنوع وضوح در یک تصویر 

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

<img
  srcset=""
  src=""
  alt=""
>

با استفاده از image-set  جند رزولوشن را برای یک تصویر تعریف کنیم و اینکه از کدام استفاده شود را به تصمیم مرورگر و یا همان BROWSER  بسپاریم 

از این روش میتوانیم در content ،  corsor و بیشترین از همه در bacckground-image استفاد کنیم 

.hero {
  background-image: image-set("platypus.png" 1x, "platypus-2x.png" 2x);
}

در مثال بالا 1X  برای رزولوشن  های پایین و 2X برای رزولوشن های بالا استفاده میشودو X مخفف dppx یا همان dots per pixelunit است

برای مرورگر های Crome/Edge/Opera/samsung Internet  باید از پیشوند -webkit-  استفاده کنیدو اگر از Aoutiprefixer  استفاده کنید به صورت خودکار این مورد پوشش داده خواهد شد.در Safari نیاز به استفاده از پیشوند ها نمی باشد اما نیاز است تا از قوانین قدیم استفاده از ()url  برای ادرس دهی تصویر استفاده کنید.،همینطور میتوانیم از  ()background-image:url برای دیگر مرورگر های قدیمی استفاده کنید

.hero {
  /* Fallback */
  background-image: url("platypus.png");

  /* Chrome/Edge/Opera/Samsung, Safari will fallback to this as well */
  background-image: -webkit-image-set(url("platypus.png") 1x, url("platypus-2x.png") 2x);

  /* Standard use */
  background-image: image-set("platypus.png" 1x, "platypus-2x.png" 2x);
}

با این روش کاربران در دستگاه های خود میتوانند تصویری زیباتر و با وضوح بهتر ببیند. با استفاده ار این روش کاربران با اینترنت پایین تر میتوانند متناسب با سرعت اینترنت وضوح تصویر متفاوتی ببیند. اما اگر میخواهید که کاربر مطمئن باشید که با وضوحی که شما میخواهید تصویر را میبیند میتوانید از min-resolution استفاده کنید