حامد خاکباز
حامد خاکباز
خواندن ۳ دقیقه·۲ سال پیش

آشنایی با فرمت WebP در تصاویر وب

فرمت WebP چیست؟ فرمت WebP چه نیازهایی را پوشش می‌دهد؟ چگونه می‌توان فرمت WebP را روی صفحات وب فعال‌سازی کرد؟ منظور از Predictive coding چیست؟ در این مقاله به تحلیل و بررسی فرمت WebP می‌پردازیم.

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

معرفی فرمت WebP در تصاویر

فرمت WebP خود یک نوع الگوریتم فشرده‌سازی هست که در سال 2010 توسط developer های شرکت google معرفی شد. هدف از develop این فرمت ایجاد یک جایگزین سبک برای jpeg ، png ، gif و ... بود. فرمت WebP بدون از دست دادن المان های اصلی image ، آن را فشرده‌سازی و سبک می‌کند. به عبارت فنی‌تر فرمت WebP یک فرمت اصطلاحن lossless هست که تا جای ممکن کیفیت را تحت تاثیر قرار نمی‌دهد. طبق تست‌های انجام شده اگر یک عکس png به webp تبدیل شود تا 26 درصد کوچک‌تر وسبک‌تر می‌شود. به این ترتیب WebP باعث ایجاد user experience بهتری در سایت می‌شود. چراکه تایم کاربر کمتر هدر میرود، از طرفی هم باعث تسهیل فرآیند لود سایت در مرورگر می‌شود. همچنین WebP خصوصن در سایت‌هایی که تعداد بالای تصاویر را لود می‌کنند باعث صرفه‌جویی و کاهش سایز فضای درنظر گرفته شده برای ذخیره‌سازی در Storage نیز می‌شود.

اما الگوریتم‌های WebP چگونه کار می‌کنند؟ برای این‌که کیفیت تصویر کم نشود، WebP در فرآیند encode و decode خود از روش Predictive coding استفاده می‌کند، در این روش از روی اطلاعات pixel های اطراف برای حدث زدن سایر block ها استفاده می‌شود و کدک آن به شکلی هست که تنها فریم‌های اساسی را compress می‌کند و موارد غیرضروری را نادیده‌ می‌گیرد. در واقع predictive coding یک شیوه‌ی نوین و منحصربه‌فرد برای ساخت و کانورت تصاویر است. چراکه از الگوریتم‌هایی استفاده می‌کند که pixel ها را آنالیز کرده و می‌تواند سایر pixel ها و رنگ‌های اطراف را پیش‌بینی کند.

به طور کلی در تصایر دو نوع compression وجود دارد :

الف) نوع Lossless:

در این نوع compression تعداد بیت های دیتا کمتر می‌شود ولی کیفیت تصویر کاهش نمی‌یابد.

ب) نوع Lossy:

در این نوع compression علاوه بر کاهش سایز تصویر، کیفیت آن نیز کاهش می‌یابد.

فرمت WebP در compression از نوع Lossless استفاده می‌کند. به فرمت webp در برخی ابزارها next-generation format هم گفته می‌شود. همچنین از معایب استفاده از WebP می‌توان به پشتیبانی نشدن در برخی مرورگرها مثل نسخه های قدیمی safari و internet explorer اشاره کرد، همچنین WebP برای استفاده در سایت‌هایی که می‌خواهند تصایر را با بیشترین حد کیفیت ارائه کنند مناسب نیست چراکه در نمایش جزییات تصایر کیفیت بالا نمی‌تواند از کاستن کامل کیفیت جلوگیری کند.

اما برای اینکه WebP را روی سایت پیاده‌سازی و فعال کنیم، روش‌های زیادی وجود دارد، مثلن در wordpress پلاگین‌هایی هست تحت عنوان image optimizer که فرمت WebP را پشتیبانی می‌کنند. یعنی حتا اگر فایل‌های اصلی WebP نباشند، به کمک این پلاگین‌ها به شکل اتوماتیک تصاویر پیش از نمایش به فرمت WebP کانورت می‌شوند. این کار را سرویس‌های توزیع محتوا یا CDN ها نیز انجام می‌دهند. که در CDN آروان تحت عنوان قابلیت شتاب‌دهی وب شناخته می‌شود.

استفاده از فرمت WebP باعث بالا رفتن rank سایت در گوگل می‌شود. در واقع فرمت WebP امروزه به عنوان یکی از فاکتورهای حیاتی SEO محسوب می‌شود. به طور خلاصه؛ توصیه می‌شود فرمت‌هایی نظیر jpeg و png برای کاربران سایت به WebP تبدیل شوند. CDN ها این قابلیت را می‌توانند به ساده‌گی فراهم کنند.

فرمت webppredictive codinglossleslossyseo
Cloud Engineer
شاید از این پست‌ها خوشتان بیاید