راهنمای HTML : استفاده از تصاویر واکنش‌گرا در HTML

در این مقاله، ما در مورد مفهوم تصاویر واکنش‌گرا - تصاویری که به خوبی در دستگاه‌هایی با اندازه صفحه نمایش، وضوح تصویر و سایر ویژگی‌های مشابه بسیار متفاوت کار می‌کنند - یاد خواهیم گرفت و به ابزارهایی که HTML برای کمک به پیاده‌سازی آنها ارائه می‌دهد، نگاهی خواهیم انداخت. این به بهبود عملکرد در دستگاه‌های مختلف کمک می‌کند.

چرا تصاویر واکنش‌گرا؟

   بیایید یک سناریوی معمول را بررسی کنیم. یک وب‌سایت معمولی ممکن است شامل یک تصویر سربرگ و چند تصویر محتوا در زیر سربرگ باشد. تصویر سربرگ احتمالاً تمام عرض سربرگ را در بر می‌گیرد و تصویر محتوا در جایی درون ستون محتوا قرار می‌گیرد. در اینجا مثالی آورده شده است:

   این روش روی دستگاه‌های صفحه عریض، مانند لپ‌تاپ یا دسکتاپ، به خوبی کار می‌کند، در این درس زیاد در مورد CSS بحث نخواهیم کرد، جز اینکه بگوییم: محتوای بدنه روی حداکثر عرض ۱۲۰۰ پیکسل تنظیم شده است - در نماهای بالاتر از این عرض، بدنه در ۱۲۰۰ پیکسل باقی می‌ماند و خود را در مرکز فضای موجود قرار می‌دهد. در نماهای پایین‌تر از این عرض، بدنه در ۱۰۰٪ عرض نما باقی می‌ماند. تصویر سربرگ طوری تنظیم شده است که مرکز آن همیشه در مرکز سربرگ باقی بماند، صرف نظر از اینکه عرض سربرگ چقدر باشد. اگر سایت روی صفحه نمایش باریک‌تری مشاهده شود، جزئیات مهم در مرکز تصویر (افراد) همچنان قابل مشاهده هستند و قسمت اضافی از هر دو طرف از بین می‌رود. ارتفاع آن ۲۰۰ پیکسل است. تصاویر محتوا طوری تنظیم شده‌اند که اگر عنصر بدنه از تصویر کوچکتر شود، تصاویر شروع به کوچک شدن می‌کنند تا همیشه درون بدنه بمانند، نه اینکه از آن سرریز شوند. با این حال، وقتی شروع به مشاهده سایت در یک دستگاه با صفحه نمایش باریک می‌کنید، مشکلاتی ایجاد می‌شود. هدر زیر خوب به نظر می‌رسد، اما برای یک دستگاه تلفن همراه، شروع به اشغال بخش زیادی از ارتفاع صفحه نمایش می‌کند. و در این اندازه، دیدن چهره دو نفر در تصویر اول محتوا دشوار است.

   یک راه حل می‌تواند نمایش یک نسخه برش خورده از تصویر باشد که جزئیات مهم تصویر را هنگام مشاهده سایت در یک صفحه نمایش باریک نشان می‌دهد. یک تصویر برش خورده دوم می‌تواند برای یک دستگاه با صفحه نمایش با عرض متوسط، مانند تبلت، نمایش داده شود. مشکل کلی که به موجب آن می‌خواهید تصاویر برش خورده مختلف را به این روش، برای طرح‌بندی‌های مختلف، ارائه دهید، معمولاً به عنوان مشکل جهت هنری شناخته می‌شود. علاوه بر این، اگر صفحه در صفحه موبایل مشاهده می‌شود، نیازی به جاسازی چنین تصاویر بزرگی در صفحه نیست. انجام این کار می‌تواند پهنای باند را هدر دهد. به ویژه، کاربران موبایل نمی‌خواهند با دانلود یک تصویر بزرگ که برای کاربران دسکتاپ در نظر گرفته شده است، پهنای باند را هدر دهند، در حالی که یک تصویر کوچک برای دستگاه آنها کافی است. برعکس، یک تصویر رستر کوچک وقتی بزرگتر از اندازه اصلی خود نمایش داده می‌شود، شروع به دانه دانه شدن می‌کند (یک تصویر رستر تعداد مشخصی پیکسل در عرض و تعداد مشخصی پیکسل در ارتفاع دارد). در حالت ایده‌آل، چندین وضوح تصویر در دسترس مرورگر وب کاربر قرار می‌گیرد. سپس مرورگر می‌تواند وضوح بهینه را برای بارگیری بر اساس اندازه صفحه نمایش دستگاه کاربر تعیین کند. این مشکل تغییر وضوح نامیده می‌شود. برای پیچیده‌تر کردن اوضاع، برخی دستگاه‌ها دارای صفحه نمایش‌های با وضوح بالا هستند که برای نمایش خوب به تصاویر بزرگتر از آنچه انتظار دارید نیاز دارند. این اساساً همان مشکل است، اما در زمینه‌ای کمی متفاوت. ممکن است فکر کنید که تصاویر برداری این مشکلات را حل می‌کنند، و تا حدی هم همینطور هستند - اندازه فایل آنها کوچک است و مقیاس خوبی دارند، و باید هر جا که ممکن است از آنها استفاده کنید. با این حال، آنها برای همه انواع تصویر مناسب نیستند. تصاویر برداری برای گرافیک‌های ساده، الگوها، عناصر رابط کاربری و غیره عالی هستند، اما ایجاد یک تصویر مبتنی بر بردار با نوع جزئیاتی که مثلاً در یک عکس پیدا می‌کنید، بسیار پیچیده می‌شود. فرمت‌های تصویر رستر مانند JPEG برای نوع تصاویری که در مثال بالا می‌بینیم، مناسب‌تر هستند. این نوع مشکل زمانی که وب برای اولین بار وجود داشت، در اوایل تا اواسط دهه 90 وجود نداشت - در آن زمان تنها دستگاه‌های موجود برای مرور وب، کامپیوترهای رومیزی و لپ‌تاپ‌ها بودند، بنابراین مهندسان مرورگر و نویسندگان مشخصات حتی به فکر پیاده‌سازی راه‌حل‌ها نبودند. فناوری‌های تصویر واکنش‌گرا اخیراً برای حل مشکلات ذکر شده در بالا پیاده‌سازی شده‌اند، به این صورت که به شما امکان می‌دهند چندین فایل تصویری را به مرورگر ارائه دهید، که یا همه چیز یکسانی را نشان می‌دهند اما حاوی تعداد پیکسل‌های متفاوتی هستند (تغییر وضوح)، یا تصاویر مختلفی که برای تخصیص فضای متفاوت مناسب هستند (جهت هنری). ویژگی‌های جدیدی که در این مقاله مورد بحث قرار گرفتند - - همگی در مرورگرهای مدرن دسکتاپ و موبایل پشتیبانی می‌شوند.

