قرار دادن تصویر در صفحات وب

مقدمه

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

افزودن تصویر به صفحه با عنصر img

برای قرار دادن عکس در صفحات وب از عنصری با نام img استفاده می‌شود. این عنصر تهی (void) دارای یک صفت اجباری با نام src است که آدرس url عکس مورد نظر را به عنوان مقدار دریافت می‌کند. alt نیز یک صفت مهم دیگر برای عنصر img محسوب می‌شود که اگرچه استفاده از آن اجباری نیست اما به‌شدت توصیه می‌شود. صفت alt متنی را که به عنوان مقدار دریافت می‌کند، در صورت عدم نمایش عکس در صفحه، به جای عکس نمایش می‌دهد.

HTML

<img src="#" alt="alternative text">

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

• src: این صفت اجباری، با دریافت آدرس url تصویر مورد نظر، آن تصویر را برای بارگذاری و نمایش به مرورگر معرفی می‌کند.
• alt: این صفت، یک مقدار متنی را به عنوان یک متن جایگزین (alternative text) برای تصویر دریافت می‌کند و اگر به هر دلیلی امکان نمایش تصویر مورد نظر وجود نداشته باشد، مرورگر این متن را به جای تصویر نمایش می‌دهد.
• width: این صفت، تعیین‌کننده‌ی عرض تصویر مورد نظر است و یک عدد صحیح بدون واحد را به عنوان مقدار دریافت می‌کند که بر حسب پیکسل (px) سنجیده می‌شود.
• height: این صفت نیز تعین‌کننده‌ی ارتفاع تصویر مورد نظر است و همانند صفت width یک عدد صحیح را به عنوان مقدار دریافت می‌کند و ارتفاع تصویر را بر حسب پیکسل محاسبه می‌کند.
• longdesc: با استفاده از این صفت می‌توانیم کاربر را به یک سند دیگر یا بخشی از سند جاری که حاوی توضیحات بیشتری در مورد تصویر مورد نظر است، ارجاع دهیم.
• crossorigin: از این صفت برای تعیین وضعیت درخواست نمایش عکس به عنوان یک درخواست cross-origin استفاده می‌شود.
• referrerpolicy: این صفت تعیین‌کننده‌ی اطلاعاتی است که هنگام واکشی (fetching) عکس، در قالب هدر referer برای سرور میزبان عکس ارسال می‌شود.
• decoding: از این صفت برای تعیین زمان decode کردن داده‌های یک تصویر استفاده می‌شود.
• loading: این صفت برای تعیین زمان بارگذاری تصویر توسط مرورگر (بلافاصله یا با تأخیر) استفاده می‌شود.
• srcset: با استفاده از این صفت می‌توانیم مجموعه‌ای از تصاویر را به مرورگر معرفی کنیم تا بسته به شرطی که تعیین می‌کنیم، یکی از آنها را برای نمایش انتخاب کند.
• sizes: این صفت به همراه صفت srcset به کار می‌رود و تعیین کننده‌ی سایز هر یک از تصاویری است که با استفاده از صفت srcset به مرورگر معرفی کرده‌ایم.

تعیین آدرس تصویر با صفت src

صفت src که مهمترین صفت عنصر img است و همانطور که گفتیم، یک صفت اجباری است، برای تعیین آدرس عکس مورد نظر به کار می‌رود. پس، مقدار این صفت یک آدرس url مربوط به عکسی است که قصد نمایش آن را داریم.

HTML

<img src="a url address">

تعیین متن جایگزین برای تصویر با صفت alt

یک مرورگر ممکن است به یکی از دلایل زیر قادر به نمایش عکس نباشد:

• مرورگر از نوع مرورگرهای غیرگرافیکی باشد که تنها متن موجود در صفحه را نمایش می‌دهد.
• خود کاربر به دلایلی مانند جلوگیری از مصرف ترافیک، از نمایش عکس‌ها توسط مرورگر خود جلوگیری کرده باشد.
• آدرس url تعیین شده برای عکس نامعتبر باشد و یا اینکه عکس دارای فرمتی باشد که در وب پشتیبانی نمی‌شود.

