تصاویر واکنش گرا

متن در وب به طور خودکار در لبه صفحه قرار می گیرد تا سرریز نشود. با تصاویر فرق می کند. تصاویر دارای اندازه ذاتی هستند. اگر تصویر عریض‌تر از صفحه باشد، تصویر سرریز می‌شود و باعث می‌شود یک نوار اسکرول افقی ظاهر شود.

خوشبختانه، شما می توانید اقداماتی را در CSS انجام دهید تا این اتفاق نیفتد.

تصاویر خود را محدود کنید

در شیوه نامه خود، می توانید اعلام کنید که تصاویر هرگز نباید با اندازه ای گسترده تر از عنصر حاوی آنها با استفاده از max-inline-size ارائه شوند.

پشتیبانی مرورگر

• 57
• 79
• 41
• 12.1

منبع

img {
  max-inline-size: 100%;
  block-size: auto;
}

توجه: در صورت تمایل می‌توانید از max-width به جای max-inline-size استفاده کنید، اما به یاد داشته باشید که خوب است عادت کنید از نظر ویژگی‌های منطقی فکر کنید.

می‌توانید همین قانون را برای انواع دیگر محتوای جاسازی‌شده نیز مانند ویدیوها و iframes اعمال کنید.

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

با وجود این قانون، مرورگرها به طور خودکار تصاویر را برای قرار دادن روی صفحه کوچک می کنند.

افزودن مقدار block-size auto به این معنی است که نسبت ابعاد تصاویر ثابت می ماند.

گاهی اوقات ممکن است ابعاد یک تصویر خارج از کنترل شما باشد - برای مثال اگر تصویری از طریق یک سیستم مدیریت محتوا اضافه شود. اگر طراحی شما نیاز به داشتن نسبت تصویر متفاوت با ابعاد واقعی تصویر دارد، از ویژگی aspect-ratio در CSS استفاده کنید.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

اما پس از آن مرورگر ممکن است تصویر را له کرده یا بکشد تا متناسب با نسبت تصویر دلخواه شما باشد.

برای جلوگیری از این اتفاق، از ویژگی object-fit استفاده کنید.

پشتیبانی مرورگر

• 32
• 79
• 36
• 10

منبع

یک مقدار مربوط به object-fit contain به مرورگر می‌گوید که نسبت تصویر را حفظ کند، حتی اگر این به معنای باقی گذاشتن فضای خالی در بالا و پایین باشد.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

یک مقدار object-fit cover به مرورگر می‌گوید که نسبت تصویر را حفظ کند، حتی اگر این به معنای برش دادن تصویر در بالا و پایین باشد.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}

همان تصویر با دو مقدار متفاوت برای «object-fit» اعمال شد. مورد اول دارای مقدار «شخصی متناسب» از «contain» است. دومی دارای مقدار «مناسب شی» از «پوشش» است.

اگر برش در بالا و پایین به طور مساوی مشکل دارد، از ویژگی CSS موقعیت شی برای تنظیم فوکوس برش استفاده کنید.

پشتیبانی مرورگر

• 32
• 79
• 36
• 10

منبع

می توانید مطمئن شوید که مهمترین محتوای تصویر همچنان قابل مشاهده است.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}

تصاویر خود را تحویل دهید

این قوانین CSS به مرورگر می‌گوید که چگونه می‌خواهید تصاویر ارائه شوند. همچنین می‌توانید در HTML خود نکاتی را در مورد اینکه مرورگر چگونه باید با آن تصاویر برخورد کند، ارائه دهید.

نکات اندازه گیری

اگر ابعاد تصویر را می دانید، باید ویژگی های width و height را در نظر بگیرید. حتی اگر تصویر با اندازه متفاوتی رندر شده باشد (به دلیل قانون max-inline-size: 100% )، مرورگر همچنان نسبت عرض به ارتفاع را می داند و می تواند فضای مناسبی را کنار بگذارد. این کار باعث می‌شود وقتی تصویر بارگذاری می‌شود، دیگر محتوای شما به اطراف پرش نشود.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>

ویدیوی اول یک طرح بندی بدون ابعاد تصویر مشخص را نشان می دهد. به نحوه پرش متن پس از بارگیری تصاویر توجه کنید. در ویدئوی دوم ابعاد تصویر ارائه شده است. فضایی برای تصویر باقی می‌ماند تا پس از بارگذاری، متن به اطراف نپرد.

در حال بارگیری نکات

از صفت loading استفاده کنید تا به مرورگر بگویید بارگذاری تصویر را تا زمانی که در ویوپورت یا نزدیک آن قرار گیرد به تأخیر بیاندازد. برای تصاویر زیر، از مقدار lazy استفاده کنید. مرورگر تصاویر تنبل را بارگذاری نمی کند تا زمانی که کاربر به اندازه کافی به پایین اسکرول نکند که تصویر در شرف نمایش باشد. اگر کاربر هرگز پیمایش نکند، تصویر هرگز بارگذاری نمی‌شود.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

