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

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

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

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

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

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

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

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;
}

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

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

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

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

<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 ، می‌توانید با استفاده از 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 پشتیبانی می کنند. به عنوان مثال:

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

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

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

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

همچنین یک ویژگی 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 تنظیم کنید تا به مرورگر اجازه دهید محتوا را سریعتر و بدون انتظار برای رمزگشایی تصویر نمایش دهد.

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

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

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

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

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

شما می توانید یک 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 را تکمیل می کند. شما همچنان باید یک ویژگی 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 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 از دست رفته آن اطلاعات را ارائه نمی دهد.

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

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

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