عملکرد image-set که در CSS از سال 2012 در مرورگرهای مبتنی بر Chromium و از سافاری از نسخه 6 پشتیبانی می شود. پشتیبانی اخیراً در Firefox 88 انجام شد. در این نقاله قصد داریم ببینم چه کارهایی با ()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 استفاده کنید