از اینکه با Google I/O تنظیم کردید متشکریم! تماشای محتوا بر اساس تقاضا

این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

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

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

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

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

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

57
79
41
12.1

منبع

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

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

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

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

منبع

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

می توانید object-position تنظیم کنید که فقط یک طرف تصویر شما را برش دهد.

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

این قوانین 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 .

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

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

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

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

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

نادرست

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

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

object-fit

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

image-fit

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

fit-image

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

aspect-ratio

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

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

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

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

نادرست

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

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

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

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

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

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

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

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

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

نادرست

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

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

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

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

نکاتی برای سایز بندی

نکاتی برای بارگذاری

واکشی اولویت

نکاتی برای بارگذاری اولیه

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

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

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

اندازه ها

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

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

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

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

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