برای تصویر قهرمان در بالای صفحه، loading نباید استفاده شود. اگر سایت شما به طور خودکار ویژگی loading="lazy" را اعمال می کند، اغلب می توانید ویژگی eager (که پیش فرض است) را تنظیم کنید تا از اعمال آن جلوگیری کنید:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

واکشی اولویت

برای تصاویر مهم مانند تصویر LCP ، می‌توانید با استفاده از Fetch Priority با تنظیم ویژگی fetchpriority روی high بارگذاری را اولویت‌بندی کنید:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

این به مرورگر می‌گوید که به‌جای اینکه منتظر بماند تا زمانی که تصاویر معمولاً واکشی می‌شوند، طرح‌بندی را کامل کند، فوراً و با اولویت بالا، تصویر را واکشی کند.

اما به یاد داشته باشید: وقتی از مرورگر می‌خواهید دانلود یک منبع را اولویت بندی کند - مانند یک تصویر - مرورگر باید منبع دیگری مانند یک اسکریپت یا یک فایل فونت را از اولویت خارج کند. فقط در صورتی که یک تصویر واقعا حیاتی است fetchpriority="high" را تنظیم کنید.

در حال بارگذاری نکات

برخی از تصاویر ممکن است در HTML اولیه در دسترس نباشند—اگر توسط جاوا اسکریپت یا به عنوان تصویر پس زمینه در CSS اضافه شده باشند. همچنین می توانید از پیش بارگذاری استفاده کنید تا اجازه دهید این تصاویر مهم زودتر از موعد واکشی شوند. این را می توان با ویژگی fetchpriority برای تصاویر واقعا مهم ترکیب کرد:

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

مجدداً باید از این مورد به اندازه کافی استفاده شود تا از نادیده گرفتن بیش از حد اکتشافی اولویت بندی مرورگرها جلوگیری شود که ممکن است منجر به کاهش عملکرد شود.

بارگذاری اولیه تصاویر پاسخگو بر اساس srcset (که در زیر مورد بحث قرار گرفته است) از طریق ویژگی های imagesrcset و imagesizes پیشرفته تر است و در برخی از مرورگرها پشتیبانی می شود، اما نه همه:

با حذف فایل بازگشتی href می توانید اطمینان حاصل کنید که مرورگرهایی که از این پشتیبانی نمی کنند، تصویر نادرست را از قبل بارگذاری نمی کنند.

بارگذاری اولیه بر اساس قالب‌های تصویر مختلف بر اساس پشتیبانی مرورگر آن تصاویر در حال حاضر پشتیبانی نمی‌شود و ممکن است منجر به دانلودهای اضافی شود.

ایده آل این است که در صورت امکان از بارگذاری اولیه اجتناب کنید، و تصویر را در HTML اولیه در دسترس داشته باشید، برای جلوگیری از تکرار کد، و اجازه دسترسی به طیف گسترده ای از گزینه هایی که مرورگر پشتیبانی می کند.

رمزگشایی تصویر

همچنین یک ویژگی decoding وجود دارد که می توانید به عناصر img اضافه کنید. می توانید به مرورگر بگویید که تصویر را می توان به صورت ناهمزمان رمزگشایی کرد. سپس مرورگر می تواند پردازش محتوای دیگر را در اولویت قرار دهد.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
>

اگر خود تصویر مهمترین محتوایی است که باید اولویت بندی شود، می توانید از مقدار sync استفاده کنید.

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 decoding="sync"
>

ویژگی decoding سرعت رمزگشایی تصویر را تغییر نمی‌دهد، بلکه صرفاً این موضوع را تغییر می‌دهد که آیا مرورگر قبل از ارائه محتوای دیگر منتظر می‌ماند تا این رمزگشایی تصویر اتفاق بیفتد.

در بیشتر موارد این تاثیر کمی خواهد داشت، با این حال در سناریوهای خاص می تواند اجازه دهد تصویر یا محتوا کمی سریعتر نمایش داده شود. به عنوان مثال، برای یک سند بزرگ با عناصر زیادی که رندر آنها زمان می برد، و با تصاویر بزرگی که رمزگشایی آنها مدتی طول می کشد، تنظیم sync روی تصاویر مهم به مرورگر می گوید که منتظر تصویر بماند و هر دو را به یکباره رندر کند. از طرف دیگر، تنظیم async می‌تواند به محتوا اجازه دهد بدون انتظار برای رمزگشایی تصویر، سریع‌تر نمایش داده شود.

