نحوه استفاده از تصاویر .webp در وب سایت ها (راهنمای کامل)

WebP یک فرمت تصویری است که حدود 5 سال پیش توسط گوگل توسعه یافته است. معمولاً به عنوان گریان، این فرمت برای طراحان و توسعه دهندگان وب که هدفشان به حداقل رساندن و بهینه سازی اندازه تصاویر است، یک موهبت است.

در این راهنما، من روشن خواهم کرد که چرا WebP ممکن است راه حلی باشد که شما به دنبال آن بودید.

ویژگی های کلیدی WebP Images

اما ابتدا اجازه دهید به سرعت برخی از ویژگی های کلیدی WebP را لمس کنیم:

• پسوند فایل را دارد .webp.
• از هر دو روش فشرده سازی با اتلاف و بدون اتلاف پشتیبانی می کند.
• تصاویر در WebP با فشرده سازی با اتلاف معمولاً هستند 25-34٪ کوچکتر از همتایان JPEG خود.
• برای فشرده سازی بدون تلفات، تصاویر WebP می توانند باشند 25٪ کوچکتر از تصاویر PNG.
• این به طور کامل از شفافیت بدون ضرر، مشابه PNG با کانال آلفا پشتیبانی می کند.
• WebP حتی از انیمیشن پشتیبانی می کند و آن را به یک جایگزین بالقوه برای GIF های متحرک تبدیل می کند.

به طور خلاصه، WebP یک راه حل قوی برای کاهش اندازه تصاویر JPEG، GIF و PNG ارائه می دهد. اکنون، بیایید عمیق‌تر به نحوه استفاده حداکثری از این قالب بپردازیم.

آیا وب پی کوچکتر است؟ آزمایشی با تصاویر

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

JPEG در مقابل WebP

این یک تصویر JPEG است که از Pexels گرفته شده است.

حجم فایل: 165 کیلوبایت

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

حجم فایل: 101 کیلوبایت

و اینجا همان تصویر است که بهینه شده و سپس به فرمت WebP تبدیل شده است.

حجم فایل: 70 کیلوبایت

برای مرجع، در اینجا اندازه فایل های همان تصویر هنگام تبدیل به فرمت های دیگر آمده است:

• GIF: 285 کیلوبایت
• PNG 8: 241.2 کیلوبایت
• PNG 24: 657.6 کیلوبایت

PNG در مقابل WebP

در اینجا یک تصویر PNG با شفافیت وجود دارد. منبع

حجم فایل: 587 کیلوبایت

در اینجا همان تصویر PNG پس از بهینه سازی با tinypng است.

حجم فایل: 278 کیلوبایت

و در اینجا همان تصویر پس از تبدیل به فرمت WebP است.

حجم فایل: 112 کیلوبایت

GIF در مقابل WebP

پس از تبدیل به فرمت WebP، یک تصویر JPEG از 165 کیلوبایت به 70 کیلوبایت کاهش یافت و یک تصویر PNG از 587 کیلوبایت به 112 کیلوبایت کاهش یافت. برای آزمایش بیشتر کارایی WebP در GIF های متحرک، نتایج زیر را در نظر بگیرید:

خلاصه

در زیر یک جدول خلاصه ای از نتایج آزمایش آمده است:

بدون فرو رفتن عمیق در محاسبات، نتایج کاهش قابل توجهی در اندازه فایل ها را نشان می دهد.

علاوه بر این، به سختی تفاوت قابل توجهی در وضوح و وضوح تصویر وجود دارد. با توجه به اندازه کوچکتر فایل بدون کاهش کیفیت، بدیهی است که WebP فرمتی است که ارزش بررسی دارد.

ابزارهایی برای تبدیل تصاویر به WebP

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

WebPonize برای مک

WebPonize بدون شک ساده ترین و سریع ترین روش برای تبدیل تصاویر به فرمت WebP در مک است. به سادگی تصاویر خود را در WebPonize بکشید و رها کنید تا تبدیل را برای شما انجام دهد. این برنامه جزئیاتی مانند اندازه اصلی، اندازه تبدیل شده و درصد کاهش را ارائه می دهد.

WebPonize را دانلود کنید

Webpconv برای ویندوز

برای کاربران ویندوز، Webpconv یک ابزار ضروری است. این حتی در یک نسخه قابل حمل ارائه می شود و به شما امکان می دهد آن را مستقیماً از یک درایو فلش اجرا کنید.

دانلود Webpconv

تبدیل با خطوط فرمان

اگر میل به خطوط فرمان دارید و می خواهید رویکرد عملی تری داشته باشید، ابزارها cwebp و dwebp ممکن است برای شما باشد در حالی که cwebp تصاویر JPEG، PNG یا TIFF شما را به فرمت WebP تبدیل می کند، dwebp آنها را به PNG برمی گرداند. بیایید به این روند بپردازیم.

راهنمای زیر برای کاربران مک است. برای کسانی که در ویندوز و لینوکس هستند، لطفا اینجا را کلیک کنید.

