ایجاد تصاویر WebP با خط فرمان

Katie Hempenius

ابزار خط فرمان webp قبلاً برای شما نصب شده است، بنابراین برای شروع آماده هستید. این ابزار تصاویر JPG، PNG و TIFF را به WebP تبدیل می کند.

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

1. روی Remix to Edit کلیک کنید تا پروژه قابل ویرایش باشد.
2. روی ترمینال کلیک کنید (توجه: اگر دکمه ترمینال نشان داده نشد، ممکن است لازم باشد از گزینه تمام صفحه استفاده کنید).
3. دستور زیر را تایپ کنید:

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`

این اسکریپت، با کیفیت 50 ، تمام فایل های موجود در فهرست images/ دایرکتوری را تبدیل می کند و آنها را به عنوان یک فایل جدید (همان نام فایل، اما با پسوند فایل .webp ) در همان فهرست ذخیره می کند.

✔︎ ورود

اکنون باید 6 فایل در فهرست images/ دایرکتوری خود داشته باشید:

flower1.jpg
flower1.webp
flower2.jpg
flower2.webp
flower3.png
flower3.webp

سپس، این اشکال را به‌روزرسانی کنید تا تصاویر 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 استفاده می‌کنند یا خیر.

1. برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید .
2. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
3. روی تب Lighthouse کلیک کنید.
4. مطمئن شوید که چک باکس Performance در لیست دسته بندی ها انتخاب شده است.
5. روی دکمه Generate report کلیک کنید.
6. بررسی کنید که سرویس تصاویر در قالب‌های نسل بعدی ممیزی تصویب شده باشد.

موفقیت! شما اکنون در حال ارائه تصاویر WebP در سایت خود هستید.