در چنین شرایطی، مرورگرها متن وارد شده به عنوان مقدار صفت alt را به جای عکس نمایش می‌دهند. alt از عبارت alternative text گرفته شده که به معنای متن جایگزین است و اگر بخواهیم دقیق‌تر صحبت کنیم، بهتر است از عبارت fallback text استفاده کنیم که به معنای متنی است که در شرایط اضطرار جایگزین می‌شود.

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

HTML

<img src="smiley.gif" alt="smiley face">

عدم استفاده از صفت alt برای یک عنصر img به این معناست که عکس مورد نظر، یک بخش کلیدی از محتواست و معادل متنی جایگزینی برای آن وجود ندارد. همچنین، تنظیم این صفت روی یک رشته‌ی خالی به صورت alt=” “ به این معناست که عکس مورد نظر، بخش مهمی از محتوا محسوب نمی‌شود و مرورگرهای غیرگرافیکی می‌توانند از رندر آن خودداری کنند.

تعیین ابعاد تصویر با صفت‌های width و height

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

HTML

<img src="smiley.gif" alt="smiley face"width="42" height="42">

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

در بهترین حالت، باید همیشه قبل از قرار دادن یک عکس در یک صفحه‌ی وب، ابعاد مورد نظر برای آن عکس را با استفاده از نرم‌افزارهای گرافیکی تعیین کنیم تا عکس دارای همان ابعادی باشد که مایلیم در صفحه داشته باشد. اما با این حال، بهتر است هنگام قرار دادن عکس مورد نظر در صفحه (با وجودی که دارای همان ابعاد مورد نظر ماست) باز هم از صفت‌های width و height استفاده کنیم و همان ابعادی را که عکس دارد، به عنوان مقادیر صفت‌های width و height تکرار کنیم. این کار یک مزیت ویژه دارد: تعیین ابعاد عکس با استفاده از صفات width و height باعث می‌شود که با شروع بارگذاری صفحه، مرورگر با خواندن مقدار این صفت‌ها فضای لازم برای نمایش عکس را رزرو کرده و هنگام کامل شدن بارگذاری عکس، آن را در فضای رزرو شده نمایش دهد. این در حالیست که در غیاب این صفت‌ها، فضایی برای عکس رزرو نمی‌شود و هر وقت بارگذاری عکس کامل شد، جای خود را بین محتوای صفحه باز می‌کند و چیدمان محتوای صفحه تغییر می‌کند.

بارگذاری عکس از یک مبدأ دیگر با صفت crossorigin

آنچه که عنصر img انجام می‌دهد و ما آن را افزودن تصویر به صفحه‌ی وب نامیدیم، به زبان دقیق‌تر، لینک کردن عکس به صفحه است. لینک کردن یک عکس به منزله‌ی واکشی (fetching) آن عکس از سرور است و مرورگرها در مورد فرایند واکشی منابع، محدودیت‌هایی را به دلایل امنیتی اعمال می‌کنند. در حقیقت، سیاست مبدأ یکسان (same-origin policy) که قبلاً هم از آن نام بردیم، نام رویکرد محدود کننده‌ای است که مرورگرها روی درخواست‌های واکشی منابعی مانند عکس‌ها و فونت‌ها اعمال می‌کنند. بر اساس این سیاست، دسترسی به منابع از طریق عناصری مثل img و script تنها در صورتی مجاز است که سندِ حاوی درخواست و منبعِ مورد درخواست، مبدأ (origin) یکسانی داشته باشند.

یادآوری می‌کنم که در ترمینولوژی وب، اصطلاح origin که ما آن را مبدأ ترجمه می‌کنیم، از سه بخش ابتدایی یک url یعنی پروتکل، پورت و هاست (نام دامنه) تشکیل می‌شود. پس، اگر دو url در یک یا چند مورد از این سه آیتم اختلاف داشته باشند، مبدأ یکسانی ندارند.

با این حساب، ما تنها قادر به بارگذاری تصاویری هستیم که مبدأ یکسانی با سند جاری که حاوی درخواست است، داشته باشند. به عبارت دیگر، مطابق با قواعد سیاست مبدأ یکسان که مرورگرها به آن پایبند هستند، اگر درخواست دسترسی به یک عکس یک درخواست same-origin باشد (یعنی مبدأ سند حاوی درخواست و عکس مورد درخواست، یکسان باشد) مرورگرها محدودیتی برای بارگذاری عکس مورد نظر قائل نمی‌شوند. اما در مورد درخواست‌های cross-origin (یعنی درخواست‌های با مبدأ غیر یکسان) مرورگر مانع از بارگذاری عکس مورد نظر می‌شود.

