ابزار خط فرمان webp قبلاً برای شما نصب شده است، بنابراین برای شروع آماده هستید. این ابزار تصاویر JPG، PNG، و TIFF را به WebP تبدیل می‌کند.
تبدیل تصاویر به WebP
- روی بازآمیزی برای ویرایش کلیک کنید تا پروژه قابل‌ویرایش شود.
- روی پایانه کلیک کنید (توجه: اگر دکمه «پایانه» نشان داده نمی‌شود، ممکن است لازم باشد از گزینه «تمام‌صفحه» استفاده کنید).
- فرمان زیر را تایپ کنید:
cwebp -q 50 images/flower1.jpg -o images/flower1.webp
این فرمان فایل images/flower1.jpg را با کیفیت 50 (0 بدترین و 100 بهترین کیفیت است) تبدیل می‌کند و آن را به‌صورت images/flower1.webp ذخیره می‌کند.
پس‌از انجام این کار، باید چیزی شبیه به این را در کنسول ببینید:
Saving file 'images/flower1.webp'
File: images/flower1.jpg
Dimension: 504 x 378
Output: 29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12 35.09 dB
(1.24 bpp)
block count: intra4: 750 (97.66%)
intra16: 18 (2.34%)
skipped: 0 (0.00%)
bytes used: header: 116 (0.4%)
mode-partition: 4014 (13.6%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 22%| 26%| 36%| 17%| 768
quantizer: | 52 | 42 | 33 | 24 |
filter level: | 16 | 9 | 6 | 26 |
تصویر را باموفقیت به WebP تبدیل کردید.
اما اجرای فرمان cwebp برای هر تصویر به‌صورت جداگانه، برای تبدیل تعداد زیادی تصویر زمان زیادی می‌برد. اگر لازم است این کار را انجام دهید، می‌توانید به‌جای آن از
یک اسکریپت استفاده کنید.
- این متن را در کنسول اجرا کنید (تلفظ‌های معکوس را فراموش نکنید):
`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`
این اسکریپت همه فایل‌های موجود در فهرست images/ را با کیفیت 50 تبدیل می‌کند و آن‌ها را به‌عنوان فایل جدید (با همان نام فایل، اما با پسوند فایل .webp) در همان فهرست ذخیره می‌کند.
✔︎ اعلام حضور کردن
اکنون باید ۶ فایل در فهرست راهنمای images/ داشته باشید:
flower1.jpg
flower1.webp
flower2.jpg
flower2.webp
flower3.png
flower3.webp
سپس، این Glitch را به‌روز کنید تا تصاویر WebP را به مرورگرهایی که از آن پشتیبانی می‌کنند ارائه دهد.
تصاویر WebP را بااستفاده از برچسب <picture> اضافه کنید
برچسب <picture> به شما امکان می‌دهد WebP را به مرورگرهای جدیدتر ارائه دهید و درعین‌حال
پشتیبانی از مرورگرهای قدیمی‌تر را حفظ کنید.
- در
index.html،<img src="images/flower1.jpg"/>را با HTML زیر جایگزین کنید:
<picture>
<source type="image/webp" srcset="images/flower1.webp">
<source type="image/jpeg" srcset="images/flower1.jpg">
<img src="images/flower1.jpg">
</picture>
- سپس، برچسب‌های
<img>را برایflower2.jpgوflower3.pngبا برچسب‌های<picture>جایگزین کنید.
✔︎ اعلام حضور کردن
پس‌از تکمیل، برچسب‌های <picture> در index.html باید به این شکل باشد:
<picture>
<source type="image/webp" srcset="images/flower1.webp">
<source type="image/jpeg" srcset="images/flower1.jpg">
<img src="images/flower1.jpg">
</picture>
<picture>
<source type="image/webp" srcset="images/flower2.webp">
<source type="image/jpeg" srcset="images/flower2.jpg">
<img src="images/flower2.jpg">
</picture>
<picture>
<source type="image/webp" srcset="images/flower3.webp">
<source type="image/png" srcset="images/flower3.png">
<img src="images/flower3.png">
</picture>
سپس، از Lighthouse استفاده کنید تا مطمئن شوید تصاویر WebP را به‌درستی در سایت پیاده‌سازی کرده‌اید.
درستی‌سنجی استفاده از WebP با Lighthouse
ممیزی عملکرد ارائه تصاویر در قالب‌های نسل بعدی Lighthouse می‌تواند به شما اطلاع دهد که آیا همه تصاویر سایت شما از قالب‌های نسل بعدی مانند WebP استفاده می‌کنند یا خیر.
- برای پیش‌دید کردن سایت، مشاهده برنامه را فشار دهید. سپس
تمام‌صفحه
را فشار دهید. - برای باز کردن DevTools، کلیدهای `Control+Shift+J` (یا `Command+Option+J` در Mac) را فشار دهید.
- روی برگه Lighthouse کلیک کنید.
- مطمئن شوید چارگوش انتخاب عملکرد در فهرست دسته‌ها انتخاب شده باشد.
- روی دکمه تولید گزارش کلیک کنید.
- بررسی کنید که ممیزی ارائه تصاویر در قالب‌های نسل بعدی با موفقیت انجام شده باشد.
موفقیت‌آمیز بود. اکنون درحال ارائه کردن تصویر در قالب WebP در سایتتان هستید.