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

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

گفته شده که تصاویر به اندازه هزار واژه ارزش دارند . اما تصویر آنلاین می تواند به اندازه هزار کیلوبایت یا بیشتر ارزش داشته باشد ! آرشیو HTTP نشان می دهد که تصاویر به طور میانگین ۶۴ % اندازه کلی یک صفحه وب را تشکیل می دهد . بنابراین ، بهینه سازی تصویر نقش مهمی در صفحات وب دارند ، به ویژه که می دانیم اکثر کاربران درصورتی که بارگذاری درخواستشان  چند ثانیه طول بکشد ممکن است بی خیال شوند و حتی دیگر سراغ آن نیایند !

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

پیدایش WebP یکی از تصاویر وب امروزی

WebP نوعی فرمت تصویر است که در سال ۲۰۱۰ ایجاد شد و در حال حاضر گوگل آن را توسعه می دهد . این فرمت امکان فشرده سازی بدون اتلاف و با اتلاف را برای تصاویر فراهم می کند . چندین شرکت از جمله Google ، Facebook و eBay بر روی نام WebP مبارزه می کنند !

ما در کشورمان همواره تکنیک هایی را آزمایش می کنیم که عملکرد وب سایت را بهبود می بخشند . بنابراین ، چند آزمایش A/B انجام دادیم تا تاثیر WebP بر کیفیت تصویر و بهترین روش اجرای آن در پروژه های مشتریان را شناسایی کنیم .

یکی از مهمترین دلایلی که ما به استفاده از WebP روی آوردیم ، اندازه کوچکتر فایل بود .

به نظر گوگل :

  • اتلاف در تصاویر فرمت WebP به میزان ۲۶ در صد از  PNG کمتر است .
  • فایلهای تصاویر پراتلاف WebP در یک شاخص تشابه ساختاری معادل (SSIM) بین ۲۵ تا ۳۴ درصد از تصاویر JPEG کمتر است .
  • WebP از شفافیت بدون اتلاف ( که به نام کانال آلفا هم معروف است ) تنها با ۲۲ درصد بایت بیشتر پشتیبانی می کند

آزمایش ما نظرهای مخالف و موافقی را درباب فرمت تصویر WebP آشکار کرده است :

مخالف

موافق

پشتیبانی ضعیف مرورگر

اندازه کوچکتر فایل

مصنوعی سازی با ظاهر پلاستیکی

الگوریتم فشرده سازی بهبود یافته

رابط خروجی ضعیف

درجه بندی روان تر رنگ ها

ماسک کانال آلفا

 

کیفیت تصویر

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

 

01

تفاوت در کیفیت بین JPEG و WebP

02

تفاوت در کیفیت عکس بزرگنمایی شده بین JPEG و WebP

درخصوص فرمت تصویر WebP نکات دیگری هم وجود دارند که باید به آن ها توجه کرد . تنظیمات فشرده سازی یک به یک با JPEG مطابقت ندارند . انتظار نداشته باشید که یک تصویر JPEG با ۵۰ درصد کیفیت با یک تصویر WebP با ۵۰ درصد کیفیت مطابقت داشته باشد . در مقیاس WebP به شدت افت می کند ، بنابراین ، با یک کیفیت بالا کارتان را شروع کرده و سپس ادامه دهید .

یک برگ برنده دیگر امکان افزودن ماسک کانال آلفاست ، که به یک PNG شباهت زیادی دارد . به هرحال ، بی شباهت به همتای بدون اتلاف خود ، اغلب می توانید یک تصویر WebP قابل استفاده را تا حدود یک دهم اندازه معادل PNG آن فشرده کنید . این یکی از نکات برجسته واقعی استفاده از WebP است که امکان استفاده ازگزینه ها و ویژگیهایی را فراهم می کند که در صورت نبودشان به علت اندازه بزرگ عکس می توانست سرعت سایت را بسیار پایین بیاورد . یک نمونه واقعی ، تصویری با فرمت JPEG با حجم ۸۸۰KB ( با استفاده از کانال آلفا ۲۴ بیت ) بود که تا حجم ۴۱KB فشرده شد و این یعنی ۹۵ درصد ذخیره در حجم . با اینکه این کار چندان عادی نیست ، اما امکانات آن را نشان می دهد .

 

 

03

 تفاوت در بافت تصویر

برای کاهش بیشتر اندازه ، می توانیم متادیتا را با برداشتن تیک کادر “ Save Metadata” در کادر “Save” در برنامه ویرایش تصویر حذف کنیم . برای صرفه جویی بیشتر در فشرده سازی می توانیم گزینه “lossy alpha channel” را انتخاب کنیم . تنظیمات کیفیت مربوط به کانال آلفا آن تصاویر را منعکس می کند . برای مثال ، یک تصویر با ۵۰ درصد کیفیت ، یک کانال آلفا با ۵۰ درصد افت کیفیت خواهد داشت . ما در آزمایشمان انتظار مصنوعی سازی در اطراف لبه های ماسک گذاری شده را داشتیم ، اما در کل تصویر نیز تغییرات فشرده سازی برجسته ای وجود داشت . بدون شک ما این را به عنوان گزینه ای برای فشرده سازی بیشتر فایل درنظر می گیریم ، اما هنگام انجام این کار می توانستیم کیفیت تصویر را به دقت زیرنظر بگیریم . علاوه براین ، مراقب ادغام های ناخواسته در کانالهای آلفا که به تدریج محو می شوند باشید.

04

تفاوت در کیفیت کانال آلفا

حسن موحد

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

ارسال نظر