البته این فقط رفتار پیش‌فرض مرورگرهاست و در عمل، اکثر وبسایت‌ها به جای تبعیت کامل از این سیاست سخت‌گیرانه و رد کردن همه‌ی درخواست‌های cross-origin ترجیح می‌دهند که با به‌کارگیری مکانیزمی به نام CORS یا Cross-origin Resource Sharing این درخواست‌ها را مدیریت کنند. CORS یک پروتکل یا مکانیزم مبتنی بر http header است که وبسایت‌ها را قادر می‌کند که برای مرورگرها روشن کنند که به جز خودشان به چه مبدأهای دیگری اجازه‌ی دسترسی به منابعشان را بدهند. به این ترتیب، به طور خلاصه می‌توان گفت که درخواست‌های same-origin برای منابع یک وبسایت، بدون هیچ محدودیتی با بارگذاری منبع مورد نظر همراه است اما در مورد درخواست‌های cross-origin عامل تعییین‌کننده، پیکربندی در نظر گرفته شده برای CORS خواهد بود و در صورتی که هیچ‌گونه تنظیمات و پیکربندی برای CORS در نظر گرفته نشود، سیاست مبدأ یکسان اعمال می‌شود که درخواست‌های cross-origin را رد می‌کند.

حالا می‌توانیم به صفت crossorigin برای عنصر img و کاربرد آن بپردازیم. به زبان ساده، استفاده از صفت crossorigin برای یک عنصر img باعث ایجاد یک درخواست CORS برای بارگذاری عکس مورد نظر می‌شود و عدم استفاده از این صفت، باعث ارسال یک درخواست non-CORS برای عکس می‌شود.

یک درخواست CORS با ارسال یک http header به نام origin که مبدأ درخواست را به طور صریح مشخص می‌کند، همراه است و مرورگر بر اساس تنظیماتی که سرور میزبان عکس برای درخواست‌های CORS فراهم کرده، برای بارگذاری یا عدم بارگذاری عکس مورد درخواست، تصمیم‌گیری می‌کند. اگر سرور منبع یا عکس مورد نظر، این عکس را به صورت CORS-enabled تعریف کرده باشد، بارگذاری آن مجاز خواهد بود و امکان استفاده‌ی مجدد از دیتای عکس برگردانده شده و به‌کارگیری آن در عنصر canvas نیز وجود دارد اما اگر طبق تنظیمات سرور، درخواست‌کننده امکان دسترسی به عکس را نداشته باشد، مرورگر از بارگذاری عکس خودداری می‌کند. در مورد درخواست‌های non-CORS مرورگر عکس مورد نظر را با عنوان آلوده (tainted) علامت‌گذاری می‌کند و دسترسی به دیتای عکس را محدود می‌کند.

مقادیری که می‌توان برای صفت crossorigin مربوط به عنصر img تعیین کرد، عبارتند از:

• anonymous: اطلاعات credentials که شامل کوکی‌ها، گواهینامه‌های SSL و هدرهای مربوط به احراز هویت (Authorization) می‌شود، به همراه درخواست CORS ارسال نمی‌شوند. در واقع، رد و بدل شدن این اطلاعات بین مبدأ و سرور به درخواست‌های same-origin محدود می‌شود.
• use-credentials: اطلاعات credentials همراه با درخواست CORS ارسال می‌شوند. در این صورت، چنانچه تنظیمات سرور مانع از به‌اشتراک‌گذاری این اطلاعات با سایت مبدأ باشد، مرورگر عکس را به عنوان tainted علامت‌گذاری کرده و دسترسی به دیتای آن را محدود می‌کند.

دقت داشته باشید که اگر از این صفت با یک مقدار نامعتبر یا بدون مقدار استفاده کنید، مرورگر مقدار anonymous را برای آن در نظر می‌گیرد.

کنترل اطلاعات ارسالی با صفت referrerpolicy

