هنر کار با تصاویر به صورت واکنشگرا برای افزایش سرعت بارگزاری صفحات وب
هدف از طراحی واکنشگرا ایجاد صفحاتی پویا و هوشمند می باشد که بسته به اندازه صفحه نمایشگر خروجی مناسبی را از محتوای سایت به نمایش گذارند. امروزه نمایشگرها محدوده وسیعی را از تلفن های همراه تا مانیتور های عریض شامل می شوند، یکی از دغدغه های طراحی به صورت واکنشگرا بدون شک ارائه نمایشی انعطاف پذیر از تصاویر خواهد بود.
راه کارهای گوناگونی در این زمینه وجود دارند که هریک دارای مزایا و معایبی می باشند و اتخاذ راه حل مناسب بسته به نیاز و شرایط عملکرد شما و وب سایت مورد نظر خواهد بود . در این مطلب به معرفی برخی از این راه کارها می پردازیم.
کلیات
تنظیم تصاویر به شکلی که عرض تگ در برگیرنده خود را اتخاذ نماید کار ساده ای به نظر می رسد به عنوان مثال می توانید عرض تصویر را در شیوه نامه اصی یا شیوه نامه Normalize پوسته خود به شکل زیر تعریف نمایید :
|
1
2
3
4
5
6
7
8
9
|
<div class="img-container">
<img src="logo.png"/>
</div>
<style>
img {
max-width: 100%;
}
</style>
|
در بیشتر موارد تعریف فوق به درستی عمل خواهد کرد بدین صورت که با کاهش عرض صفحه، کلاس img-container باریکتر خواهد شد و در نقطه ای که عرض این کلاس از عرض تصویر logo.png کمتر شود عرض تصویر را به اجبار کاهش خواهد داد . در حقیقت با تعریف max-width و اختصاص مقدار ۱۰۰% به آن عرض تصویر وابسته به عرض کلاس احاطه کننده تصویر (img-container) شده و با کاهش عرض این کلاس عرض، تصویر نیز کاهش خواهد یافت .
همچنین اختصاص max-width با مقدار ۱۰۰% از نمایش تصویر با ابعاد بزرگتر از مقدار واقعی جلوگیری خواهد کرد.
البته در صورتی که تمایل دارید پوسته با مروگر های IE6 و IE7 سازگار باشد به جای صفت max-width باید از width در شیوه نامه های فرعی که جهت این مرورگرها طراحی می کنید استفاده نمایید.
فرض کنید شما قصد دارید لوگوی سایت را در ابعاد ۲۰۰*۲۰۰ و با کیفیتی بالاتر از حالت عادی نمایش دهید راه حلی که در این مورد به نظر می رسد ساخت تصویری با ابعاد ۴۰۰*۴۰۰ و نمایش آن در ابعاد ۲۰۰*۲۰۰ خواهد بود بدین ترتیب چگالی پیکسل ها ۲ برابر شده و کیفیت بهتری از تصویر را خواهید داشت سوالی که این جا مطرح است نحوه نمایش تصویر ۴۰۰*۴۰۰ در ابعاد ۲۰۰*۲۰۰ خواهد بود اولین راه حل اختصاص عرض ۲۰۰ به تصویر به شکل زیر است :
|
1
2
3
|
img.sitelogo {
max-width: 200px;
}
|
متاسفانه تعریف فوق به شکلی که انتظار دارید عمل نخواهد کرد و بزرگنمایی تصویر نسبت به تصاویر دیگر صفحه دچار اشکال شده ، با کاهش عرض صفحه بیرون زدگی و اختلال در چیدمان المان های صفحه را منجر خواهد شد . ( چون شما حداکثر مقدار عرض تصویر را مستقلا ۲۰۰ تعریف کرده اید عرض تصویر هیچ گونه وابستگی به عرض صفحه یا تگ های احاطه کننده تصویر نخواهد داشت).
در این موارد کافیست تگ img را داخل تگ احاطه کننده ای به شکل زیر قرار داده سپس مقدار max-width : 200px را به این تگ احاطه کننده اختصاص دهید با این کار تصویر ۴۰۰*۴۰۰ شما با عرض ۲۰۰*۲۰۰ نمایش داده شده و در صورت کاهش عرض صفحه و عرض تگ احاطه کننده مجددا عرض تصویر کاهش خواهد یافت:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<div class="img-container">
<img src"logo-400*400.png" />
</div>
<style>
.img-container {
max-width: 200px;
}
.img.sitelogo {
max-width : 100%;
}
</style>
|
اشکالات عملیاتی
به نظر می رسد راه حل هایی که در مراحل قبل اتخاذ شد به درستی عمل کرده و تصاویر شما نسبت به عرض نمایشگرهای مختلف انعطاف پذیر خواهد بود. در مواردی که از آیکون ها و تصاویر با ابعاد کوچک استفاده می کنید مشکلی بروز نخواهد کرد اما این راه کارها در مواردی که وب سایت شما حاوی تصاویر بزرگتری باشد چندان موثر نخواهد بود.
مخصوصا در هنگام استفاده از تصاویر Retina به شکل فوق و بدون ارزیابی قابلیت های نمایشگر کاربران مختلف، حجم اطلاعات یکسانی برای نمایشگرهایی که قابلیت نمایش تصاویر با کیفیت بالا را ندارند ارسال می شود.
در مثال قبل شما تصویر logo.png را با حجم ۲۰KB و ابعاد ۴۰۰*۴۰۰ توسط سرور برای تمام نمایشگرها (مانیتورهای عریض تا تلفن های همراه ) ارسال کرده ، در هنگام نمایش با استفاده از کدهای CSS این تصویر را متناسب با نمایشگر مورد نظر نمایش دادید. به این ترتیب حجم اطلاعات ارسالی به کاربران مختلف یکسان خواهد بود، اما کاربرانی که از تلفن همراه استفاده می کنند تنها تصویری با ابعاد ۲۰۰*۲۰۰ را مشاهده خواهند کرد.
در مثالی دیگر فرض کنید تصویر سربرگ شما در ابعاد ۹۰۰*۶۰۰ و حجم ۱۰۰KB طراحی شده و حجم آن در ابعاد ۲۰۰*۲۰۰ تنها ۱۷KB باشد، به این ترتیب ۸۳kb از ترافیک سرورهای خود و پهنای باند کاربرانی که نمایشگر کوچکی دارند (تلفن همراه ) تنها برای این تصویر و در یک بار بارگذاری سایت به هدر رفته و این کاربر با وجود مصرف ۱۰۰KB از ترافیک خود ،تنها تصویری به ابعاد ۲۰۰*۲۰۰ (متناسب با نمایشگر تلفن همراه) را مشاهده خواهد کرد.
با یک محاسبه ساده متوجه می شوید که حجم زیادی از ترافیک سایت خود را بی جهت از دست می دهید ، همچنین به کاربرانی فکر کنید که توسط تلفن های همراه خود با پهنای باند پایین به سایت شما مراجعه می کنند.
هنگامی که به عرصه طراحی وب سایت های واکنشگرا وارد شدم پیش زمینه ذهینم این بود که می توان تصاویر را با ابعاد مختلف درون صفحه جایگذاری کرد سپس با استفاده از مدیا کوئری ها (media@) و کدهای CSS از نمایش تصاویری که حجم و ابعاد بزرگتری دارند در نمایشگرهای کوچکتر جلوگیری کرد. به نظر منطقی می رسه! آیا مخفی کردن تصاویر بزرگ از ارسال آنها توسط سرور به مرورگر ها جلوگیری خواهد نمود؟
مشکل اینجاست که مرورگرها بسیار سریعتر از ما عمل می کنند! به منظور دستیابی به سرعت بارگذاری بالاتر، مرورگر ها تمامی تصاویر موجود در Source هر صفحه را قبل از کدهای CSS و جاوا اسکریپت پیش-بارگذاری می کنند. همانطور که می بینید این نمایشگرهای تلفن همراه هستند که باید جریمه بیشتری را بپردازند چون مجبور هستند تمام تصاویر را از سرور دریافت کنند در حالی که قادر به نمایش بیشتر آن ها نیستند!
به خاطر پیش-بارگذاری تصاویر توسط مرورگرهای ما مجبور هستیم از کدها و نشانه گذاری های خاص Html ، CSS و جاوا اسکریپت استفاده کنیم یا source صفحات را قبل از ارسال توسط سرور به مرورگر ویرایش کرده متناسب با نمایشگر مورد نظر تنظیم نماییم.
شناسایی پهنای باند کاربران
آخرین مرحله از پازل ایجاد قابلیت واکنشگرایی برای تصاویر شناسایی پهنای باند اینترنت کاربران وب سایت خواهد بود. از آنجایی که ما قصد داریم تصاویر بزرگ و حجیم را تنها برای کاربرانی نمایش دهیم که از پهنای باند بالایی بهره می برند احیتاج داریم پهنای باند و سرعت دسترسی کاربران مختلف به وب سایت را بررسی کنیم. تعدادی راه کار و تکنیک برای این منظور طراحی شده و توسط متخصصان وب در حال آزمایش است که هنوز به بهره برداری کامل نرسیده اند.
ٌW3C در حال کار بر روی Network Information API است که در آینده می تواند ابزار مفیدی در این زمینه باشد اما هم اکنون تنها بخش معدودی از دستگاه ها از این قابلیت پشتیبانی می کنند و استفاده انبوه از آن دور از انتظار می باشد.
اندازه گیری پهنای باند مشکل است و به نظر نمی رسد استفاده از مدیا کوئری های پهنای باند (Bandwicth Media Queries) در آیند نزدیک امکان پذیر باشد.
Yoav Weiss
اسکریپت Foresight.js که توسط Adam Bradley طراحی شده قبل از بارگذاری تصاویر ، با ارسال یک تصویر ۵۰KB برای کاربر زمان ارسال را محاسبه کرده و بررسی می کند که آیا کاربر از پهنای باند مناسبی بهره می برد یا خیر. سپس با استفاده از توابع خود ارسال یا عدم ارسال تصاویر را برای کاربران کنترل می نماید. امروزه بسیاری از راه کارهای تصاویر واکنشگرا به نحوی از این متد جهت بررسی پهنای باند کاربران بهره می برند.
مسئله کوچک نمایی تصویر و محو شدن جزئیات ضروری آن Art Direction
تصاویر با اهداف مختلف در صفحات وب مورد استفاده قرار می گیرند برخی از تصاویر مانند لوگو ها ، آیکون ها و . . . حتی در صورت کوچک نمایی (تغییر ابعاد) مفهوم مورد نظر را به کاربر منتقل خواهند کرد. اما در برخی دیگر (مانند تصاویر خبری ، گزارشات ، تصاویر هنری ) تصاویر مفهوم خاصی را منتقل می کند که با کوچک نمایی مستقیم (کاهش طول و عرض تصویر ) به مرور جزییات آنها محو شده و توسط کاربر قابل رویت نخواهد بود .
به عنوان مثال شما در سایت خبری خود ، خبری مبنی بر مدال گرفتن یکی از کشتی گیران ایرانی را همراه با تصویری از لحظه اهداء مدال به این ورزشکار منتشر می کنید . این تصویر در ابعاد بزرگ حاوی سکوی اهدای مدال ، عکاسان ، ورزشکاران ، پرسنل تشریفات ، تصاویر و بیل برد های تبلیغاتی و . . . خواهد بود. اما آنچه از اهمیت بیشتری در این تصویر برخوردار است ورزشکار مورد نظر به همراه شخصی است که در حال اهدای مدال به این ورزشکار می باشد. اگر تصویر مورد نظر را به صورت مستقیم با مقدار دهی طول و عرض یا (در صورت واکنشگرا بودن تصویر ) کاهش عرض مرورگر کوچک کنید به مرور تمامی المان های تصویر به همراه اجزاء پر اهمیت آن کوچک شده و جزییات مهم قابل شناسایی توسط کاربر نخواهد بود. بدین ترتیب کاربرانی که با نمایشگر کوچک خود به سایت شما مراجعه می کنند بهره چندانی از تصویر این خبر نخواهند برد.
راه کاری که در این موارد می توان اتخاذ کرد تهیه برش هایی در اندازه های مختلف از این تصویر و نمایش برش متناسب با اندازه مرورگر می باشد و سعی خواهد شد در برش های کوجکتر تصویر، المان های اصلی در حداکثر اندازه ممکن نمایش داده شده ، المان های فرعی و بی اهمیت در برش ما قرار نگیرند. برش هدفمند تصویر مورد نظر می تواند به شکل زیر باشد .
انتخاب راه کار مناسب
خوشبختانه در صنعت طراحی و توسعه وب افراد خلاق و باهوشی فعالیت دارند که به دنبال ارائه راه کارهای مناسب جهت رفع مسائل فوق می باشند و روی دیگر سکه راه کارهای فراوانی است که به منظور ایجاد تصاویر واکنشگرا با خصوصیات ذکر شده توسط توسعه دهندگان وب ارائه شده است.
از آن جایی که فاکتور های زیادی جهت انتخاب بهترین گزینه وجود دارد این مو ضوع کمی پیچیده به نظر می رسد. هر یک از این راه حل ها جهت رفع برخی از مسائل تصاویر واکنشگرا طراحی شده اند و برای انتخاب بهترین راه کار می بایست فاکتور های مختلف را نسبت به پروژه خود امتیاز دهی کرده و گزینه ای که بیشترین امتیاز را در پروژه شما به دست می آورد اتخاذ نمایید.
اینجا تعدادی فاکتور جهت انتخاب بهترین راه کار لیست شده است :
- آیا مسئله Art Direction برای شما مهم می باشد ( کیفیت ، برش ها و اندازه های متناسب با عرض نمایشگر های مختلف )؟
- آیا یک وب سایت بزرگ با انبوهی از مطالب ارسال شده دارید که بازگشت و ویرایش تگ تصاویر همه آن ها کار دشواری به نظر می رسد؟
- آیا از سیستم های ارسال محتوا مانند وردپرس ، دروپال ، جوملا و … بهره می برید؟
- آیا تمامی تصاویر در هنگام بارگذاری صفحه به مرورگر ارسال می شوند یا برخی از تصاویر به صورت پویا و به وسیله جاوا اسکریپت بارگذاری خواهند شد؟
- آیا تمایل دارید پهنای باند کاربران را آزمایش کرده در مورد ارسال تصاویر حجیم و با کیفیت بالا برای هر کاربر تصمیم بگیرید؟
- آیا راه کار مورد نظر از پلتفرمی که در دسترس شما نیست بهره می برد ( مانند PHP یا jQuery) ؟
- آیا راه حل هایی که بر پایه خدمات شرکت ها و سایت های توسعه دهنده وب استوار است قابل قبول می باشد ، یا شما اسرار دارید تمامی مشکلات را بر روی هاست و سرور شخصی خود حل نمایید؟
با در نظر گرفتن مسائل فوق به بررسی برخی از بهترین راه کار ها که توسط توسعه دهندگان وب در حال استفاده می باشند می پردازیم.
PICTUREFILL
حقیقتا وب بسیار پهناور است و ما باید با این حقیقت روبرو شویم که تمام کاربران وب به اینترنت پر سرعت و ۴G دسترسی ندارند. برای اولین بار Scott Jehl در سفر کاری خود به جنوب آسیا به این تفاوت دسترسی به امکانات دیجیتال در میان کاربران پی برد او یکی از طرفداران طراحی واکنشگرا و طراحی وب سایت از نسخه موبایل می باشد. اسکریپت او (PictureFill) امکان نمایش تصاویر در سایزهای مختلف را مانند تگ picture در html5 فراهم می آورد.
PICTUREFILL احتیاجی به jQuery ندارد و تنها کافیست اسکریپت picturefill.js را در بخشی از صفحه معرفی و وارد نمایید. همچنین جهت نمایش تصاویر در سایزهای مختلف به تعدادی تگ خاص div با صفات مختص این اسکریپت نیاز می باشد. صفت data-media مانند (media@) مدیا کوئری های CSS عمل می کند.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<span data-picture data-alt="Descriptive alt tag">
<span data-src="images/myimage_sm.jpg"></span>
<span data-src="images/myimage_lg.jpg" data-media="(min-width: 600px)"></span>
<!--[if (lt IE 10) & (!IEMobile)]> //تگ شرطی برای نمایش تصویر در مرورگر IE
<span data-src="images/myimage_sm.jpg"></span>
<![endif]-->
<!-- Fallback content for non-JS browsers. -->
<noscript> //جهت نمایش تصویر در مرورگهایی که جاوا اسکریپت را اجرا نمی کنند
<img src="images/myimage_sm.jpg" alt="Descriptive alt tag" />
</noscript>
</span>
|
تمام آنچه که برای نمایش تصاویر در سایز های مختلف احتیاج دارید در مثال فوق ذکر شده است تنها کافیست تصاویر خود را با دستورالعمل ذکر شده به صفحات وب بیافزایید ، همچنین در صورتی که با کدنویسی آشنا هستید می توانید صفحات پیشن خود را ویرایش کرده و این قابلیت را به تصاویر بیافزایید.
این متد احتیاج به نگارش تعداد زیادی کد برای هر تصویر دارد و کاربرانی که به هر دلیل قادر به ویرایش source صفحات خود نیستند با مشکل مواجه خواهند شد . در ضمن این متد هیچ اقدامی جهت شناسایی پهنای باند کاربران انجام نمی دهد و اگر شناسایی پهنای باند کاربران برای شما مهم است بهتر است به متدهای بعدی توجه نمایید.
HiSRC
HiSRC توسط Marc Grabanski و Christopher Schmitt و بر پایه jQuery نوشته شده است . شما می توانید سایزهای مختلف تصویر ( کم حجم ، متوسط ، با کیفیت بالا ) را با صفتهای src ، data-x1 و data-x2 به تگ img معرفی کنید ، این اسکریپت بعد از بررسی نمایشگر کاربر از نظر قابلیت نمایش تصاویر با کیفیت و پهنای باند مصرفی بهترین گزینه را جهت نمایش به مرورگر ارسال خواهد کرد.
جهت استفاده از این متد ابتدا مطمئن شوید jQuery و اسکریپت HiSRC در بخشی از صفحه شما معرفی و وارد شده باشد.
در صفحه خود تصویر را به حالت عادی و با تگ img وارد نمایید آدرس کوچکترین یا کم کیفیت ترین سایز تصویر را به صفت src اختصاص داده سایز های میانه و سایز بزرگ یا کیفیت بالای تصویر را به ترتیب به صفت های data-x1 و data-x2 اختصاص دهید . در مرحله بعد می بایست کلاسی (مانند hisrc) را به تگ img یا تگ در برگیرنده تصویر اختصاص دهید تا مشخص شود کدام دسته از تصاویر می بایست توسط این اسکریپت عملیاتی شوند.
|
1
|
<img src="http://placekitten.com/200/100" data-1x="http://placekitten.com/400/200" data-2x="http://placekitten.com/800/400" class="hisrc" />
|
در بخشی از صفحه بعد از معرفی اسکریپت HiSRC و بعد از اجرای شیوه نامه، کلاس مورد نظر را به این اسکریپت معرفی نمایید:
|
1
2
3
|
$(document).ready(function(){
$(".hisrc").hisrc();
});
|
با اجرای صفحه ابتدا کوچکترین سایز تصویر که به src اختصاص داده اید نمایش داده می شود سپس اسکریپت بررسی می کند که آیا نمایشگر کاربر قابلیت نمایش تصاویر Retina را داراست و کاربر از پهنای باند مناسب بهره می برد در این صورت تصویر data-x2 جایگزین تصویر اولیه می شود ، در صورتی که کاربر از پهنای باند مناسبی بهره می برد اما نمایشگر او قابلیت نمایش تصاویر Retina را ندارد تصویر data-x1 جایگزین می شود. اما در صورتی که هیچ یک از شرایط فوق برقرار نباشد اسکریپت تصویر اولیه را بدون تغییر رها خواهد کرد .
همانطور که متوجه شدید تصویر کوچک در ابتدا به مرورگر ارسال می شود در مرحله بعد در صورت برقراری شرایط تصویر دیگری جایگزین تصویر اولیه خواهد شد ، بنابراین کاربرانی که از پهنای باند بالا بهره می برند ۲ تصویر را از سرور شما دریافت خواهند کرد . در حقیقت این متد الویت را به کاربران تلفن همراه می دهد که به طور معمول از پهنای باند پایین بهره می برند.
ADAPTIVE IMAGES
- افزودن یا ویرایش فایل .htaccess
- افزودن تعدادی فایل PHP به وب سایت
- ویرایش فایل افزوده شده جهت معرفی نقاط انتقال (شکست) منطبق با مدیا کوئری های شیوه نامه شما
- افزودن چند خط جاوا اسکریپت ( جهت بررسی عرض نمایشگر کاربر)
- از آنجایی که ترکیبی از PHP و Apache جهت اجرا این متد نیاز است ممکن است با وب سایت شما سازگار نباشد.
- تغییر ساز تصاویر در سمت سرور انجام می گیرد و تصاویری که از هاست دیگر درون صفحات بارگذاری می شوند توسط این متد ویرایش نخواهند شد.
- این متد پهنای باند کاربران را محاسبه نخواهد کرد.
- این متد مسئله Art Direction را حل نمی کند زیرا تنها به تغییر سایز تصاویر پرداخته هیچ گونه قابلیتی جهت برش یا افزایش کیفیت تصاویر ندارد.
SENCHA .IO SRC
سابق بر این با نام TinySrc شناخته می شد و مانند یک پروکسی برای تصاویر عمل می کند . شما بدون ایجاد تغییرات خاصی در سمت سرور و تنها با افزودن پروکسی این سایت به تصاویر خود از خدمات آن بهره خواهید برد. در هنگام بارگذاری صفحه تصاویر به این سایت ارسال شده و بر اساس نوع نمایشگر ، تصویر متناسب تهیه و به مرورگر کاربر ارسال خواهد شد.
فرض کنید تصویر بزرگ و حجیمی با نام image.png در صفحه نخست خود جایگذاری کرده اید :
|
1
|
<img src="http://www.your-domain.com/path/to/image.jpg" alt="My large image" />
|
جهت ارجاء این تصویر به Sencha و دریافت تصویر متناسب با نمایشگر کاربر کافیست تگ img را به شکل زیر ویرایش نمایید :
|
1
|
<img src="http://src.sencha.io/http://www.your-domain.com/path/to/image.jpg" alt="My large image" />
|
Sencha تصاویر شما را جهت تطبیق با عرض نمایشگر کاربر تغییر سایز می دهد ، به طور معمول این سایز برای تلفن های همراه ۳۲۰ پیکسل و برای تبلیت ها ۷۶۸ پیکسل خواهد بود. همچنین با تنظیم پیش وندهای خاص Sencha.io می توانید ابعاد و سایزهای متفاوتی را بر اساس درصد و یا محاسبات پیچیده از این سایت دریافت نمایید.
در ضمن گزارش کاملی از تصاویر ارسال شده توسط این سایت به نمایشگر کاربران به همراه جزییات و نمودار ها در بخش کنترل پنل کاربری به شما ارائه خواهد شد.
جهت مشاهده ویژگی و خدمات ارائه شده توسط این سایت به آدرس زیر مراجعه نمایید :
به این ترتیب شما از تصاویر واکنشگرا در وب سایت خود بهره خواهید برد . اما این نکته را در نظر داشته باشید که از خدمات سایت دیگر جهت ارتقاء سایت خود استفاده نموده اید در حقیقت نقطه ضعف این متد در مقابل ویژگی های فراوان آن وابستگی وب سایت به Sencha در پروسه واکنشگرا سازی تصاویر خواهد بود.
راه کاری هایی جهت بررسی
راه کارهای فوق الذکر به صورت انبوه توسط توسعه دهندگان در حال استفاده می باشند و مهر تایید را از طرف کاربران وب دریافت کرده اند اما راه کارهای جدید نیز خالی از خلاقیت و کیفیت نیستند و شاید روزی جایگزین موارد فعلی شوند . در این بخش ۲ متد جدید را که با تکنیک های خاص خود به رفع مشکل تصاویر واکنشگرا پرداخته اند معرفی خواهیم کرد.
CAPTURING / MOBIFY.js 2.0
Capturing یکی از ویژگی های اسکریپت در حال توسعه Mobify.js 2.0 می باشد، که به شما اجازه کنترل تگ های HTML صفحه را قبل از ارسال به مرورگر جهت بارگذاری خواهد داد. به این ترتیب شما می توانید تگ img را دریافت کرده صفت src آنرا قبل از دانلود توسط مرورگر تغییر داده آدرس تصویر متناسب با نمایشگر کاربر را جایگزین آدرس اولیه نمایید همچنین می توانید بعد از دریافت تگ img صفحه یکی از متد های قبلی را مانند PictureFill جهت نمایش تصویر استفاده نمایید.
این متد تگ های مورد نظر را به صورت مستقیم از Source صفحه دریافت و نگه داری می کند، که این موضوع در چرخه عملیاتی وب کمی بحث انگیز می باشد و اگر به درستی استفاده نشود موجب اشکال در عملکرد صفحات وب خواهد شد.
نکته دیگر آن که Capturing بر روی مرورگرهای قدیمی به خصوص مروگر IE قابل اجرا نمی باشد و اگر شما به این مرورگر های اهمیت می دهید دچار مشکل خواهید شد .
لیست مرورگر هایی که پشتیبانی می شوند :
- Webkit ،Safari, Chrome تمامی نسخه ها
- فایر فاکس نسخه +۴٫۰
- Opera نسخه +۱۱٫۰
- IE نسخه +۱۰٫۰
RESRC.IT
ReSRC.it نیز یکی از سایت های ارائه کننده خدمات تصاویر واکنشگرا می باشد نحوه راه اندازی آن بسیار ساده و شبیه به Sencha.io می باشد. در این تکنیک نوع نمایشگر کاربر بررسی نمی شود بلکه پهنای باند و فیلتر های تصویر از اهمیت برخوردار می باشند.
برای شروع ابتدا می بایست در این سایت عضو شده و شناسه کاربری مختص سایت خود را ایجاد نمایید عضویت اولیه به مدت ۳۰ روز رایگان بوده و اجازه تبادل یک گیگا بایت اطلاعات را به کاربران خواهد داد. برای مشاهده پلن ها و جزئیات و قیمت هر مورد به لینک زیر مراجعه نمایید:
در مرحله بعد می بایست اسکریپت این متد را در بخشی از صفحه خود وارد نمایید :
|
1
|
<script src="//use.resrc.it"></script>
|
حال فرض کنید تصویری به شکل زیر در صفحه خود دارید :
|
1
|
<img src="http://path/to/image.jpg" alt="My large image" />
|
در این مرحله آدرس تصویر را به آدرسی از ReSRC.it پیشوند زده کلاس resrc را به تگ img بیافزایید – توجه کنید که سایت ReSRC از ۲ سرور جهت ویرایش تصاویر استفاده می کند یک سرور مربوط به اکانت های حرفه ای و سرور دیگر مربوط به اکانت های آزمایشی می باشد :
|
1
|
<img src="http://trial.resrc.it/http://www.your-domain.com/path/to/image.jpg" alt="My large image" class="resrc" />
|
ReSRC به شما اجازه خواهد داد پارامترهایی را جهت چرخش ، معکوس کردن ، برش و . . . به آدرس تصویر بیافزایید تا نحوه عملکرد را مطابق دلخواه خود تنظیم نمایید همچنین می توانید مسئله Art Direction و تصاویر Retina را با افزودن پارامتر های طول و عرض و کیفیت تصویر مطابق دستورالعمل این سایت رفع نمایید :
تصاویر Retina :
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<html>
<head>
<title>ReSRC HiDPI (Retina) Support</title>
<style>.resrc {width: 100%}</style>
</head>
<body>
<img data-src="http://app.resrc.it/o=80/http://www.your-site.co/image.jpg" alt="An awesome dog" class="resrc"/>
<!-- Manually force a pixel ratio of 1.5 -->
<img data-resrc-dpi="1.5" data-src="http://app.resrc.it/o=80/http://www.your-site.co/image.jpg" alt="An awesome dog" class="resrc"/>
<script src="//use.resrc.it"></script>
</body>
</html>
|
افکت های تصویر :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<html>
<head>
<title>ReSRC Image Control And Effects</title>
<style>.resrc {width: 100%}</style>
</head>
<body>
<!-- Crop the image to show just the dog -->
<img data-src="http://app.resrc.it/c=w1360,h850,xof100p,yof22p/http://www.your-site.co/image-control.jpg" alt="An awesome dog tightly cropped" class="resrc"/>
<!-- Crop the image to show just the dogs head enlarged -->
<img data-src="http://app.resrc.it/c=w500,h312,xof76p,yof12p/http://www.your-site.co/image-control.jpg" alt="An awesome dogs head" class="resrc"/>
<!-- Flip the image horizontally, add the greyscale effect and optimize to 60% -->
<img data-src="http://app.resrc.it/r=h/e=g/o=60/http://www.your-site.co/image-control.jpg" alt="An awesome dog in black and white" class="resrc"/>
<!-- Optimize to 70% -->
<img data-src="http://app.resrc.it/o=70/http://www.your-site.co/image-control.jpg" alt="An awesome dog" class="resrc"/>
<script src="//use.resrc.it"></script>
</body>
</html>
|
جهت مشاهده نمونه کدها و پیش نمایش های این سایت به آدرس زیر مراجعه نمایید :
آزمایش، آزمایش و آزمایش !
بعد از انتخاب مناسب ترین متد برای تصاویر واکشنگرا و اعمال آن در وب سایت خود نوبت به آزمایش نحوه عملکرد متد انتخابی می رسد تا مطمئن شوید این راه کار به درستی عمل می کند. در این بخش ۲ ابزار آنلاین را جهت آزمایش صفحات وب معرفی می کنیم.
YSLOW
YSLOW ابزار آزمایش صفحات وب است که توسط یاهو طراحی شده و در سمت کاربری (توسط مرورگر کاربر یا وب مستر) ۲۳ قانون قابل آزمایش را جهت نحوه عملکرد صفحه مورد نظر بررسی می کند ، این قوانین توسط یاهو به عنوان معیار عمکرد صفحات وب در نظر گرفته شده است . YSLOW صفحه مورد نظر را نسبت به هر یک از قوانین بررسی کرده و رتبه دهی می نماید سپس راه کار بهبود رتبه و عملکرد سایت را برای هر یک از قوانین به صورت جداگانه پیشنهاد می کند. این افزونه بر روی مرورگر های Chrome, FireFox, Safari و Opera قابل استفاده می باشد.
WEBPAGETEST
ابزار آنلاین WebPage Test یک پروژه کدباز طراحی شده توسط گوگل می باشد. شما آدرس صفحه مورد نظر را وارد می کنید سپس انتخاب می کنید در چه موقعیت مکانی و برای چه مرورگری آزمایش صورت گیرد. گزینه های موجود به شما اجازه خواهد داد جاوا اسکریپت را غیر فعال کنید، پهنای باند مجازی را تنظیم کنید، صفحات تاخیری را آزمایش کنید و . . . و در آخر نتایج در قالب جداول ، نمودار ها ، تصاویر و ویدئو ها با تمام جزییات در اختیار شما قرار خواهد گرفت.
