راهنمای استفاده از تصاویر وب امروزی ۲

تاریخ : ۱۰ آبان ۱۳۹۴ | دسته بندی : مقالات | برچسب ها : ,,,,

قبل از مطالعه متن زیر ابتدا نوشته قبلی را با کلیک بر رو این قسمت مطالعه نمائید . 

ادامه مقاله اول از اسمشینگ :

ما متوجه شدیم که یک افزونه Photoshop برای پشتیبانی از WebP وجود دارد و این نیز مارا کاملا غافلگیر کرد . این افزونه وارد کردن شماره در بخش تنظیمات کیفیت برای تصاویر WebP را آسان می کند . رابط این افزونه جایی برای امیدواری مان باقی گذاشت : هنوز شرکت Adobe آن را به طوررکامل آن را به خود اختصاص نداده است . در حال حاضر شما نمی توانید پیش نمایشی از تصویر مشاهده کنید تا به تنظیمات کیفیت دسترس داشته باشید ، که این یک نکته منفی است .

05

افزونه Photoshop فرمت WebP

به عنوان یک راه حل ، مرورگر Google Chrome امکان مقایسه سریع فایلها را فراهم کرده است . دسترسی به کادر “Save” در Photoshop نیز کمی غیرماهرانه است . ما برای صرفه جویی در زمان یک میان بر صفحه کلید ایجاد کرده ایم و بنابراین ، از سرزدن های تکراری به منوی افتادنی “Save as “ جلوگیری می کند . اما با وجود این هشدارها به دردسرش می ارزد !

فرمت WebP به علت صرفه جویی زیاد در اندازه تصویر ، کیفیت خوب و کانال آلفا در میان فرمت های تصاویر مانند یک مدعی واقعی است . با اینکه نتایج آزمایش کمی امیدوار کننده بودند ، عجیب اینجاست که بین فرمت ها هیچ کدام به طور واضح برنده نشدند . فرمت WebP غالبا از سایر فرمت ها برتر است ، اما JPEG و ۸-bit PNG هنوز هم در برخی اوقات آن را از نظر اندازه یک کیفیت و یا هردو شکست می دهند . قبل از اجرای WebP خودتان آزمایش های زیادی روی آن انجام دهید ، زیرا ممکن است برای نیازهایتان ایده آل نباشد .

اجرا

پس از اینکه تشخیص دادیم WebP می تواند برای استفاده از فرایندمان ابزاری کارآمد باشد ، به سراغ توسعه دهندگانمان رفتیم تا اجرای آن را آزمایش کنند . مرورگرهای Chrome ، Opera ، Opera Mini ، مرورگر Android ، و Chrome  اندروید به طور ذاتی از WebP پشتیبانی می کنند . مرورگرهای Firefox ، Internet Explorer ، و Safari این قابلیت را ندارند ، هرچند Firefox با WebP سابقه ای طولانی دارد . خوشبختانه برای حل مشکل پشتیبانی نکردن مرورگرها چند راه حل وجود دارد .

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

ما چهار آزمایش انجام دادیم تا مسیری را که باید برویم انتخاب کنیم . در اولین آزمایش از یک JPEG نرمال به عنوان کنترل استفاده کردیم و در سه آزمایش دیگر گزینه های فهرست بندی شده در زیر را اجرا کردیم . ما یک تصویر JPEG و یک تصویر WebP با کیفیت مشابه (۲۶۹KB برای JPEG و ۵۲KB برای WebP ) . نتایج این آزمایش را در یک فایل PDF آورده ایم که می توانید دانلود و مشاهده کنید .

در آزمایش دوم ، یک WebPJS ، یک ۶۷KB polyfill ، که دومینیک هامبرگر آن را توسعه داده ، نیز استفاده کردیم . این فرمت امکان پشتیبانی در تمام مرورگرهای اصلی حتی در IE6 و بالاتر را فراهم می کند . polyfill برای ما فایده زیادی دارد ، زیرا لازم نیست دستور زبان عنصر <img> در کد فعلی تان را تغییر دهید ، فقط کافی است .jpeg  یا .png را به .webp تغییر دهید و polyfill بقیه کار را برایتان انجام می دهد .