هنگام ارسال درخواست واکشی یک منبع از سرور میزبان آن منبع، اطلاعات مربوط به درخواست‌کننده در قالب یک http header با نام referer برای سرور میزبان ارسال می‌شود. هنگام بررسی لینک‌ها دیدیم که با اختصاص مقدار noreferrer به صفت rel یک لینک می‌توانیم از ارسال هرگونه اطلاعات در قالب این http header جلوگیری کنیم و در ضمن، دیدیم که عنصر a دارای صفتی با نام referrerpolicy است که به ما امکان می‌دهد کنترل بیشتری بر referer و اطلاعات ارسال شده توسط این http header داشته باشیم.

عنصر img نیز با توجه به اینکه موجب ارسال یک درخواست واکشی می‌شود، از صفت referrerpolicy بهره‌مند است و با استفاده از این صفت می‌توانیم روی اطلاعاتی که در قالب هدر referer به سرور میزبان عکس مورد درخواست ارسال می‌شود، کنترل داشته باشیم. اطلاعات قابل ارسال توسط referer شامل بخش‌های مختلف url مربوط به سند درخواست‌کننده یعنی هر یک از بخش‌های مبدأ (پروتکل، هاست، پورت)، مسیر (path) و پارامترهای اختیاری موجود در url سند درخواست‌کننده باشد و تعیین این که از میان این اطلاعات قابل ارسال، کدام‌یک ارسال شوند، بر عهده‌ی صفت referrerpolicy است. مقادیری که صفت referrerpolicy می‌تواند دریافت کند، عبارتند از:

• no-referrer: این مقدار از ارسال هرگونه اطلاعات در قالب هدرreferer جلوگیری می‌کند.
• no-referrer-when-downgrade: هدر referer برای هر مبدأ فاقد TLS (مجهز به پروتکل HTTPS) ارسال نشود.
• origin: اطلاعات مربوط به مبدأ (پروتکل، نام دامنه و پورت) تنها اطلاعاتی باشند که توسط referer ارسال می‌شوند.
• origin-when-cross-origin: هدر referer در مورد درخواست‌های cross-origin تنها شامل اطلاعات مربوط به مبدأ درخواست‌کننده یعنی پروتکل، پورت و هاست باشد اما در مورد درخواست‌های same-origin سایر اطلاعات از جمله مسیر سند درخواست‌کننده نیز ارسال شود.
• strict-origin: درصورتی که سطح امنیتی پروتکل‌های سند درخواست‌کننده و سرور میزبان عکس یکسان باشد، هدر referer با اطلاعات مربوط به مبدأ ارسال شود و در غیر این صورت، از ارسال referer خودداری شود.
• strict-origin-when-cross-origin: در مورد یک درخواست same-origin اطلاعات کامل url سند درخواست‌کننده یعنی مبدأ، مسیر و پارامترها ارسال شود و در مورد درخواست‌های cross-origin در صورت یکسان بودن سطح امنیتی پروتکل‌ها، اطلاعات مربوط به مبدأ فرستاده شود و در غیر این صورت، هیچ گونه اطلاعاتی در قالب referer ارسال نشود. این گزینه، مقدار پیش‌فرض صفت referrerpolicy است.
• unsafe-url: اطلاعات مربوط به مبدأ، مسیر و پارامترها در هر نوع درخواستی بدون توجه به امنیت آن ارسال شود.

تعیین روش انجام فرایند decoding

دیتای یک عکس معمولاً به صورت کد شده (encoded) در اختیار مرورگر قرار می‌گیرد و لذا مرورگر برای نمایش عکس در صفحه باید ابتدا دیتای عکس را به یک فرم bitmap مناسب برای نمایش در صفحه تبدیل کند. این فرایند را decoding می‌گویند. طبیعتاً نمایش یک عکس در صفحه به دلیل نیاز به انجام فرایند decoding نسبت به نمایش سایر محتوای یک صفحه به زمان بیشتری نیاز دارد. بنابراین، مرورگر باید در مورد اینکه چه زمانی فرایند decoding را انجام دهد تا منجر به ایجاد بهترین تجربه‌ی کاربری ممکن شود، تصمیم بگیرد.