چگونه تصاویر واکنش‌گرا (ریسپانسیو) ایجاد کنیم؟

   در این بخش، به دو مشکل نشان داده شده در بالا نگاهی خواهیم انداخت و نحوه حل آنها را با استفاده از ویژگی‌های تصویر واکنش‌گرای HTML نشان خواهیم داد. توجه داشته باشید که همانطور که در قسمت محتوای مثال بالا مشاهده می‌شود، ما در این بخش بر روی عناصر تمرکز خواهیم کرد - تصویر موجود در هدر سایت فقط برای تزئین است و بنابراین با استفاده از تصاویر پس‌زمینه CSS پیاده‌سازی شده است. مسلماً CSS ابزارهای بهتری برای طراحی واکنش‌گرا نسبت به HTML دارد و ما در مورد آنها در یک ماژول CSS آینده صحبت خواهیم کرد.

تغییر وضوح: اندازه‌های مختلف

   خب، مشکلی که می‌خواهیم با تغییر رزولوشن حل کنیم چیست؟ ما می‌خواهیم محتوای تصویر یکسانی را نمایش دهیم، فقط بسته به دستگاه، بزرگتر یا کوچکتر - این وضعیتی است که با تصویر محتوای دوم در مثال خود داریم. عنصر استاندارد به طور سنتی فقط به شما امکان می‌دهد مرورگر را به یک فایل منبع واحد هدایت کنید:

Copy

HTML

   با این حال، می‌توانیم از دو ویژگی - srcset و sizes - برای ارائه چندین تصویر منبع اضافی به همراه نکاتی برای کمک به مرورگر در انتخاب تصویر مناسب استفاده کنیم.

Copy

HTML

   ویژگی‌های srcset و sizes پیچیده به نظر می‌رسند، اما اگر آنها را مطابق شکل بالا، با بخش متفاوتی از مقدار ویژگی در هر خط، قالب‌بندی کنید، درک آنها چندان دشوار نخواهد بود. هر مقدار شامل یک لیست جدا شده با کاما است و هر بخش از این لیست‌ها از سه زیربخش تشکیل شده است. اکنون بیایید محتویات هر یک را بررسی کنیم: مجموعه‌ای از تصاویری را که به مرورگر اجازه انتخاب بین آنها را می‌دهیم و اندازه هر تصویر را تعریف می‌کند. هر مجموعه از اطلاعات تصویر با یک کاما از مجموعه قبلی جدا می‌شود. برای هر کدام، ما می‌نویسیم: ۱- نام فایل تصویر () ۲- یک فاصله ۳- عرض ذاتی تصویر بر حسب پیکسل (480w) - توجه داشته باشید که این از واحد w استفاده می‌کند، نه px که ممکن است انتظار داشته باشید. اندازه ذاتی یک تصویر، اندازه واقعی آن است که می‌توانید با بررسی فایل تصویر در رایانه خود آن را پیدا کنید (به عنوان مثال، در مک می‌توانید تصویر را در Finder انتخاب کنید و Cmd + I را برای نمایش صفحه اطلاعات فشار دهید). مجموعه‌ای از شرایط رسانه (مثلاً عرض صفحه) را تعریف می‌کند و نشان می‌دهد که چه اندازه تصویری در صورت درست بودن شرایط خاص رسانه، بهترین اندازه برای انتخاب است - اینها نکاتی هستند که قبلاً در مورد آنها صحبت کردیم. در این مورد، قبل از هر ویرگول می‌نویسیم: ۱- یک شرط رسانه () - در مورد این موارد در مبحث CSS بیشتر خواهید آموخت، اما فعلاً بیایید فقط بگوییم که یک شرط رسانه، حالت ممکنی را توصیف می‌کند که صفحه نمایش می‌تواند در آن باشد. در این مورد، ما می‌گوییم "وقتی عرض نمای دید 600 پیکسل یا کمتر باشد". ۲- یک فاصله ۳- عرض شکافی که تصویر در صورت درست بودن شرط رسانه پر خواهد کرد (480px) در مورد اندازه‌ها، می‌توانید از هر مقدار طولی استفاده کنید. به عنوان مثال، به جای ارائه عرض مطلق (مثلاً ۴۸۰ پیکسل)، می‌توانید به طور جایگزین عرضی نسبت به نمای دید (مثلاً ۵۰vw) ارائه دهید. با این حال، نمی‌توانید از درصد به عنوان عرض اسلات استفاده کنید. ممکن است متوجه شده باشید که آخرین عرض اسلات هیچ شرط رسانه‌ای ندارد (این پیش‌فرضی است که وقتی هیچ یک از شرط‌های رسانه‌ای درست نباشند انتخاب می‌شود). مرورگر همه چیز را پس از اولین شرط تطبیق نادیده می‌گیرد، بنابراین مراقب باشید که چگونه شرط‌های رسانه‌ای را مرتب می‌کنید. بنابراین، با وجود این ویژگی‌ها، مرورگر: ۱- به اندازه صفحه نمایش، تراکم پیکسل، سطح زوم، جهت صفحه نمایش و سرعت شبکه نگاه می‌کند. ۲- ببینید کدام شرط رسانه در لیست اندازه‌ها اولین شرطی است که درست است. ۳- به اندازه اسلات داده شده به آن کوئری رسانه‌ای نگاه کنید. ۴- تصویر ارجاع شده در لیست srcset را که اندازه یکسانی با اسلات دارد، بارگذاری کنید. اگر تطابق دقیقی برای اندازه نمایش وجود نداشته باشد، مرورگر اولین تصویری را که بزرگتر از اندازه اسلات انتخاب شده است انتخاب می‌کند و آن را کوچک می‌کند تا در آن جا شود. و تمام! در این مرحله، اگر یک مرورگر پشتیبانی‌کننده با عرض نمای ۴۸۰ پیکسل، صفحه را بارگذاری کند، شرط رسانه (عرض <= ۶۰۰ پیکسل) درست خواهد بود و بنابراین مرورگر جایگاه ۴۸۰ پیکسل را انتخاب می‌کند. فایل elva-fairy-480w.jpg بارگذاری خواهد شد، زیرا عرض ذاتی آن (۴۸۰ پیکسل) به اندازه جایگاه نزدیک‌تر است. تصویر ۸۰۰ پیکسلی ۱۲۸ کیلوبایت روی دیسک است، در حالی که نسخه ۴۸۰ پیکسلی فقط ۶۳ کیلوبایت حجم دارد - یعنی ۶۵ کیلوبایت صرفه‌جویی. حال، تصور کنید که این صفحه‌ای باشد که تصاویر زیادی روی آن قرار دارد. استفاده از این تکنیک می‌تواند پهنای باند زیادی را برای کاربران تلفن همراه صرفه‌جویی کند. هنگام آزمایش این مورد با یک مرورگر دسکتاپ، اگر مرورگر در حالی که عرض پنجره را روی باریک‌ترین حالت تنظیم کرده‌اید، تصاویر باریک‌تر را بارگذاری نکند، به میزان viewport نگاهی بیندازید (می‌توانید با رفتن به کنسول جاوا اسکریپت مرورگر و تایپ

تغییر وضوح: اندازه یکسان، وضوح‌های متفاوت

   فرض کنید تصویری دارید که در نمایشگرهایی با وضوح تصویر متفاوت، با همان اندازه واقعی نمایش داده می‌شود. می‌توانید با ارائه نسخه‌ای با وضوح بالاتر از تصویر، تجربه کاربری بهتری را در نمایشگرهای با وضوح بالا ارائه دهید. برای دستیابی به این هدف، می‌توانید با استفاده از srcset به همراه x-descriptors و بدون اندازه‌ها - که یک سینتکس تا حدودی آسان‌تر است - به مرورگر اجازه دهید تصویر با وضوح مناسب را انتخاب کند!

Copy

HTML

   توجه داشته باشید که اگرچه تصویر همیشه با اندازه یکسان نمایش داده می‌شود، اما در نمایشگرهای با وضوح بالاتر، جزئیات بیشتری را مشاهده خواهید کرد.

   در این مثال، CSS زیر به تصویر اعمال می‌شود تا عرض آن در صفحه نمایش ۳۲۰ پیکسل باشد (که به آن پیکسل‌های CSS نیز می‌گویند):

Copy

CSS

   در این مورد، اندازه‌ها لازم نیستند - مرورگر تشخیص می‌دهد که صفحه نمایش با چه وضوحی نمایش داده می‌شود و مناسب‌ترین تصویر ارجاع داده شده در srcset را ارائه می‌دهد. بنابراین اگر دستگاهی که به صفحه دسترسی دارد، دارای وضوح صفحه نمایش استاندارد/پایین باشد، که در آن یک پیکسل دستگاه نشان دهنده هر پیکسل CSS است، تصویر بارگذاری خواهد شد (1x ضمنی است، بنابراین نیازی به درج آن نیست.) اگر دستگاه وضوح بالایی داشته باشد، یعنی دو پیکسل دستگاه در هر پیکسل CSS یا بیشتر، تصویر بارگذاری خواهد شد. تصویر 640px حجمی معادل 93 کیلوبایت دارد، در حالی که تصویر 320px فقط 39 کیلوبایت است.

جهت هنری

   به طور خلاصه، مشکل جهت هنری شامل تمایل به تغییر تصویر نمایش داده شده برای تطبیق با اندازه‌های مختلف نمایش تصویر است. به عنوان مثال، یک صفحه وب شامل یک تصویر افقی بزرگ با یک شخص در وسط است که در مرورگر دسکتاپ مشاهده می‌شود. هنگام مشاهده در مرورگر تلفن همراه، همان تصویر کوچک می‌شود و شخص موجود در تصویر را بسیار کوچک و دشوار می‌کند. احتمالاً بهتر است یک تصویر کوچکتر و عمودی در تلفن همراه نشان داده شود که روی شخص بزرگنمایی می‌کند. عنصر به ما امکان می‌دهد دقیقاً همین نوع راه حل را پیاده‌سازی کنیم. با بازگشت به مثال اصلی خود، تصویری داریم که به شدت به جهت هنری نیاز دارد:

Copy

HTML

   بیایید این مشکل را با حل کنیم! مانند و ، عنصر یک پوشش است که شامل چندین عنصر است که منابع مختلفی را برای انتخاب مرورگر ارائه می‌دهند و پس از آن عنصر مهم قرار دارد. کد موجود به این شکل است:

Copy

HTML

   - عناصر شامل یک ویژگی media هستند که شامل یک شرط media است - مانند مثال اول srcset، این شرط‌ها آزمایش‌هایی هستند که تصمیم می‌گیرند کدام تصویر نمایش داده شود - اولین موردی که مقدار true را برمی‌گرداند، نمایش داده می‌شود. در این حالت، اگر عرض viewport کمتر از ۸۰۰ پیکسل باشد، تصویر اولین عنصر نمایش داده می‌شود. اگر عرض viewport ۸۰۰ پیکسل یا بیشتر باشد، تصویر دوم نمایش داده می‌شود. - ویژگی‌های srcset شامل مسیر تصویری هستند که باید نمایش داده شود. همانطور که در بالا با دیدیم، می‌تواند یک ویژگی srcset با چندین تصویر ارجاع داده شده و همچنین یک ویژگی sizes را بپذیرد. بنابراین، می‌توانید چندین تصویر را از طریق یک عنصر ارائه دهید، اما سپس وضوح‌های مختلفی از هر یک را نیز ارائه دهید. در واقع، احتمالاً نمی‌خواهید این نوع کار را خیلی اوقات انجام دهید. - در همه موارد، باید یک عنصر به همراه src و alt، درست قبل از ارائه دهید، در غیر این صورت هیچ تصویری ظاهر نمی‌شود. این یک حالت پیش‌فرض ارائه می‌دهد که وقتی هیچ یک از شرایط رسانه‌ای مقدار صحیح را برنگردانند، اعمال می‌شود (در واقع می‌توانید عنصر دوم را در این مثال حذف کنید) و یک حالت جایگزین برای مرورگرهایی که از عنصر پشتیبانی نمی‌کنند. این کد به ما امکان می‌دهد تصویر مناسبی را هم در صفحه نمایش‌های عریض و هم در صفحه نمایش‌های باریک نمایش دهیم، همانطور که در زیر نشان داده شده است:

   شما باید از ویژگی رسانه فقط در سناریوهای جهت‌دهی هنری استفاده کنید؛ وقتی از رسانه استفاده می‌کنید، شرایط رسانه را نیز در ویژگی اندازه‌ها ارائه ندهید.

چرا نمی‌توانیم این کار را فقط با استفاده از CSS یا جاوا اسکریپت انجام دهیم؟

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

پیاده‌سازی تصاویر واکنش‌گرای خودتان

   در این تمرین، از شما انتظار داریم که شجاع باشید و عمدتاً به تنهایی این کار را انجام دهید. ما می‌خواهیم شما با استفاده از و یک مثال تغییر وضوح که از استفاده می‌کند، اسکرین‌شات باریک/عریض مناسب خود را پیاده‌سازی کنید. ۱- برای قرار دادن کد خود، مقداری HTML بنویسید (در صورت تمایل از به عنوان نقطه شروع استفاده کنید). ۲- یک تصویر منظره صفحه عریض زیبا با نوعی جزئیات موجود در آن پیدا کنید. با استفاده از یک ویرایشگر گرافیکی، یک نسخه به اندازه وب از آن ایجاد کنید، سپس آن را برش دهید تا قسمت کوچکتری که روی جزئیات زوم می‌کند را نشان دهد و یک تصویر دوم ایجاد کنید (عرض حدود ۴۸۰ پیکسل برای این کار مناسب است). ۳- از عنصر برای پیاده‌سازی یک تغییر دهنده تصویر جهت هنری استفاده کنید! ۴- چندین فایل تصویر با اندازه‌های مختلف ایجاد کنید که هر کدام یک تصویر مشابه را نشان دهند. ۵- از برای ایجاد یک مثال تغییر دهنده وضوح استفاده کنید، یا برای ارائه تصویر با اندازه یکسان در وضوح‌های مختلف بسته به وضوح دستگاه یا برای ارائه اندازه‌های مختلف تصویر بسته به عرض نمایشگر.