با این حال، معمولاً گزینه بهتر این است که سعی کنید از اندازه های DOM بیش از حد اجتناب کنید و اطمینان حاصل کنید که از تصاویر پاسخگو برای کاهش زمان رمزگشایی استفاده می شود به این معنی که ویژگی رمزگشایی تأثیر کمی خواهد داشت.

تصاویر واکنش گرا با srcset

با تشکر از max-inline-size: 100% ، تصاویر شما هرگز از ظرف خود خارج نمی شوند. اما حتی اگر داشتن یک تصویر بزرگ که به اندازه مناسب کوچک می شود خوب به نظر برسد، احساس خوبی نخواهد داشت. اگر شخصی از یک دستگاه صفحه نمایش کوچک در یک شبکه با پهنای باند کم استفاده کند، تصاویر بزرگ غیرضروری را دانلود می کند.

اگر چندین نسخه از یک تصویر را در اندازه‌های مختلف می‌سازید، می‌توانید با استفاده از ویژگی srcset به مرورگر آنها را مطلع کنید.

توصیف کننده عرض

شما می توانید لیستی از مقادیر را که با کاما از هم جدا شده اند ارسال کنید. هر مقدار باید نشانی اینترنتی یک تصویر باشد که به دنبال آن یک فاصله و چند ابرداده در مورد تصویر وجود دارد. این ابرداده توصیفگر نامیده می شود.

در این مثال، ابرداده عرض هر تصویر را با استفاده از واحد w توصیف می کند. یک w یک پیکسل است.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

ویژگی srcset جایگزین ویژگی src نمی شود. در عوض ویژگی srcset مکمل ویژگی src است. شما هنوز باید یک ویژگی src معتبر داشته باشید، اما اکنون مرورگر می تواند مقدار آن را با یکی از گزینه های فهرست شده در ویژگی srcset جایگزین کند.

مرورگر تصاویر بزرگتر را دانلود نمی کند مگر اینکه به آنها نیاز باشد. که باعث صرفه جویی در پهنای باند می شود.

اندازه ها

اگر از توصیف‌کننده عرض استفاده می‌کنید، باید از ویژگی sizes نیز برای دادن اطلاعات بیشتر به مرورگر استفاده کنید. این به مرورگر می‌گوید که انتظار دارید تصویر در شرایط مختلف چه اندازه نمایش داده شود. این شرایط در یک درخواست رسانه مشخص شده است.

ویژگی sizes فهرستی از پرس و جوهای رسانه و عرض تصویر جدا شده با کاما می گیرد.

توجه: داشتن پرس و جوهای رسانه ای CSS در یک عنصر HTML عجیب به نظر می رسد. این جدایی ارائه و ساختار را خراب می کند. اما این تنها راه برای ارائه به موقع اطلاعات اندازه گیری لازم برای موثر بودن است.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

در این مثال، شما به مرورگر می‌گویید که در بالای یک درگاه دید 66em ، تصویر را بیشتر از یک سوم صفحه نمایش ندهد (مثلاً در طرح‌بندی سه ستونی).

برای عرض درگاه دید بین 44em و 66em ، تصویر را در نصف عرض صفحه نمایش دهید (طرح بندی دو ستونی).

برای هر چیزی کمتر از 44em تصویر را در تمام عرض صفحه نمایش دهید.

این بدان معناست که از بزرگترین تصویر لزوما برای عریض ترین صفحه استفاده نمی شود. یک پنجره گسترده مرورگر که می تواند یک طرح چند ستونی را نمایش دهد، از تصویری استفاده می کند که در یک ستون قرار می گیرد. این تصویر ممکن است کوچکتر از تصویری باشد که برای طرح بندی تک ستونی در یک صفحه باریکتر استفاده می شود.

توصیفگر تراکم پیکسلی

موقعیت دیگری وجود دارد که ممکن است بخواهید چندین نسخه از یک تصویر را ارائه دهید.

برخی از دستگاه ها نمایشگرهایی با چگالی بالا دارند. در یک صفحه نمایش با چگالی دوگانه می توانید اطلاعاتی به ارزش دو پیکسل را در فضای یک پیکسل قرار دهید. این باعث می‌شود که تصاویر در این نوع نمایشگرها واضح به نظر برسند.

از توصیفگر چگالی برای توصیف تراکم پیکسلی تصویر در رابطه با تصویر در ویژگی src استفاده کنید. توصیفگر چگالی عددی است که با حرف x همراه می شود: 1x ، 2x و غیره.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

اگر سایز small-image.png 300 در 200 پیکسل و اندازه medium-image.png 600 در 400 پیکسل باشد، آنگاه medium-image.png می تواند 2x بعد از آن در لیست srcset داشته باشد.