فرایند decoding می‌تواند به صورت همگام (synchronous) و یا موازی و غیرهمگام (asynchronous) انجام شود که انتخاب اولی باعث می‌شود که تا زمان تکمیل این فرایند از بارگذاری سایر محتوای صفحه جلوگیری شود و انتخاب دومی باعث می‌شود که این فرایند به طور موازی با بارگذاری سایر محتوای صفحه انجام شود. انتخاب روش انجام فرایند decoding بر عهده‌ی مرورگر است اما با استفاده از صفت decoding می‌توانیم یکی از این روش‌ها را به عنوان روش ارجح برای مرورگر تعیین کنیم. صفت decoding می‌تواند یکی از مقادیر مورد انتظار زیر را دریافت کند:

• sync: این مقدار، تعیین‌کننده‌ی روش synchronous برای decoding عکس مورد نظر است.
• async: این مقدار، تعیین‌کننده‌ی روش asynchronous برای فرایند decoding عکس مورد نظر است.
• auto: مقدار پیش‌فرض صفت decoding که تعیین روش فرایند decoding عکس را به خود مرورگر واگذار می‌کند.

HTML

<!-- synchronously decode the image -->
<img src="#" decoding="sync">

<!-- asynchronously decode the image -->
<img src="#" decoding="async">

<!-- let the browser handle decoding process -->
<img src="#" decoding="auto">

تعیین زمان بارگذاری تصویر با صفت loading

با استفاده از صفت loading برای عنصر img می‌توانیم بارگذاری عکس را تا زمانی که واقعاً نیاز باشد، به تعویق بیندازیم. در حقیقت، رفتار پیش‌فرض مرورگرها، بارگذاری عکس بدون تأخیر و در سریع‌ترین زمان ممکن است اما این صفت ما را قادر می‌سازد که در صورت تمایل، بارگذاری عکس را تا زمان برآورده شدن شرط مشخصی به تعویق بیندازیم. شرط مورد بحث توسط مرورگر تعیین می‌شود و معمولاً عبارت است از رسیدن عکس به فاصله‌ی مشخصی از ناحیه‌ی دید کاربر. ناحیه‌ی دید کاربر که viewport نامیده می‌شود، آن بخشی از محتوای صفحه است که کاربر در هر لحظه می‌بیند و با پیمایش یا اسکرول تغییر می‌کند.

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

مقادیر قابل اختصاص به صفت loading عبارتند از:

• eager: این مقدار پیش‌فرض صفت loading است که باعث می‌شود که صرف‌نظر از اینکه عکس مورد نظر در ناحیه‌ی دید کاربر (user viewport) قرار دارد یا خیر، همواره عکس را بلافاصله و بدون تعلل بارگذاری کند.
• lazy: بارگذاری تصویر تا زمان رسیدن به viewport (یا رسیدن به فاصله‌ی مشخصی از آن) به تعویق می‌افتد. هدف از این کار این است که پهنای باند (bandwidth) و فضای ذخیره‌سازی (storage) لازم برای مدیریت عکس تنها در صورتی مصرف شود که واقعاً نیاز است. بنابراین، در اغلب موارد، استفاده از این مقدار باعث افزایش کارایی (performance) محتوا می‌شود.

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

HTML

<h2>Football Stars</h2>
<p>
  Name: Diego Armando Maradona <br>
  Born: 1960 <br>
  Nationality: Argentina <br>
  Clubs: Argentinos Juniors, Boca Juniors(2), Barcelona, Napoli, Sevilla, Newels Old Boys
</p>
<img src="images/maradona.png">content</img>

<p>
  Name: Lionell Messi <br>
  Born: 1987 <br>
  Nationality: Argentina <br>
  Clubs: Barcelona, Paris Sant German, Inter Miami
</p>
<img src="images/messi.png" loading="lazy">

<p>
  Name: Cristiano Ronaldo <br>
  Born: 1985 <br>
  Nationality: Portugal <br>
  Clubs: Sporting CP, Manchester United(2), Real Madrid, Juventus, Alnasr
</p>
<img src="images/ronaldo.png" loading="lazy">

<p>
  Name: Zinedine Zidane <br>
  Born: 1972 <br>
  Nationality: France <br>
  Clubs: Cannes, Bordeaux, Juventus, Real Madrid
</p>
<img src="images/zidane.png" loading="lazy">

<p>
  Name: Ronaldinho <br>
  Born: 1980 <br>
  Nationality: Brazil <br>
  Clubs: Gremio, Paris Sant German, Brcelona, AC Milan, Flamengo, Atletico Mineiro, Queretaro, Fluminense
