اگر میخواهید سرعت سایت وردپرس خود را افزایش دهید ، کاهش حجم فایل تصاویر شما بازده قابل توجهی را در سرمایهگذاری شما به ارمغان میآورد. به طور متوسط، تصاویر تقریباً نیمی از اندازه فایل یک صفحه وب را تشکیل می دهند، بنابراین حتی پیشرفت های جزئی نیز می تواند نتایج بسیار خوبی داشته باشد. WebP می تواند در این زمینه به شما کمک زیادی کند!
WebP یک فرمت تصویر مدرن است که می تواند به شما کمک کند تا اندازه تصاویر خود را بدون تغییر در ظاهر آنها کاهش دهید. به طور متوسط، یادگیری نحوه تبدیل یک تصویر به WebP می تواند اندازه فایل آن را تا ۲۵-۳۵٪ کاهش دهد بدون اینکه کیفیت قابل تشخیصی کاهش یابد.
اکثر مرورگرهای مدرن و وردپرس ۵.۸+ از WebP خارج از جعبه پشتیبانی می کنند. در این مقاله از ایوسی، ما عمیقاً به این قالب تصویر جدید هیجان انگیز می پردازیم و به شما نشان می دهیم که چگونه می توانید از عالی بودن آن استفاده کنید.
آماده؟ بیا شروع کنیم!
WebP چیست؟
بنابراین، فایل WebP چیست؟ به طور خلاصه، WebP یک فرمت تصویری است که توسط گوگل برای بهینه سازی تصاویر بهتر از فرمت های تصویر رایج (در آن زمان) توسعه یافته است. به عنوان مثال، شما فرمت های تصویری مانند JPEG یا JPG و PNG دارید.
توجه: بررسی کنید که چگونه انواع مختلف فایل های تصویری می توانند بر سرعت وب سایت شما تأثیر بگذارند.
WebP روی ارائه یک فایل تصویری یکسان، فقط با اندازه فایل کوچکتر تمرکز دارد. با کاهش اندازه فایل های تصویری خود، همچنان می توانید همان تجربه را به بازدیدکنندگان وب سایت خود بدهید، اما سایت شما سریعتر بارگذاری می شود .
به عنوان مثال، در مطالعه فشرده سازی WebP گوگل ، گوگل دریافت که یک فایل تصویری WebP به طور متوسط است:
- ۲۵-۳۴٪ کوچکتر از یک تصویر JPEG قابل مقایسه است.
- ۲۶٪ کوچکتر از یک تصویر PNG قابل مقایسه است.
به همین دلیل است که اگر سایت خود را از طریق PageSpeed Insights اجرا می کنید ، یکی از بسیاری از توصیه ها این است که تصاویر را در قالب های نسل بعدی مانند WebP ارائه کنید :
پس چگونه قالب WebP گوگل به این کاهش در اندازه فایل دست می یابد؟
اول، از فشردهسازی بدون اتلاف و اتلاف پشتیبانی میکند ، بنابراین کاهش دقیق به این بستگی دارد که از فشردهسازی با اتلاف یا بدون تلفات استفاده میکنید.
با فشرده سازی با اتلاف، WebP از چیزی به نام “کدگذاری پیش بینی کننده” برای کاهش اندازه فایل استفاده می کند. کدگذاری پیشبینیکننده از مقادیر پیکسلهای همسایه در یک تصویر برای پیشبینی مقادیر استفاده میکند و سپس تنها تفاوت را رمزگذاری میکند. این بر اساس رمزگذاری قاب کلید VP8 است.
Lossless WebP از مجموعه بسیار پیچیده تری از روش ها استفاده می کند که توسط تیم WebP توسعه داده شده است.
اگر میخواهید در مورد تکنیکهای فشردهسازی WebP به تفصیل بیاموزید، این مقاله نقطه شروع خوبی است .
کدام مرورگرهای وب از WebP پشتیبانی می کنند؟
برای اینکه تصاویر WebP کار کنند، مرورگر وب بازدیدکننده باید از آنها پشتیبانی کند. متأسفانه، در حالی که پشتیبانی مرورگر بسیار رشد کرده است، سازگاری WebP هنوز هم جهانی نیست .
تصاویر WebP توسط مرورگرهای محبوبی مانند:
- کروم ( دسکتاپ و موبایل )
- فایرفاکس ( دسکتاپ و موبایل )
- مایکروسافت اج
- iOS و macOS Safari ( فقط macOS 11 Big Sur و نسخه های جدیدتر )
- اپرا ( دسکتاپ و موبایل )
در زمانی که ما در حال نوشتن این پست هستیم، Safari فقط تا حدی از تصاویر WebP پشتیبانی می کند.
اینترنت اکسپلورر همچنین فاقد پشتیبانی WebP است (اما Edge از WebP پشتیبانی می کند زیرا مبتنی بر Chromium است). با این حال، استفاده از اینترنت اکسپلورر به کمتر از ۱٪ از کل کاربران اینترنت کاهش یافته است. این یک موهبت برای همه افراد در وب است!
در مجموع، حدود ۹۵ درصد از کاربران اینترنت از مرورگری استفاده می کنند که از WebP پشتیبانی می کند. بنابراین، در حالی که مطمئناً از پشتیبانی اکثریت برخوردار است، این ۵٪ یک مانع کوچک است، به خصوص زمانی که کاربران Safari در نسخههای قدیمی macOS هستند. در آموزش WebP وردپرس خود در زیر، به شما نشان خواهیم داد که چگونه این کار را انجام دهید تا همه بازدیدکنندگان شما یک تجربه عالی داشته باشند.
مقایسه اندازه WebP در مقابل JPG در مقابل PNG
طبق آزمایشات گوگل، تصاویر WebP عبارتند از:
- ۲۵-۳۴٪ کوچکتر از تصاویر JPEG قابل مقایسه است.
- ۲۶% کوچکتر از تصاویر PNG مشابه.
اگر میخواهید درباره روششناسی گوگل بیشتر بدانید، میتوانید پیوندهای مستقیم به نتایج کامل را در زیر بیابید:
هر دو تست بر اساس بیش از ۱۱۰۰۰ تصویر هستند، از جمله:
- تصویر معروف لنا
- ۲۴ تصویر از مجموعه تصاویر رنگی واقعی کداک
- ۱۰۰ تصویر از Tecnick.com
- نمونه تصادفی از ۱۱۰۰۰+ تصویر از جستجوی تصویر گوگل
نحوه استفاده از تصاویر WebP در وردپرس
با شروع وردپرس ۵.۸، میتوانید از فرمت تصویر WebP مانند فرمتهای JPEG، PNG و GIF استفاده کنید. فقط تصاویر خود را در کتابخانه رسانه خود آپلود کنید و آنها را در محتوای خود قرار دهید. از آنجایی که WordPress نسخه ۵.۸+ به طور پیش فرض از قالب WebP پشتیبانی می کند، برای آپلود تصاویر WebP نیازی به نصب افزونه های شخص ثالث ندارید. این باید برای اکثر موارد استفاده معمول کافی باشد.
برای شروع فوری، می توانید به پرایمر سریع ما در مورد استفاده از تصاویر WebP در WordPress نسخه ۵.۸+ مراجعه کنید.
با این حال، حدود ۵ درصد از مردم (عمدتاً کاربران سافاری در macOS های قدیمی) از مرورگر وب استفاده می کنند که از WebP پشتیبانی نمی کند. اگر تصاویر WebP را تبدیل کنید و مستقیماً از آنها در محتوای خود استفاده کنید ، آن بازدیدکنندگان نمی توانند تصاویر شما را ببینند، که تجربه مرور آنها را خراب می کند.
همچنین، تولید تصاویر WebP به سادگی دریافت یک تصویر JPG/JPEG نیست، که فرمت فایل تصویری پیشفرض در اکثر دوربینها، گوشیهای هوشمند و کتابخانههای تصویر آنلاین است . وردپرس از تبدیل خودکار تصویر به فرمت WebP (هنوز!) پشتیبانی نمی کند.
ناراحت نباش! راه حلی هست
میتوانید از یک افزونه وردپرس استفاده کنید که تصاویر اصلی شما را به فرمت WebP تبدیل میکند و همچنین در صورتی که مرورگر بازدیدکننده از WebP پشتیبانی نمیکند، تصویر اصلی را به عنوان بازگشتی ارائه میکند.
به عنوان مثال، اگر یک فایل JPEG را در سایت خود آپلود کنید، این افزونه:
- فایل JPEG را به WebP تبدیل کنید و نسخه WebP را برای کروم، فایرفاکس، اج و غیره ارائه دهید.
- فایل JPEG اصلی را به بازدیدکنندگانی که با Safari (در نسخههای macOS قدیمیتر) و سایر مرورگرهایی که از WebP پشتیبانی نمیکنند، مرور میکنند، نشان دهید.
به این ترتیب، همه میتوانند تصویر شما را ببینند و همه سریعترین تجربه ممکن را به دست میآورند.
در زیر، برخی از بهترین افزونههای WebP WordPress را بررسی میکنیم.
Lossless در مقابل Lossy Compression
شما می توانید بین فشرده سازی بدون اتلاف و فشرده سازی با تلفات فایل های خود یکی را انتخاب کنید. اگرچه هر دو روش فایل های تصویری شما را فشرده می کنند و ابرداده های آنها را حذف می کنند، تفاوت زیادی بین آنها وجود دارد:
- بهینه سازی تصویر بدون اتلاف: فشرده سازی بدون اتلاف تصویر تاثیری بر کیفیت تصاویر شما ندارد. اگر کیفیت تصویر برای شما مهمتر از سرعت است، باید این گزینه را انتخاب کنید.
- بهینهسازی تصویر از دست رفته: فشردهسازی تصویر با کاهش کیفیت ممکن است کیفیت تصاویر شما را کاهش دهد. این گزینه را برای به حداکثر رساندن و اولویت دادن به سرعت بر کیفیت تصویر انتخاب کنید.
در مرحله بعد، ما به چند افزونه قابل نصب وردپرس برای بهینه سازی نگاه می کنیم.
ShortPixel
ShortPixel یک افزونه محبوب بهینه سازی تصویر وردپرس است که می تواند به شما کمک کند تا تصاویری را که در سایت وردپرس خود آپلود می کنید به طور خودکار تغییر اندازه و فشرده کنید.
ShortPixel به عنوان بخشی از لیست ویژگی های خود، همچنین می تواند به شما کمک کند تا تصاویر را به طور خودکار به WebP تبدیل کنید و آن تصاویر را به مرورگرهایی که از آن پشتیبانی می کنند ارائه دهید.
ShortPixel هر اندازه تصویر وردپرس را که بهینه سازی می کنید به عنوان اعتبار حساب می کند. بنابراین اگر میخواهید چندین اندازه تصویر کوچک را بهینه کنید، یک تصویر میتواند از اعتبارات متعددی استفاده کند. هیچ محدودیتی برای اندازه فایل برای تصاویر وجود ندارد.
میتوانید اعتبارات ShortPixel خود را در وبسایتهای نامحدود پخش کنید – هیچ محدودیتی برای هر سایت وجود ندارد ( و همه وبسایتهای شما میتوانند از یک حساب ShortPixel استفاده کنند ).
برای استفاده از ShortPixel برای ارائه تصاویر WebP در وردپرس، باید افزونه را از WordPress.org نصب کنید و کلید API خود را اضافه کنید ( که می توانید با ثبت نام برای یک حساب ShortPixel رایگان دریافت کنید ).
در تب General ، میتوانید تنظیمات اولیه را برای نحوه عملکرد بهینهسازی تصویر تنظیم کنید. به عنوان مثال، از چه سطح فشرده سازی استفاده شود و اینکه آیا اندازه تصاویر را تغییر دهیم یا نه:
برای فعال کردن تصاویر WebP، به تب Advanced بروید و:
- کادر WebP Images را علامت بزنید
- کادر تحویل نسخههای WebP را علامت بزنید… (این پس از علامت زدن اولین کادر ظاهر میشود)
- دکمه رادیویی استفاده از نحو تگ <PICTURE> را انتخاب کنید (این پس از علامت زدن کادر قبلی ظاهر می شود)
- پیش فرض را فقط از طریق انتخاب قلاب وردپرس رها کنید
سپس، تغییرات خود را ذخیره کنید.
تصور کنید
Imagify یک افزونه محبوب بهینه سازی تصویر از همان توسعه دهنده WP Rocket است .
می تواند به طور خودکار تصاویری را که در سایت وردپرس خود آپلود می کنید فشرده و تغییر اندازه دهد. سپس، میتواند به شما کمک کند تا آنها را به WebP تبدیل کنید و با مرورگرهایی که از آن پشتیبانی میکنند، آن نسخهها را به بازدیدکنندگان ارائه دهید.
از نظر ویژگی ها، ShortPixel و Imagify شباهت های زیادی دارند. مهم ترین تفاوت زمانی رخ می دهد که به قیمت گذاری نگاه می کنید. در حالی که ShortPixel بر اساس تصاویر بدون محدودیت اندازه برای هر تصویر از شما هزینه می گیرد، Imagify بر اساس اندازه کلی فایل و بدون محدودیت تصویر از شما هزینه می گیرد.
بنابراین اگر نیاز به بهینه سازی تعداد زیادی تصاویر بزرگ دارید، رویکرد ShortPixel ممکن است ارزان تر باشد. اما اگر نیاز به بهینه سازی تعداد زیادی تصاویر کوچک دارید، رویکرد Imagify ممکن است مقرون به صرفه تر باشد.
Imagify دارای یک سطح رایگان محدود است که امکان بهینه سازی ۲۵ مگابایتی در ماه را فراهم می کند. پس از آن، برنامه های پولی از ۴.۹۹ دلار در ماه برای حداکثر ۱ گیگابایت یا ۹.۹۹ دلار برای یک بار اعتبار ۱ گیگابایت شروع می شود.
مانند ShortPixel، می توانید محدودیت های حساب خود را در وب سایت های نامحدود گسترش دهید.
برای استفاده از Imagify برای ارائه تصاویر WebP وردپرس، باید افزونه را از WordPress.org نصب کنید و کلید API خود را برای شروع اضافه کنید.
هنگامی که افزونه را فعال کردید، می توانید از کادر تنظیمات عمومی برای انتخاب سطح فشرده سازی خود استفاده کنید.
برای فعال کردن تصاویر WebP، به بخش Optimization رفته و بخش WebP Format را پیدا کنید :
- کادر ایجاد نسخههای webp از تصاویر را علامت بزنید
- برای نمایش تصاویر در قالب webp، کادر را علامت بزنید …
- دکمه رادیویی را برای استفاده از تگ های <تصویر> انتخاب کنید
Optimole
Optimole یک افزونه بهینه سازی تصویر وردپرس است که کمی متفاوت از Imagify و ShortPixel عمل می کند. Optimole می تواند به طور خودکار تصاویر شما را فشرده و اندازه آن را تغییر دهد. با این حال، دو ویژگی قابل توجه دیگر نیز دارد:
- این می تواند تصاویر شما را از طریق CDN خود (تجهیز شده توسط Amazon CloudFront) ارائه دهد.
- این تصاویر تطبیقی بلادرنگ را ارائه می دهد که به موجب آن Optimole تصویر با اندازه بهینه را برای هر بازدید کننده ارائه می دهد. به عنوان مثال، شخصی که در یک صفحه نمایش کوچک مرور می کند، تصویری با وضوح پایین تر از کسی که در صفحه رتینا مرور می کند، دریافت می کند.
این رویکرد مشابه سایر سرویسهای بهینهسازی/دستکاری بلادرنگ مانند Cloudinary، imgix، KeyCDN Image Processing و غیره است.
Optimole همچنین میتواند تصاویر WebP را با مرورگرهایی که از آن به عنوان بخشی از بهینهسازی تصویر بلادرنگ پشتیبانی میکنند، به بازدیدکنندگان ارائه دهد.
Optimole یک طرح رایگان محدود دارد که می تواند تصاویر را به حدود ۵۰۰۰ بازدید کننده در ماه ارائه دهد. پس از آن، برنامه های پولی از ۱۹ دلار در ماه برای ۲۵۰۰۰ بازدیدکننده شروع می شود.
برای شروع، باید افزونه را از WordPress.org نصب کنید و آن را با یک کلید API ( که می توانید با ثبت نام برای یک حساب Optimole رایگان دریافت کنید ) فعال کنید.
پس از انجام این کار، Optimole به طور خودکار بهینه سازی تصاویر شما و ارائه آنها را از طریق CDN خود آغاز می کند . پشتیبانی WebP به طور پیش فرض روشن است، بنابراین نیازی به فعال کردن آن به صورت دستی نیست.
برای پیکربندی تنظیمات دیگر، مانند سطوح فشرده سازی و رفتار مقیاس، می توانید به Media → Optimole → Settings بروید :
خلاصه
تصاویر سایت وردپرس شما بخش بزرگی از اندازه فایل یک صفحه متوسط را تشکیل می دهند. اگر بتوانید راه هایی برای کاهش اندازه تصاویر خود بیابید، می توانید سرعت سایت خود را بدون آسیب رساندن به تجربه کاربر افزایش دهید. WebP یک فرمت تصویر مدرن است که دقیقاً این کار را با ارائه کاهش ۲۵٪ در اندازه فایل در مقایسه با فایل های JPEG یا PNG مقایسه می کند.
حدود ۹۵ درصد از کاربران اینترنت در حال حاضر از مرورگری استفاده می کنند که از WebP پشتیبانی می کند. نسخه های وردپرس ۵.۸+ نیز اکنون از WebP خارج از جعبه پشتیبانی می کنند. بنابراین دلیلی وجود ندارد که از آن استفاده نکنید.
با این حال، تعداد کمی از مرورگرها، به ویژه Safari در نسخههای قدیمی macOS، هنوز از WebP پشتیبانی نمیکنند. بنابراین، شما هنوز نمی توانید تصاویر WebP را به همه بازدیدکنندگان ارائه دهید. برای رفع این مشکل، میتوانید از یک افزونه وردپرس استفاده کنید که تصاویر را به WebP تبدیل میکند و نسخههای WebP را برای بازدیدکنندگانی که مرورگرهایشان از آن پشتیبانی میکنند، ارائه میکند، در حالی که از تصاویر اصلی برای بازدیدکنندگانی که مرورگرهایشان پشتیبانی نمیکنند، استفاده میکند.
برای تاکتیکهای بیشتر برای بهینهسازی تصاویر، راهنمای کامل ما را برای بهینهسازی تصاویر برای عملکرد وب بررسی کنید .
اگر در مورد استفاده از WebP در وردپرس سؤالی دارید، لطفاً در نظرات زیر از ما بپرسید!