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

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

خوشبختانه، CSS ابزارهایی را در اختیار شما قرار می‌دهد تا از وقوع این اتفاق جلوگیری کنید.

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

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

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

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

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

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

اضافه کردن مقدار auto برای block-size به این معنی است که مرورگر هنگام تغییر اندازه تصاویر، نسبت ابعاد آنها را حفظ می‌کند.

گاهی اوقات، ابعاد یک تصویر توسط یک سیستم مدیریت محتوا (CMS) یا سایر سیستم‌های تحویل محتوا تنظیم می‌شود. اگر طراحی شما نسبت ابعادی متفاوت از پیش‌فرض CMS را می‌طلبد، می‌توانید از ویژگی aspect-ratio برای حفظ طراحی سایت خود استفاده کنید:

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

متأسفانه، این اغلب به این معنی است که مرورگر مجبور است تصویر را فشرده یا کشیده کند تا در فضای مورد نظر جا شود.

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

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

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

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

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

شما می‌توانید موقعیت برش تصویر را با استفاده از ویژگی object-position تغییر دهید. این کار فوکوس برش را تنظیم می‌کند، بنابراین می‌توانید مطمئن شوید که مهم‌ترین بخش تصویر هنوز قابل مشاهده است.

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 شما در اندازه متفاوتی رندر شود، مرورگر همچنان نسبت عرض به ارتفاع را می‌داند و می‌تواند مقدار مناسب فضا را کنار بگذارد. این کار از پرش سایر محتوای شما هنگام بارگذاری تصویر جلوگیری می‌کند.

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

نکات مربوط به بارگذاری

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

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

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

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

اولویت واکشی

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

<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 پشتیبانی می‌کنند. برای مثال:

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

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

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

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

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

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

توصیفگر عرض

شما می‌توانید یک srcset با استفاده از لیستی از مقادیر که با کاما از هم جدا شده‌اند، تعریف کنید. هر مقدار، URL یک تصویر است که به دنبال آن یک فاصله (space) و به دنبال آن مقداری فراداده (metadata) در مورد تصویر، به نام توصیفگر (descriptor) ، قرار می‌گیرد.

در این مثال، فراداده عرض هر تصویر را با استفاده از واحد 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 است. شما هنوز به یک ویژگی src معتبر نیاز دارید، اما مرورگر می‌تواند مقدار آن را با یکی از گزینه‌های ذکر شده در srcset جایگزین کند. برای صرفه‌جویی در پهنای باند، مرورگر فقط در صورت نیاز، تصویر بزرگتر را دانلود می‌کند.

اندازه‌ها

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

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

<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 برابر با ۳۰۰ در ۲۰۰ پیکسل و medium-image.png برابر با ۶۰۰ در ۴۰۰ پیکسل باشد، در این صورت medium-image.png می‌تواند 2x بعد از خود در لیست srcset داشته باشد.

لازم نیست از اعداد صحیح استفاده کنید. اگر نسخه دیگری از تصویر ۴۵۰ در ۳۰۰ پیکسل باشد، می‌توانید آن را با 1.5x توصیف کنید.

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

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

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

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

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

در حالت ایده‌آل، تصاویر نمایشی یا تزئینی به جای HTML با CSS گنجانده می‌شوند. 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 .

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

دانش خود را در مورد تصاویر آزمایش کنید.