</p>
<img src="images/ronaldinho.png" loading="lazy">

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

نمایش تصویر به صورت واکنشگرا با صفت‌های srcset و sizes

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

اما صفت srcset همانطور که از نامش نیز برمی‌آید، این امکان را به ما می‌دهد که مجموعه‌ای از تصاویر را معرفی کنیم تا در شرایط مختلف جایگزین تصویر اصلی که با استفاده از صفت src مشخص شده، بشوند. صفت sizes نیز مشخص‌کننده‌ی شرط مبنای انتخاب تصویر از بین تصاویر معرفی شده و سایز آن تصویر است. در حقیقت، این دو صفت به همراه عنصری به نام picture که در ادامه معرفی خواهد شد، ابزارهایی هستند که در HTML برای ایجاد تصاویر واکنشگرا (Responsive images) ارائه شده‌اند.

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

ابتدا حالتی را تصور کنید که بخواهیم برای همه‌ی دستگاه‌ها عکس یکسانی نمایش داده شود اما سایز این عکس برای برخی دستگاه‌ها کوچکتر و برای برخی بزرگتر باشد. در چنین سناریویی، صفت srcset شامل مجموعه‌ی تصاویری است که مرورگر باید از بین آنها یکی را بسته به دستگاه کاربر انتخاب کند و اندازه‌ی عرض (width) هر تصویر را نیز شامل است. اطلاعات مربوط به هر تصویر با یک کاما از اطلاعات مربوط به تصویر دیگر جدا می‌شود. همچنین، صفت sizes نیز مجموعه‌ای از شرط‌ها موسوم به media conditions را تعیین می‌کند و مشخص می‌کند که در صورت برآورده شدن هر یک از شرط‌ها، از بین تصاویر تعیین شده توسط صفت srcset کدام‌یک بهترین انتخاب محسوب می‌شود. برای روشن شدن موضوع، به مثال زیر دقت کنید.

HTML

<img srcset="elva-fairly-480w.jpg 480w, elva-fairly-800w.jpg 800w"
 sizes="(max-width:600px) 480px, 800px"
 src="elva-fairly-800w.jpg"
 alt="Elva dressed as a fairly">

همانطور که در مثال بالا می‌بینید، صفت srcset شامل دو تصویر است که اولی elva-fairly-480w.jpg نام دارد و مقدار عرض آن بعد از یک کاراکتر فاصله آورده شده است. در ضمن، می‌بینید که به جای مقیاس px از w استفاده شده که از روی width گرفته شده و به این معناست که این تصویر دارای عرض 480 پیکسل است. تصویر دوم نیز که دارای عرض 800 پیکسل است، به روش مشابهی به مرورگر معرفی شده است. حالا مرورگر برای این عنصر img به دو عکس دسترسی دارد و نیاز دارد بداند هر یک از این دو تصویر باید تحت چه شرایطی انتخاب شوند. تعیین این شرط بر عهده‌ی صفت sizes است. مقدار مورد استفاده برای این صفت در مثال بالا به این معناست که اگر عرض viewport کاربر کمتر یا مساوی 600 پیکسل باشد، تصویر دارای عرض 480 پیکسل و در عیر این صورت، تصویر دارای عرض 800 پیکسل انتخاب شده و نمایش داده شود.

به این ترتیب، مرورگر ابتدا عرض viewport را اندازه می‌گیرد و سپس، به شرط‌های تعریف شده در عنصر sizes یا همان media conditions مراجعه می‌کند و بررسی می‌کند که کدام‌یک از این شرط‌ها با توجه به عرض viewport برآورده شده‌اند و بر اساس آن، تصویر مربوط به آن شرط را پیدا کرده و آن را نمایش می‌دهد. البته همانطور که می‌بینید، در مثال بالا از یک عنصر src نیز استفاده شده تا در صورت عدم پشتیبانی مرورگر از صفت srcset تصویر مشخص شده توسط صفت src را نمایش دهد.

حالا سناریوی دیگری را تصور کنید که در آن کاربران ما از دستگاه‌هایی استفاده کنند که دارای رزولوشون‌های مختلف اما سایز نمایشگر یکسانی باشند. در این صورت، نیازی به صفت sizes نداریم و می‌توانیم از صفت srcset مانند مثال زیر استفاده کنیم.

