اگر وب سایت های خود را کدنویسی می کنید ، حتما به این فکر کرده اید که سایت های خود را برای کاربرانی که با موبایل یا تبلت از سایت تان بازدید می کنند ، ریسپانسیو نمایید یعنی سایت شما این قابلیت را داشته باشد تا در دستگاه های با اندازه کوچکتر قابل نمایش باشد. اگر از طراحی واکنشگرا (Responsive) استفاده می‌کنید ، باید وب سایت شما به اندازه ای انعطاف پذیر باشد که قابلیت نمایش در تلفن های همراه نیز باشد. این در واقع یک استراتژی عالی برای منعطف نمودن سایت و تصاویر آنهاست.
یادگیری اصول اولیه واکنشگرا کردن کاملا ساده است ، زمانی که بر آنها مسلط شدید ، متوجه می شوید که مقیاس بندی تصاویر تنها را آغاز است و ممکن است به فکر واکنشگرا کردن تصاویر باشید و البته هرکدام نقاط ضعف و قوت خودش را دارند و هیچکدام کامل نیستند، در این مقاله سعی کرده ایم اصول اولیه آن را به شما بگوییم و سپس شما را با اطلاعاتی که بهترین انتخاب را برای پاسخگو کردن تصاویر داراست را آشنا نمایید.
با روش های واکنشگرا کردن تصاویر که با استفاده از کدها انجام می شود می تواند برای تمامی دستگاه ها استفاده شود. نمادها و آرم های کوچک ممکن است خیلی بد نباشند ، اما با بزرگتر شدن تصویر مشکل سرعت نیز حل می شود. تصاویر شبکیه چشم مشکل را تشدید می کند و شما نمی خواهید یک تصویر بزرگ را به چشم منتقل کنید که قادر به نمایش جزئیات کامل نیستند.
باید درباره همه چیزهای تصاویر فکر کنید. آیا واقعا باید یک تصویر ۹۹۰ × ۳۰۰ پیکسلی ۱۰۰ کیلوبایتی برای بینندگان موبایلی قرار دهیم؟ مطمئنا بازدیدکننده های گوشی همراه گاهی با اتصال وای فای در کافی شاپ سایت ها را ملاحضه می کنند ، با این حال گاهی در مسیر و جاده قرار دارند که سعی می کنند اطلاعات مهمی را از وب سایت های تان دریافت کنند. هر کاربر موبایل وقتی بارگذاری صفحه شما بیش از حد طول بکشد ، منصرف شده و سایتتان را ترک می کنند و شما نیز مشتری بالقوه تان را از دست می دهید.
بسیاری از وب سایت های تحت موبایل به همان اندازه دسکتاپ حالت بزرگنمایی دارند و امروزه به وفور یافت می شوند. گای پودجارنی چندین آزمایش را با فصاله یکسال از همدیگر انجام داد ، پیشرفت چندانی حاصل نشده است: در سال 2011، 86 درصد از وب سایت ها هم اندازه یا بزرگتر بودند، و در سال 2012 این تعداد به 72 درصد کاهش یافت، اما اندازه کلی وب سایت ها افزایش یافت. دیو روپرت نیز در مقاله خودش مشکلات Mo’ Pixels Mo” را به زیبایی به تصویر کشیده است.
زمانی که بنده اولین بار شروع به مبارزه با مشکلات عملکرد سایت های واکنشگرا بوده ام ، فکر اولیه بنده این بود که همه تغییرات تصاویر را در صفحه قرار دهم و برخی کلاس های css را با پرس و جوهای رسانه ای راه اندازی کردم که تصاویر بزرگ را مخفی می کند و تصاویر کوچک را در عرض های کمتر نشان می دهد. برعکس در عرض دسکتاپ ، منطقی به نظر می رسد که آیا مرورگر نباید فقط تصاویر قابل مشاهده را دانلود کند؟
مشکل این است که مرورگرها برای ما خیلی سریع هستند! به منظور ارائه سریعترین زمان بارگیری ممکن ، مرورگرها قبل از پردازش هر CSS یا جاوا اسکریپت، تمام تصاویری را که می توانند در کد منبع شناسایی کنند، از قبل بارگذاری می کنند. بنابراین، این رویکرد در واقع بازدیدکنندگان تلفن همراه را بیشتر جریمه می‌کند و آنها را مجبور می‌کند همه انواع یک تصویر را دانلود کنند!
به دلیل این پیش بارگیری ، اکثر راه حل ها به یک روش back-end (برای جلوگیری از بارگذاری اولیه) یا نشانه گذاری ویژه و جاوا اسکریپت نیاز دارند.
آخرین قطعه پازل عملکرد سرعت شبکه می باشد. همه ما می دانیم که فقط تصاویر بزرگ به دستگاه هایی با شبکه سریع تغذیه می شوند ، اما چگونه آن را تعیین کنیم؟ چندین تکنیک برای تخمین سرعت شبکه وجود دارد که هنوز بی خطا و بی مشکل نیستند.
برای مشاهده کامل مقاله " انتخاب یک راه حل برای عکس ریسپانسیو در طراحی سایت" کلیک نمایید.
