متن در وب به طور خودکار در لبه صفحه قرار می گیرد تا سرریز نشود. از سوی دیگر، تصاویر دارای اندازه ذاتی هستند. اگر تصویری عریضتر از صفحه باشد، تصویر سرریز میشود و کاربر باید به صورت افقی اسکرول کند تا همه آن را ببیند.
خوشبختانه، 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
.
درک خود را بررسی کنید
دانش خود را از تصاویر تست کنید.
برای اینکه تصاویر در قسمت دید قرار بگیرند، باید سبکها اضافه شوند.
وقتی ارتفاع و عرض یک تصویر به یک نسبت غیرطبیعی تبدیل شده است، کدام سبک می تواند به تنظیم نحوه تناسب تصویر در این نسبت ها کمک کند؟
object-fit
contain
و cover
را مشخص کنید.image-fit
fit-image
aspect-ratio
قرار دادن height
و width
بر روی تصاویر شما باعث می شود که CSS نتواند به آن استایل متفاوتی بدهد.
ویژگی srcset
ویژگی src
را _______ نمی کند، آن را _______ می کند.
srcset
قطعا جایگزین ویژگی src
نمی شود. از دست دادن alt
در یک تصویر مانند یک alt
خالی است.
alt
خالی به خواننده صفحه نمایش می گوید که این تصویر نمایشی است.alt
هیچ سیگنالی به صفحهخوان نمیدهد.