مرکز آموزش میهن وب هاست

تصاویر تقریبا 50 درصد از حجم یک صفحه از سایت را به خود اختصاص می دهند. پس هر چیزی که بتواند باعث بهینه سازی تصاویر و کاهش حجم آنها شود در نهایت منجر به آزاد شدن بخش زیادی از فضای هاست شما می گردد. در نظر داشته باشید که مهمترین نکته برای تغییر فرمت تصاویر به webp بارگذاری سریعتر صفحات سایت است. در عین حال کاربران نباید با تصاویر بی کیفیت نیز روبرو شوند. خوشبختانه، با فرمت تصویر WebP، می توانید تصاویر را با حجم 26 درصد کمتر از فرمت PNG و 25-34 درصد کوچکتر از JPEG روی سایت منتشر کنید در حالیکه آسیبی به کیفیت تصاویر نیز وارد نمی شود. در این آموزش فرمت WebP معرفی می گردد و نحوه استفاده از این قالب تصویر در وبسایت های وردپرسی توضیح داده می شود تا مشاهده کنید چگونه یک فرمت تصویری می تواند حجم صفحات سایت شما را به صورت چشمگیری کاهش دهد.

WebPro چیست؟
WebP یک فرمت فایل تصویری است که توسط یک تیم متخصص و خبره در Google ایجاد شده است تا جایگزینی برای فرمت های JPEG، PNG و GIF باشد. این در حالی است که از فشرده سازی، شفافیت و انیمیشن ها نیز پشتیبانی می کند. WebPro نخستین بار در سپتامبر 2010 به عنوان یک استاندارد جدید برای فایل های گرافیکی به صورت فشرده شده در وب منتشر شد. فایل های تولیده شده در مقایسه با JPEG دارای کیفیت یکسان و حجم کمتر می باشند. از سال 2012 این فرمت جایگزینی برای فرمت PNG معرفی شد. فشرده سازی تصاویر بدون افت کیفیت مهم ترین ویژگی فرمت WebPro است. در نمونه های زیر از گالری WebP گوگل نمی توانید تفاوت کیفیت قابل توجهی بین تصاویر JPEG در سمت چپ و نسخه های WebP در سمت راست مشاهده کنید. تصاویر WebP بیش از 30٪ کوچکتر از تصاویر با فرمت JPEG هستند.

تصویر (1)

بنابراین با کاهش اندازه فایل های تصویری با استفاده از یک قالب مانند WebP همراه با تکنیک های دیگر مانند افزونه WP Rocket، می توانید تصاویری کوچکتر را ارائه دهید و اطمینان حاصل کنید که صفحات شما سریع تر از قبل بارگذاری می شوند.

پشتیبانی مرورگر ها از WebP

برای اینکه بتوانید از تصاویر WebP در سایت خود استفاده کنید، مرورگر وب بازدیدکننده باید از آنها پشتیبانی کند.

تصاویر WebP توسط مرورگرهای محبوبی مانند:

• کروم (رومیزی و موبایل)
• فایرفاکس (دسکتاپ و موبایل)
• مایکروسافت اج
• iOS و macOS Safari (فقط macOS 11 Big Sur و نسخه های جدیدتر)
• اپرا (رومیزی و موبایل)
• در زمان نوشتن این مقاله، سافاری فقط تا حدی از تصاویر WebP پشتیبانی می کند.

اینترنت اکسپلورر همچنین فاقد پشتیبانی WebP است (اما Edge از WebP پشتیبانی می کند زیرا بر اساس Chromium است). با این حال، استفاده از اینترنت اکسپلورر در بین کاربران به کمتر از 1٪ کاهش یافته است.

در مجموع، حدود 95 درصد از کاربران اینترنت از مرورگری استفاده می کنند که از WebP پشتیبانی می کند. بنابراین، webp از پشتیبانی اکثریت مرورگرها برخوردار است، 5٪ باقیمانده نیز نمی تواند مشکلی برای استفاده از این فرمت در سایت ایجاد کند.

تصویر (2)

نحوه استفاده از فرمت WebP در وردپرس
در اینجا مشکل دیگری برای استفاده از فرمت WebP در وردپرس وجود دارد، متاسفانه به صورت پیش فرض وردپرس از آن پشتیبانی نمی کند.
در حالی که وردپرس از محبوب ترین فرمت های فایل تصویری، از جمله JPEG، PNG، GIF، و ICO پشتیبانی می کند، اما هنوز از فرمت WebP به صورت پیشفرض نمی توان در سایت وردپرسی استفاده کرد. این بدان معنی است که شما نمی توانید یک فایل WebP را در کتابخانه رسانه وردپرس خود آپلود کنید زیرا با خطای زیر روبرو می شوید:

تصویر (3)

اما نگران نباشید با کمک افزونه ای که در ادامه معرفی می شود می توانید یک تصویر با فرمت WebP را در وردپرس آپلود نمائید.

با استفاده از افزونه WebP Express می توانید تصاویر سایت خود را به فرمت webp تغییر دهید. این افزونه از کتابخانه WebP Convert برای تبدیل تصاویر به webp استفاده می کند. WebP Convert قادر است تصاویر را با استفاده از چندین روش تبدیل نماید. روش های تبدیل عبارتند از: cwebp، gd، imagick. این افزونه با تبدیل فرمت های تصویری، مشاهده تصاویر سایت شما را که با فرمت webp هستند برای کاربرانی که از Safari استفاده می کنند ممکن می سازد. تصویری از تنظیمات افزونه را در ادامه می توانید مشاهده کنید:

تصویر (4)

قابلیت شتاب دهنده سایت Jetpack (که قبلا نیز به نام Photon شناخته می شد) نیز به طور خودکار JPEG ها و PNG ها را به فرمت تصویر WebP تبدیل می کند.
در زیر یک مثال از کیفیت فشرده سازی است که API Photon در هنگام تنظیم روی 50٪ ارائه می دهد را می توانید مشاهده کنید:

تصویر (5)

همچنین می توانید از یک CDN استفاده کنید، کاربران Cloudflare می توانند با پرداخت هزینه به این قابلیت دسترسی داشته باشند که تبدیل خودکار WebP را نیز ارائه می دهد و باعث می شود تمامی کاربران با هر مرورگری قادر به مشاهده تصاویر سایت شما باشند. اما خبر خوش برای کاربران افزونه WP Rocket این است که در نسخه 3.3 این افزونه از WebP پشتیبانی خواهد شد.

مقایسه فرمت JPEG با WebP:
شش تصویر تصادفی JPEG از Unsplash دانلود شد، تصاویر دانلود شده فشرده شدند تا بررسی شود چه میزان می توان حجم تصاویر را کم کرد. سپس تصاویر اصلی به WebP تبدیل شدند تا میزان فشرده سازی آن ها قابل مقایسه باشد. در تصویر زیر می توانید این مقایسه را مشاهده کنید:

تصویر (6)

تبدیل فرمت تصویر به WebP به طور متوسط باعث کاهش 50٪ حجم تصاویر شد. در تصویر زیر به صورت واضح می توانید تفاوت دو فرمت JPEG با WebP را مشاهده کنید.

تصویر (7)

تصویر (8)

و اما در انتها :

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