لازم نیست از اعداد کامل استفاده کنید. اگر اندازه نسخه دیگری از تصویر 450 در 300 پیکسل است، می توانید آن را با 1.5x توصیف کنید.

توجه: شما می توانید از توصیفگرهای عرض یا توصیفگر چگالی استفاده کنید، اما نه از هر دو با هم.

تصاویر نمایشی

تصاویر در HTML محتوا هستند. به همین دلیل است که شما همیشه یک ویژگی alt را با توضیح تصویر برای صفحه خوان ها و موتورهای جستجو ارائه می دهید.

اگر تصویری را جاسازی می‌کنید که صرفاً یک شکوفایی بصری و بدون محتوای معنی‌دار است، از ویژگی alt خالی استفاده کنید.

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

همچنان باید ویژگی alt را وارد کنید. یک ویژگی alt از دست رفته با ویژگی alt خالی یکسان نیست. یک ویژگی alt خالی به یک صفحه خوان نشان می دهد که این تصویر نمایشی است.

در حالت ایده آل، تصاویر نمایشی یا تزئینی شما به هیچ وجه نباید در HTML شما باشند. HTML برای ساختار است. CSS برای ارائه است.

تصاویر پس زمینه

از ویژگی background-image در CSS برای بارگذاری تصاویر ارائه استفاده کنید.

element {
  background-image: url(flourish.png);
}

با استفاده از تابع image-set برای background-image می‌توانید چندین نامزد تصویر را مشخص کنید.

تابع image-set در CSS بسیار شبیه ویژگی srcset در HTML عمل می کند. فهرستی از تصاویر را با یک توصیفگر تراکم پیکسلی برای هر یک ارائه دهید.

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

مرورگر مناسب ترین تصویر را برای تراکم پیکسلی دستگاه انتخاب می کند.

هنگام افزودن تصاویر به سایت خود عوامل زیادی وجود دارد که باید در نظر بگیرید:

رزرو فضای مناسب برای هر تصویر. فهمیدن اینکه چند سایز نیاز دارید. تصمیم گیری در مورد محتوایی یا تزئینی بودن تصویر.

ارزش این را دارد که برای درست کردن تصاویر وقت بگذارید. استراتژی های تصویر ضعیف باعث ناامیدی و آزار کاربران می شود. یک استراتژی تصویر خوب باعث می شود که سایت شما بدون توجه به دستگاه یا اتصال شبکه کاربر، احساس تند و شفافی داشته باشد.

یک عنصر HTML دیگر در جعبه ابزار شما وجود دارد که به شما کمک می کند کنترل بیشتری روی تصاویر خود داشته باشید: عنصر picture .

درک خود را بررسی کنید

دانش خود را از تصاویر تست کنید

برای اینکه تصاویر در قسمت دید قرار بگیرند، باید سبک‌ها اضافه شوند.

درست است، واقعی

تصاویر بدون محدودیت به اندازه اندازه طبیعی خود خواهند بود.

نادرست

سبک ها مورد نیاز است.

وقتی ارتفاع و عرض یک تصویر به یک نسبت غیرطبیعی تبدیل شده است، کدام سبک می تواند به تنظیم نحوه تناسب تصویر در این نسبت ها کمک کند؟

object-fit

نحوه تناسب تصویر با کلمات کلیدی مانند contain و cover را مشخص کنید.

image-fit

این ملک وجود ندارد، من آن را ساخته ام.

fit-image

این ملک وجود ندارد، من آن را ساخته ام.

aspect-ratio

این ممکن است باعث ایجاد یا رفع نسبت غیر طبیعی تصویر شود.

قرار دادن height و width بر روی تصاویر شما باعث می شود که CSS نتواند به آن استایل متفاوتی بدهد.

درست است، واقعی

به آنها بیشتر شبیه نکات فکر کنید تا قوانین.

نادرست

CSS دارای تعداد زیادی گزینه پویا برای اندازه‌گیری تصاویر است، حتی اگر ارتفاع و عرض روی برچسب به صورت خطی باشد.

ویژگی srcset ویژگی src را _______ نمی کند، آن را _______ می کند.

مکمل، جایگزین

srcset قطعا جایگزین ویژگی src نمی شود.

جایگزین، تکمیل کننده

در صورت امکان، گزینه‌های دیگری را برای مرورگر فراهم می‌کند تا از بین آنها انتخاب کند.

از دست دادن alt در یک تصویر مانند یک alt خالی است.

درست است، واقعی

یک ویژگی alt خالی به یک صفحه خوان نشان می دهد که این تصویر نمایشی است

نادرست

عدم وجود alt هیچ سیگنالی به صفحه‌خوان نمی‌دهد.