رویکرد بعدی ما استفاده از Picturefill بود ، یعنی یک polyfill که امکان استفاده از <picture> را حتی در زمانی که <picture> به طور ذاتی پشتیبانی نمی شود ، فراهم می کند . این کار ، امکان استفاده از <source> برای WebP در صورتی که مرورگر از این فرمت پشتیبانی نکند و نیز امکان بازگشت به JPEG ، PNG ، یا سایر انواع تصاویر در صورتی که WebP پشتیبانی نشود را به توسعه دهندگان می دهد . ( مسلما عنصر <picture> سایر توانایی های حیرت آور را هم حفظ می کند ) .

در آزمایش چهارم از کد درون فایل .htaccess  در سرور برای اجرای WebP استفاده کردیم .این گزینه را ونسنت اوربک ابداع کرد . با استفاده از این رویکرد ، کد .htaccess به دنبال یک نسخه WebP از هر تصویر در صفحه می گردد . اگر مرورگر از WebP پشتیبانی کند و یک WebP هم موجود باشد ، از تصویر WebP به جای JPEG یا PNG استفاده می کند . این یک کار بسیار مفید است و زمان زیادی را هم صرفه جویی می کند ، زیرا لازم نیست دستور زبان عنصر <img> را تغییر دهید یا حتی لازم نیست که پسوند تصویر را به .webp تغییر دهید .

پس از بازنگری داده هایمان متوجه شدیم که WebP polyfill (در آزمایش دوم ) ساده ترین و سبک ترین راه حلی است که در تمام مرورگرها کار می کند ، اما معیار شاخص سرعت در زمان استفاده از این روش ما را به طور کامل تحت تاثیر خود قرار نداد . به نظر می رسید که WebP polyfill تصاویر را از نظر بصری بدتر از آزمایش کنترل JPEG و سایر اجراها به جز در iOS بارگذاری می کند .

علاوه بر این ما متوجه شدیم که در دستگاه های دارای سیستم عامل iOS ، اندازه فایل ها ۱۰۰KB از سایر دستگاه ها بزرگتر است . ما در آزمایش هایمان متوجه شدیم که در iOS5.1 ، و در IE8 و IE9 تصاویر WebP سه بار دانلود می شوند . در حالیکه دو درخواست اضافه دیگر ایده آل نیستند ، این اندازه هنوز از معادل JPEG خود کوچکتراست . ما در نسخه های به روزشده iOS این را آزمایش نکرده ایم ، بنابراین ممکن است این مشکل رفع شده باشد . ما قصد داریم که  از این اجرا به صورت ابتدایی استفاده کنیم ، زیرا مرورگرها در این صورت بهتر از آن پشتیبانی می کنند .

نگاهی به آینده

گروه ما قصد دارد روش امتحان شده در آزمایش سوم را با استفاده از عنصر <picture>  اجرا کند ، تایک تصویر WebP را برای مرورگرانی که از آن پشتیبانی می کند ، فراهم سازد ، و در زمانی که از  WebPپشتیبانی نمی شود یک JPEG یا PNG را فراهم سازد . ما بر این باوریم که این بهترین مسیر برای ارتقای تدریجی است ، و هنوز امکان بازگشت به فرمت قبلی تصویر را فراهم می سازد . ما در اصل با اجرای WebP polyfill پیش رفتیم اما دریافتیم که نتیجه آن ایده آل نیست .

WebP فرمت های JPEG یا PNG را از تصاویر بیرون نمی کند ، اما یک ابرابزار است که می توانید به ابزارخانه خود اضافه کنید . برای استقبال از WebP آماده باشید ، و نیز آماده باشید تا در پروژه جدید مقایسه ها و آزمایش های خودتان را انجام دهید .

حسن موحد

عاشق طراحی وب سایت هستم و 8 سال هست در این زمینه فعالیت می کنم و تمرکزم بر روی خرسند نگه داشتن مشتری است .

ارسال نظر