HTML

<img srcset="elva-fairly-320w.jpg, elva-fairly-480w.jpg 1.5x, elva-fairly-640w.jpg 2x"
 src="elva-fairly-640w.jpg"
 alt="Elva dressed as a fairy">

در اینجا مشخصه‌ی توصیف‌کننده‌ای که بعد از نام تصویر آورده می‌شود، مربوط به سایز تصویر نیست بلکه به رزولوشن تصویر مربوط است و به فرم ax است که در آن a عددی است که مشخص‌کننده‌ی نسبت رزولوشن دستگاه به تصویر است. به این ترتیب، در این مثال اگر دستگاه کاربر دارای رزولوشن استاندارد باشد (یعنی هر پیکسل CSS معادل با یک پیکسل دستگاه باشد)، تصویر اول انتخاب می‌شود و اگر رزولوشون دستگاه بالا (high resolution) باشد به نحوی که هر پیکسل CSS معادل با دو پیکسل دستگاه باشد، تصویر سوم انتخاب و نمایش داده می‌شود.

کاربرد عنصر picture

عنصر picture انعطاف‌پذیری ما را در کار با تصاویر و نمایش آنها به صورت واکنشگرا افزایش می‌دهد. این عنصر می‌تواند شامل یک عنصر img و صفر، یک یا چند عنصر source برای ارائه‌ی نسخه‌های جایگزین تصویر در شرایط مختلف باشد. در حقیقت، به ازای هر تصویر، یک عنصر source درون عنصر picture قرار می‌گیرد که آدرس تصویر مورد نظر و شرط نمایش آن را با استفاده از صفت‌های srcset و media مشخص می‌کند. مقداری که صفت media دریافت می‌کند، یک media query است. مثال زیر را ببینید.

HTML

<picture>
  <source media="(min-width:800px)" srcset="eagle.png">
  <source media="(min-width:650px)" srcset="tiger.png">
  <img src="penguins.png" alt="Penguins">
</picture>

عنصر img درون یک عنصر picture با چند هدف استفاده می‌شود:

• اول اینکه عنصر img مشخص‌کننده‌ی تصویر مبناست و تصاویر مورد اشاره‌ی عناصر source نقش جایگزین این تصویر را دارند. بنابراین، در شرایطی که هیچ‌یک از شرط‌های مشخص شده با استفاده از صفات media برآورده نشود، تصویر مورد اشاره‌ی عنصر img نشان داده می‌شود.
• دوم اینکه مشخصه‌های تصویر انتخابی مانند سایز و مقدار صفت alt و سایر مشخصه‌های تصویر، در هر شرایطی از روی عنصر img خوانده می‌شود. به عبارت دیگر، صفت‌های عنصر img روی تصاویر مورد اشاره‌ی عناصر source نیز اعمال می‌شود.
• سوم اینکه عنصر img نقش یک گزینه‌ی fallback را نیز دارد. یعنی در صورتی که مرورگر کاربری از عنصر picture پشتیبانی نکند، تصویر مورد اشاره‌ی عنصر img تحت هر شرایطی نمایش داده می‌شود.

با توجه به مطالب گفته شده در مورد عنصر picture می‌توانیم آیتم‌های زیر را به عنوان مهمترین موارد استفاده‌ی این عنصر بیان کنیم:

• برش زدن یا ویرایش تصاویر برای شرایط مختلفی که با استفاده از صفت media هر عنصر source تعیین می‌شود. برای مثال، می‌توانیم بخشی از تصویر را که دارای جزئیات بیشتری است، برش بزنیم تا برای نمایشگرهای کوچکتر نمایش داده شود.
• ارائه‌ی فرمت‌های تصویری جایگزین برای مواردی که از فرمت‌های خاصی پشتیبانی نمی‌شود. برای مثال، فرمت‌های جدیدتری مانند AVIF یا webP مزایای زیادی دارند اما به خوبی فرمت‌های قدیمی‌تر در مرورگرها پشتیبانی نمی‌شوند.
• صرفه‌جویی در مصرف پهنای باند و افزایش سرعت بارگذاری صفحه با بارگذاری مناسب‌ترین تصویر برای نمایشگر کاربر.