همچنین بخوانید:
نحوه ذخیره تصاویر .WEBP به صورت JPG و PNG

مرحله 1: راه اندازی MacPorts

با اطمینان از نصب Xcode روی دستگاهتان شروع کنید. پس از تایید، مراحل زیر را دنبال کنید:

1. ابتدا MacPorts را دانلود و نصب کنید. اگر MacPorts قبلاً روی Mac شما تنظیم شده است، به مرحله بعدی بروید.
2. باز کن پایانه.
3. ورودی sudo port selfupdate و ضربه بزنید وارد. این اقدام MacPort ها را به جدیدترین نسخه خود به روز می کند.



4. سپس دستور را وارد کنید sudo port install webp و ضربه بزنید وارد. این مرحله نصب می کند libwebp، که کتابخانه WebP است.

با تکمیل این مراحل، اکنون آماده تبدیل تصاویر به WebP با استفاده از دستورالعمل های خط فرمان هستید.

مرحله 2: تبدیل و برگرداندن با خطوط فرمان

برای تبدیل تصاویر خود با استفاده از خطوط فرمان، دستورات زیر را دنبال کنید:

قالب:

cwebp -q (image_quality) (JPEG/PNG_filename) -o (WebP_filename)

مثال:

cwebp -q 80 example.png -o example.webp

برای برگرداندن تصاویر از WebP به فرمت اصلی خود، از دستور زیر استفاده کنید:

قالب:

dwebp (WebP_filename) -o (PNG_filename)

مثال:

dwebp image.webp -o image.png

اطلاعات تکمیلی: اگر روش‌های جایگزینی برای تبدیل می‌خواهید، در اینجا دستورالعمل‌هایی برای استفاده از وظایف Grunt و Gulp برای تبدیل فایل‌های JPG/PNG به فرمت WebP وجود دارد.

تبدیل با ابزارهای آنلاین

اگر ترجیح می دهید هیچ نرم افزاری را روی رایانه خود نصب نکنید، ابزارهای آنلاینی برای تبدیل تصاویر به WebP وجود دارد. در اینجا چند گزینه محبوب وجود دارد:

توجه داشته باشید: جستجوی سریع «تبدیل به WebP آنلاین» در Google ابزارهای بیشتری را به دست خواهد آورد.

با استفاده از افزونه فتوشاپ تبدیل کنید

برای کسانی که از فتوشاپ استفاده می کنند، یک پلاگین مفید وجود دارد که ذخیره تصاویر را مستقیماً در قالب WebP تسهیل می کند. این افزونه با مک و هر دو نسخه 32 بیتی و 64 بیتی ویندوز سازگار است.

دانلود افزونه

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

هنگام بحث در مورد سازگاری، قابل ذکر است که تصاویر فرمت WebP را می توان در چند مرورگر مشاهده کرد. در اینجا لیست فعلی مرورگرهایی است که از WebP پشتیبانی می کنند (منبع):

• کروم و کروم برای iOS
• اپرا و اپرا مینی

متأسفانه مرورگرها دوست دارند فایرفاکس و سافاری فرمت WebP را بطور کامل پشتیبانی نمی کند. با این حال، یک راه حل از طریق کتابخانه جاوا اسکریپت WebPJS در دسترس است. این به شما امکان می دهد تصاویر WebP را به رشته های dataURI در سمت مشتری تبدیل کنید.

بازگشت به فرمت های دیگر (اگر WebP پشتیبانی نمی شود)

هنگام ارائه تصاویر به طیف متنوعی از کاربران، ارائه گزینه های بازگشتی برای مرورگرهایی که ممکن است فرمت WebP را پشتیبانی نکنند بسیار مهم است. بهترین روش این است که به فرمت های سنتی مانند JPG یا PNG برگردید.

در اینجا یک روش برای پیاده سازی این است:

<picture>
  <source srcset="https://www.hongkiat.com/example.webp 1x" type="image/webp">
  <img src="https://www.hongkiat.com/blog/webp-guide/example.jpg" alt="Description of the image">
</picture>

توضیح:

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

نحوه پیش نمایش تصاویر WebP

در حالی که تصاویر WebP به راحتی در مرورگرهای Chrome و Opera قابل مشاهده هستند، پیش نمایش محلی ممکن است بسته به سیستم عامل شما به ابزارهای تخصصی نیاز داشته باشد.

برای کاربران مک، WebPQuickLook قابلیت پیش نمایش تصاویر WebP را با استفاده از ویژگی Quick Look ارائه می دهد. به سادگی تصویر را انتخاب یا برجسته کنید و کلید فاصله را فشار دهید.

کاربران ویندوز می‌توانند به WebPCodec مراجعه کنند، که پیش‌نمایش‌های کوچک تصاویر WebP را در File Explorer ارائه می‌کند. این ابزار هم WebP و هم مشابه JPEG آن را نمایش می دهد.

خواندن های توصیه شده

برای کسانی که علاقه مند به کاوش بیشتر در مورد WebP و فناوری های مرتبط با آن هستند، در اینجا مجموعه ای از منابع جامع آورده شده است: