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

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

عکس ریسپانسیو

اگر وب سایت های خود را کدنویسی می کنید ، حتما به این فکر کرده اید که سایت های خود را برای کاربرانی که با موبایل یا تبلت از سایت تان بازدید می کنند ، ریسپانسیو نمایید یعنی سایت شما این قابلیت را داشته باشد تا در دستگاه های با اندازه کوچکتر قابل نمایش باشد. اگر از طراحی واکنش‌گرا (Responsive) استفاده می‌کنید ، باید وب سایت شما به اندازه ای انعطاف پذیر باشد که قابلیت نمایش در تلفن های همراه نیز باشد. این در واقع یک استراتژی عالی برای منعطف نمودن سایت و تصاویر آنهاست. امروزه تصاویر و عکس ریسپانسیو در طراحی سایت بسیار حائز اهمیت است و باید بر طبق قوانین گوگل آپلود شوند.

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

مشکل عملکرد

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

باید درباره همه چیزهای تصاویر فکر کنید. آیا واقعا باید یک تصویر 990 × 300 پیکسلی 100 کیلوبایتی برای بینندگان موبایلی قرار دهیم؟ مطمئنا بازدیدکننده های گوشی همراه گاهی با اتصال وای فای در کافی شاپ سایت ها را ملاحضه می کنند ، با این حال گاهی در مسیر و جاده قرار دارند که سعی می کنند اطلاعات مهمی را از وب سایت های تان دریافت کنند. هر کاربر موبایل وقتی بارگذاری صفحه شما بیش از حد طول بکشد ، منصرف شده و سایتتان را ترک می کنند و شما نیز مشتری بالقوه تان را از دست می دهید. عکس ریسپانسیو

عملکرد

بسیاری از وب سایت های تحت موبایل به همان اندازه دسکتاپ حالت بزرگنمایی دارند و امروزه به وفور یافت می شوند. گای پودجارنی چندین آزمایش را با فصاله یکسال از همدیگر انجام داد ، پیشرفت چندانی حاصل نشده است: در سال 2011، 86 درصد از وب سایت ها هم اندازه یا بزرگتر بودند، و در سال 2012 این تعداد به 72 درصد کاهش یافت، اما اندازه کلی وب سایت ها افزایش یافت. دیو روپرت نیز در مقاله خودش مشکلات Mo’ Pixels Mo” را به زیبایی به تصویر کشیده است.

پیچیده تر کردن آن: مرورگر در حال بارگذاری

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

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

به دلیل این پیش بارگیری ، اکثر راه حل ها به یک روش back-end (برای جلوگیری از بارگذاری اولیه) یا نشانه گذاری ویژه و جاوا اسکریپت نیاز دارند.

تشخیص پهنای باند

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

W3C بر روی یک api اطلاعات شبکه کار می کند و در آینده بسیار مفید هستند ، اما در حال حاضر تعداد معدودی از دستگاه ها از آن پشتیبانی می کنند. در حال حاضر چند روش برای پیاده سازی تصاویر واکنشگرا وجود دارد ، اما انتظار نداریم که تا زمانی به طور گسترده پشتیبانی نشوند ، به طور زیاد مورد استقبال قرار بگیرند. اندازه گیری های شبکه دشوار می باشد و همانطور که همانطور که Yoav Weiss در مقاله مجله Smashing خود بیان می‌کند، به نظر نمی‌رسد که «پرسش‌های رسانه پهنای باند» قابل اعتماد چیزی باشد که در آینده نزدیک بتوان آن را با دقت اجرا کرد.

پهنای باند

Foresight.js توسط Adam Bradley از جاوا اسکریپت برای آزمایش اینکه مرورگر چقدر طول می کشد تا یک تصویر 50K را دانلود کند، اطلاعات را ذخیره می کند و از آن برای تصمیم گیری در مورد پهنای باند استفاده می کند. چندین اشکال کوچک وجود دارد که دانلود تصویر 50 کیلوبایتی را به صفحه شما می افزاید و می تواند زمانی که دانلود تصویر به طور آزمایشی کامل می شود ، دانلود سایر تصاویر در صفحه تان مسدود شود. بسیاری از روش های تصویر واکنشگرا در حال حاضر تشخیص پهنای باند را پیاده سازی می کند و از یک تغییری از Foresight.js استفاده می‌کنند.

مسئله «جهت هنری»

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

اکنون آن را تا 300 پیکسل، به سبک موبایل، کاهش دهید. در این مقیاس، خانواده ما در تعطیلات بیشتر شبیه مورچه ها در پیک نیک هستند!

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

راه حل خودتان را انتخاب نمایید:

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

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

عکس ریسپانسیو

در اینجا چند فاکتور برای در نظر گرفتن وجود دارد:

آیا نیاز به حل مشکل جهت هنری دارید (یعنی نسبت های مختلف تصویر، برش ها و اندازه های مختلف برای عرض های مختلف)؟
آیا یک وب سایت بزرگ یا یک CMS دارید که بازگشت به عقب برای افزودن نشانه گذاری ویژه به هر تصویر امکان پذیر نیست؟
آیا همه تصاویر هنگام بارگذاری صفحه وجود دارند یا برخی از تصاویر به صورت پویا از طریق جاوا اسکریپت بارگذاری می شوند؟
آیا می خواهید پهنای باند کاربر را آزمایش کنید تا مشخص شود که آیا اتصال آنها به اندازه کافی سریع است که بتواند تصاویر با وضوح بالا را مدیریت کند؟
آیا راه حل به پلتفرمی نیاز دارد که برای شما در دسترس نباشد (مانند jQuery یا PHP)؟
آیا راه حل شخص ثالث قابل قبول است یا باید راه حل را در داخل خود نگه دارید؟

عکس ریسپانسیو

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

لطفا توجه داشته باشید: لیست راه حل های زیر به هیچ وجه جامع نیست. آنها کسانی هستند که من شخصاً مفیدترین آنها را یافته ام یا سوابق اثبات شده ای برای قابلیت اطمینان دارند. راه حل مورد علاقه خود را دارید که اینجا نیست؟ در نظرات به ما اطلاع دهید!

راه حل های آزمایش شده و واقعی عکس های واکنشگرا

PICTUREFILL

وب سایت ها کاملا جهانی هستند و باید با این واقعیت روبرو شویم که همه به اتصالات فیبر نوری و شبکه های 4G دسترسی ندارند. اسکات جهل در سفر و کار خود در آسیای جنوب شرقی به طور مستقیم با این شکاف دیجیتالی مواجه شد و او مدافع قوی وب‌سایت‌های مبتنی بر تلفن همراه و واکنش‌گرا است که بار اضافی بر دوش کاربران تلفن همراه وارد نمی‌کنند.

اسکریپت Picturefill ، او یک polyfill برای عنصر پیشنهادی <picture> است – کد جاوا اسکریپت که از API تصویر تقلید می‌کند و ما را قادر می‌سازد تا امروز از آن در وب‌سایت‌های خود استفاده کنیم.

HISRC

HiSRC، توسط Marc Grabanski و Christopher Schmitt، یک پلاگین جی کوئری است که به شما امکان می‌دهد نسخه‌هایی با وضوح پایین، متوسط و بالا از یک تصویر ایجاد کنید و اسکریپت بر اساس آمادگی شبکیه چشم و سرعت شبکه، نسخه مناسب را نشان می‌دهد.

برای تنظیم آن، ابتدا مطمئن شوید که jQuery و اسکریپت HiSRC در جایی در صفحه گنجانده شده است.

تصاویر تطبیقی

برخلاف دو اسکریپت قبلی، Adaptive Images ساخته مت ویلکوکس، بیشتر یک راه حل سمت سرور است. این به کمی جاوا اسکریپت نیاز دارد، اما کار واقعی از طریق وب سرور Apache 2، PHP 5.x و کتابخانه GD انجام می شود.

برای نصب آن بر روی سرور وب خود، باید یک فایل htaccess. را تغییر دهید یا اضافه کنید، چند فایل PHP را در فهرست اصلی وب سایت خود آپلود کنید، مقداری جاوا اسکریپت را به صفحات خود اضافه کنید (که یک کوکی برای ضبط وضوح صفحه کاربر اضافه می کند) ، و برخی از متغیرهای نقطه شکست را در فایل های PHP پیکربندی کنید تا با درخواست های رسانه ای وب سایت شما مطابقت داشته باشند.

دستورالعمل‌های نصب کاملاً مفصل هستند – برای اطلاعات بیشتر، به وب سایت رسمی مراجعه کنید و روی لینک در بالا کلیک کنید. عکس ریسپانسیو

راه حل های عکس پاسخگو برای تماشا

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

CAPTURING/MOBIFY.JS 2.0

کپچر کردن یک ویژگی جدید در حال توسعه Mobify.js 2.0 است که پیشنهاد می کند قبل از تجزیه یا رندر شدن توسط مرورگر به نشانه گذاری منبع HTML دسترسی (یا “گرفتن”) به شما بدهد. دسترسی به کد منبع در این مرحله شما را قادر می‌سازد تا ویژگی src یک تصویر را قبل از دانلود مرورگر تغییر دهید. حتی می‌توانید به یکی از راه‌حل‌های دیگر، مانند Picturefill، در صورتی که چیزی شکست بخورد، بازگشتی ایجاد کنید.

از آنجایی که این تکنیک مستقیماً بارگذاری اولیه مرورگر بومی را دور می زند، در محافل عملکرد وب کمی بحث برانگیز است. در صورت استفاده نادرست، در واقع می تواند به جای کاهش مشکلات عملکردی در یک سایت ایجاد کند! عکس ریسپانسیو

RESRC.IT

ReSRC.it یکی دیگر از راه حل های شخص ثالث (به تازگی نسخه بتا) است که تصاویر پاسخگو را از ابری ارائه می دهد. به نظر می رسد که از نظر اجرا بسیار شبیه به Sencha.io Src باشد، اما فیلترهای تصویر و تشخیص پهنای باند را اضافه می کند و به شناسایی عامل کاربر یا کوکی ها متکی نیست. با این سرویس می توانید برای عکس ریسپانسیو استفاده کنید.

تست، تست، تست!

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

YSLOW

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

WEBPAGETEST

ابزار آنلاین WebPageTest یک پروژه منبع باز است که توسط گوگل نگهداری می شود. شما آدرس وب سایت خود را وارد می کنید، تست سرعت را از یک مکان انتخابی انجام می دهید و مشخص می کنید که از کدام مرورگر استفاده می کنید. تنظیمات پیشرفته به شما امکان می‌دهد تراکنش‌های چند مرحله‌ای را انجام دهید، سرعت شبکه (کابل، DSL، FiOS و غیره) را انتخاب کنید، جاوا اسکریپت را غیرفعال کنید، تبلیغات را مسدود کنید و درخواست‌های دیگر را انجام دهید و موارد دیگر. نتایج به شکل جداول، نمودارها، اسکرین شات ها، بررسی عملکرد و بسیاری از داده های عالی برای کاوش به دست می آید! عکس ریسپانسیو در مبحث طراحی سایت بسیار مهم است.

نتیجه گیری عکس ریسپانسیو:

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