یک راه حل برای تصاویر ریسپانسیو در طراحی سایت

تصاویر ریسپانسیو شده، در حال حاضر یکی از سخت ترین مشکلات طراحی سایت پاسخگو بوده است. تا زمانی که سازندگان مرورگر از یک راه حل بومی برخوردار نیستند، ما مجبور به فکر کردن در مورد پرواز هستیم و راه حل های خودمان را ارائه دهیم. تصاویر Retina به خصوص یک چالش هستند، زیرا اگر اندازه طرح خود را با ems یا درصد (به عنوان شما باید!)، پس از اینکه می توانید از ابعاد دقیق پیکسل هر نمایش داده شده مطمئن شوید مطمئن نیستید. در این مقاله، ما به یک راه حل برای مشکل که ما در وب سایت نمونه کارها خود را در Etch، جایی که شما می توانید یک نسخه کار زودهنگام در وحشی را ببینید.

مورد نیاز برای تصاویر پاسخگو

ما از یک رویکرد محتوا در Etch استفاده کردیم. ما می دانستیم که می خواهیم از تصاویر زیادی استفاده کنیم تا به سرعت فضای شرکت را منتقل کنیم. این می تواند با قطعه های کوچک یا “soundbites” متن باشد.

تصمیم بعدی در مورد اندازه و نسبت تصویر بود. برای کنترل حداکثر طراحی، می دانستیم که ما نیاز به حداکثر کنترل روی تصاویر داریم. ما تصمیم گرفتیم از اینستاگرام به عنوان پایه برای تصاویر ما به دلایل زیر استفاده کنیم:

۱ – نسبت ابعاد ثابت است
۲ – اکثر کارکنان در اینجا از آن استفاده می کنند.
۳ – این فیلترهای دوست داشتنی

Instagram اجازه می دهد تا حداکثر اندازه تصویر ۶۰۰ پیکسل داشته باشد، بنابراین ما در حال حاضر اولین مجموعه ای از محدودیت های محتوا برای کار با: تصاویر با نسبت ابعاد ۱: ۱ و حداکثر اندازه تصویر ۶۰۰ × ۶۰۰ بود. داشتن محدودیت در سمت محتوای فرایند طراحی را ساده تر ساخت، زیرا گزینه های ما را محدود کرد، بنابراین تصمیمات را مجبور کردیم. هنگامی که محتوای تکمیل شد، ما شروع به نگاه به طراحی کردیم. باز هم، برای کنترل حداکثر، ما تصمیم گرفتیم که با یک سبک طراحی سازگار با اندازه ستون ثابت تصمیم بگیریم. ما از عناصر بلوک شبکه استفاده کردیم که با حداکثر اندازه تصویر ما منطبق است. هر بلوک شبکه ۶۰۰ × ۶۰۰ یا ۳۰۰ × ۳۰۰ است، که به راحتی می تواند طرح خشن ما حداقل عرض ۳۲۰ پیکسل را برای نمایشگاه در وب سایت مناسب سازد. در طول بقیه فرآیند طراحی، متوجه شدیم که ما نیاز به دو اندازه تصویر دیگر داریم: ریز عکسها در ۱۰۰ × ۱۰۰ و تصاویر قهرمان که عرض کامل محتوا را گسترش می دهند (۳۰۰، ۶۰۰، ۹۰۰، ۱۲۰۰، ۱۶۰۰، ۱۸۰۰). همه تصاویر همچنین باید Retina را آماده کنند – و یا، به روش دیگری، سازگار با صفحه نمایش با تراکم پیکسل بالا باشد. این به ما مجموعه نهایی الزامات برای یک راه حل تصاویر پاسخگو برای وب سایت داد:

۱ – عرض تصویر پتانسیل (در پیکسل) از ۱۰۰، ۳۰۰، ۶۰۰، ۹۰۰، ۱۲۰۰، ۱۶۰۰، ۱۸۰۰
۲ – شبکیه چشم آماده است
۳ – باید حداقل با اندازه تغییر اندازه (برخی از مردم متوجه کاهش کیفیت با تصاویر حتی کوچک)

با توجه به اینکه تصاویر زیادی را به صورت دستی تغییر دهید، حتی با استفاده از یک اسکریپت فتوشاپ، به نظر می رسید کار بسیار زیاد است. هر چيزي شبیه به آن بايد به صورت اتوماتيک باشد، به اين ترتيب شما می توانيد به جای آن برنامه نویسی جالب و جذاب را تمرکز کنيد. اتوماسیون نیز شانس خطای انسانی را حذف می کند، مانند فراموشی برای انجام آن. راه حل ایده آل برای اضافه کردن یک فایل تصویر یک بار و فراموش کردن آن است.

 

راه حل های مشترک

قبل از رفتن به راه حل ما، اجازه دهید به برخی از راه حل های معمولی که در حال حاضر استفاده می شود نگاه کنیم. برای پیگیری روشهای در حال حاضر محبوب و کارهایی که جامعه وب انجام میدهد برای یافتن یک راه حل برای تصاویر پاسخگو، به گروه W3C Responsive Images Community بروید.

 

عنصر تصویر

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

 

Srcset

یکی دیگر از راه حل های محبوب، srcset، به تازگی در برخی از مرورگرهای مبتنی بر WebKit بومی است. در زمان ایجاد پلاگین ما این در دسترس نبود و به نظر میرسد انتظار میرود تا زمانی که سازگاری متقابل مرورگر به اندازه کافی خوب باشد تا از آن بدون استفاده از جاوااسکریپت استفاده شود. در زمان نوشتن، srcset تنها در کاباره های کروم و سافاری شبانه قابل استفاده است. قطعه بالا نشان می دهد srcset در استفاده. باز هم می بینیم که اساسا به درخواست های رسانه ای تعبیه شده در HTML محسوب می شود که واقعا من را مورد خطاب قرار می دهد. ما همچنین نیاز به ایجاد اندازه های مختلف تصویر قبل از زمان اجرا، که به معنی یا راه اندازی یک اسکریپت و یا دستی انجام آن، یک کار خسته کننده است.

 

کرک کردن سرور

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

 

راه حل ما

با استفاده از تصاویر و دستورات HTML srcset که به نظر می رسد تلاش های زیادی در مکان های اشتباه صورت گرفته، ما برای یک راه حل ساده تر به دنبال آن هستیم. ما می خواستیم قادر به اضافه کردن یک مسیر تصویر تک و اجازه دهید CSS، جاوا اسکریپت و پی اچ پی با خدمت به تصویر صحیح – به جای HTML، که به سادگی باید اطلاعات درست در جای خود. در زمان توسعه وب سایت، هیچ راه حل واضحی با الزامات ما مطابقت نداشت. بیشترین تمرکز بر تقلید تصویر یا srcset، که قبلا تعیین شده بود، برای نیازهای ما مناسب نبود. وب سایت Etch بسیار تصویری سنگین است که به صورت دستی تغییر اندازه هر عکس را یک روند طولانی و مستعد خطای انسانی می کند. حتی اجرای یک اسکریپت خودکار فتوشاپ نیاز به نگهداری بیش از حد داشت. راه حل ما یافتن عرض صفحه نمایش تصویر با جاوا اسکریپت در زمان بارگذاری صفحه بود و سپس src و عرض را به یک اسکریپت PHP منتقل کرد که می تواند تصاویر را بر روی پرواز تغییر داده و ذخیره کند تا قبل از قرار دادن آنها در DOM. ما به مثال انتزاعی از کد نگاه می کنیم که در HTML، JavaScript، PHP و LESS نوشته شده است. شما می توانید یک نسخه ی نمایشی در وب سایت من پیدا کنید. اگر می خواهید فایل ها را برای نسخه ی نمایشی بخرید، می توانید آنها را در GitHub پیدا کنید.

 

نشانه گذاری

نشانه گذاری برای نسخه ی نمایشی می تواند در فایل index.html در GitHub یافت شود. ما نسخه با وضوح بالاتر از تصویر را در تگ های اسکریپت قرار می دهیم، برای مرورگرهایی که جاوا اسکریپت خاموش شده اند. دلیل آن این است که اگر ما عملکرد را به عنوان یک ویژگی و جاوا اسکریپت به عنوان یک پیشرفت در نظر بگیریم، کاربران غیر جاوا اسکریپت همچنان محتوا را دریافت می کنند، فقط تجربه ای بهینه از آن محتوا نیست. سپس عناصر اسکریپت در یک عنصر div با ویژگی های src و alt تصویر به عنوان ویژگی های داده پیچیده می شوند. این اطلاعاتی را فراهم می کند که جاوا اسکریپت باید به سرور ارسال کند. پس زمینه بسته بندی تصویر به عنوان GIF بارگذاری شده است، نشان می دهد که تصاویر هنوز بارگذاری می شوند و نه فقط شکسته شده اند. یک جایگزین (که ما در یکی از پروژه های جانبی ما PhoSho استفاده کردیم) استفاده از کمترین وضوح تصویری است که شما به جای GIF بارگذاری (اگر شناخته شده) نمایش داده شود. این باعث می شود که پهنای باند کمی بیشتر شود زیرا بیش از یک تصویر در حال بارگذاری است، اما ظاهر شبیه به JPEG پیشرونده است که صفحه در حال بارگذاری است. همانطور که همیشه، ببینید آنچه مورد نیاز شما است.

 

JavaScript

جاوا اسکریپت برای ما بین HTML و سرور ارتباط برقرار می کند. این یک آرایه از تصاویر از DOM را با عرض متناسب خود می گیرد و فایل تصویر ذخیره شده از سرور را بازیابی می کند. پلاگین اصلی ما یک درخواست برای هر تصویر برای سرور ارسال کرد، اما این باعث شد که بسیاری از درخواست های اضافی. با جمع آوری تصاویر ما با هم به عنوان یک آرایه، درخواست ها را کاهش داده و سرور را خوشحال می کنیم. شما می توانید پلاگین جاوا اسکریپت را در /js/resize.js در مخزن GitHub پیدا کنید.
ابتدا آرایه ای از نقاط نقطهای در پلاگین ایجاد می کنیم که همان نقاط نقطهای در CSS است که در آن اندازه های تصویر تغییر می کنند. ما از مقادیر EM برای نقاط پایانی استفاده کردیم زیرا بر اساس اندازه فونت نمایش داده می شوند. این یک تمرین خوب است، زیرا کاربران دارای اختلال دیدگی ممکن است اندازه فونت پیش فرض خود را تغییر دهند. این همچنین باعث می شود که نقطه های شکست CSS ما با جاوا اسکریپت ها مطابقت داشته باشد. اگر ترجیح می دهید، افزونه فقط با نقطه های پایه مبتنی بر پیکسل کار می کند.

 

PHP

با جاوا اسکریپت به سادگی درخواست آرایه ای از تصاویر با ابعاد مختلف، پی اچ پی جایی است که اکثریت عمل انجام می شود. ما از دو اسکریپت استفاده می کنیم. یکی از کلاسهای تغییر اندازه (موجود در /php/lib/resize-class.php در نسخه ی نمایشی است)، که نسخه های ذخیره سازی cache از تصویر را در اندازه هایی که نیاز داریم، ایجاد می کند. اسکریپت دیگر در ریشه وب قرار می گیرد، محاسبه مناسب ترین اندازه برای نمایش داده می شود، و به عنوان یک رابط بین جاوا اسکریپت و resizer عمل می کند. ابتدا با اسکریپت اندازه و رابط، ما ابتدا آرایه ای از اندازه های پیکسل تصاویری که انتظار داریم نمایش داده می شود، و همچنین مسیر به پوشه تصاویر حافظه پنهان را تنظیم کنیم. اندازه تصویر در پیکسل ها است، زیرا سرور هر چیزی در مورد سطح در حال حاضر متن متفاوتی کاربر نمی داند، فقط در مورد اندازه تصویر فیزیکی خدمت می کنند.

 

چه چیزی را به دست آورده ایم؟

این پلاگین ما را قادر می سازد تا یک دسته از تصاویر را برای وب سایت داشته باشند. ما مجبور نیستیم در مورد چگونگی تغییر اندازه تصاویر فکر کنیم زیرا این فرایند خودکار است. این باعث می شود تعمیر و نگهداری و به روز رسانی بسیار ساده تر و حذف یک لایه تفکر است که بهتر به وظایف مهم تر اختصاص داده است. یک بار آن را بکشید و آن را فراموش کنید.TL؛ DR بیایید یکبار دیگر برای اندازه گیری خوب یک عمل خلاصه کنیم. در نشانه گذاری ما یک بسته بندی تصویری ارائه می دهیم که حاوی عبارت <noscript> است. این بسته بندی یک ویژگی داده از تصویر اصلی با وضوح بالا برای مرجع است. ما از جاوا اسکریپت برای ارسال یک درخواست AJAX به یک فایل پی اچ پی در سرور استفاده می کنیم و از نسخه ای به اندازه درست این تصویر درخواست می کنیم. فایل پی اچ پی یا تصویر را تغییر می دهد و مسیر تصویر به درستی اندازه را ارائه می دهد یا فقط مسیر را باز می کند اگر تصویر قبلا ایجاد شده باشد. هنگامی که درخواست AJAX تکمیل شد، تصویر جدید را به DOM اضافه می کنیم، یا اگر فقط یک بار اضافه شده است، فقط SRC را به روز رسانی می کنیم. اگر کاربر تغییر اندازه مرورگر خود را انجام دهد، سپس دوباره بررسی می کنیم که آیا باید اندازه تصویر بهتر استفاده شود.

 

بسته شدن

تا زمانی که یک راه حل مرسوم برای تصاویر پاسخگو وجود نداشته باشد، راهی درست نخواهد بود. قبل از اینکه برای یکی از پروژه های طراحی سایت خود تنظیم کنید، چندین گزینه را بررسی کنید. مثال زیر برای وبسایت هایی با چند اندازه صفحه نمایش معمول برای تصاویر در نقاط نقطه توقف خوبی کار می کند، اما این به هیچ وجه راه حل قطعی نیست. تا آن زمان، چرا در ایجاد راه حل خود، و یا بازی در اطراف با این یکی در GitHub نیست؟

0 دیدگاه برای “یک راه حل برای تصاویر ریسپانسیو در طراحی سایت”

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*