آموزش نصب cwebp در اوبونتو و مهاجرت به webp برای افزایش سرعت بارگذاری تصاویر در وب سایت

وب‌پی (WebP) یک فرمت تصویر رایگان و متن‌باز است که بر پایه فرمت ویدیویی VP8 طراحی شده است. این فرمت در سال ۲۰۱۰ توسط گوگل توسعه داده شد و از آن زمان، بسیاری از وب‌سایت‌ها و برنامه‌های موبایل از آن برای افزایش سرعت استفاده می‌کنند.

مرورگرهای گوگل کروم و اپرا به صورت بومی از فرمت وب‌پی پشتیبانی می‌کنند. این فرمت از فشرده‌سازی تصاویر به صورت بدون افت کیفیت (lossless) و با افت کیفیت (lossy) و همچنین انیمیشن‌ها را پشتیبانی می‌کند.

مزیت استفاده از وب‌پی به عنوان فرمت تصویر، اندازه فایل کوچکتر آن است. این ویژگی باعث می‌شود وب‌سایت‌ها سریع‌تر بارگذاری شوند که این امر دارای اهمیت زیادی است و همچنین باعث مصرف پهنای باند میشود. اگر وب‌سایت شما در عملکرد خود مشکلی دارد یا ترافیک آن افزایش یافته است، بهینه‌سازی عملکرد صفحه ضروری است. برای این کار می‌توان تمامی تصاویر وب‌سایت را به فرمت وب‌پی تبدیل کرد.

در این مطلب، مراحل نصب ابزار خط فرمان وب‌پی (cwebp) و تبدیل تمامی تصاویر به فرمت وب‌پی را خواهید آموخت.

مراحل نصب cwebp و آماده‌سازی دایرکتوری تصاویر

ابتدا باید نرم‌افزار موردنیاز برای تبدیل تصاویر را نصب کنیم و سپس یک دایرکتوری حاوی تصاویر برای تست ایجاد کنیم. ابزار cwebp یک ابزار خط فرمان است که تصاویر را به فرمت .webp فشرده می‌کند. برای نصب این ابزار روی سرور Ubuntu مراحل زیر را دنبال کنید:

به‌عنوان یک کاربر ssh با دسترسی sudo وارد سرور شوید.

$ sudo apt update

برای نصب WebP روی سرور، دستور زیر را اجرا کنید:

$ sudo apt install webp

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

$ sudo mkdir /var/www/html/webp

مالکیت این دایرکتوری را به کاربر مثلا ardweb تغییر دهید:

$ sudo chown ardweb /var/www/html/webp

برای تست ابزار cwebp، می‌توانید تصاویر رایگان PNG و JPEG را با استفاده از wget دانلود کنید. این ابزار به‌صورت پیش‌فرض در سیستم عامل اوبونتو نصب شده است. برای دانلود تصاویر تستی دستورات زیر را اجرا کنید:

$ sudo wget -c "https://commons.wikimedia.org/wiki/Main_Page#/media/File:Badaling_China_Great-Wall-of-China-01.jpg?download" -O /var/www/html/webp/chinawall.jpg
$ sudo wget -c "https://www.freepngimg.com/thumb/tree/12-tree-png-image-download-picture.png" -O /var/www/html/webp/tree.png

سپس به دایرکتوری /var/www/html/webp بروید.

$ sudo cd /var/www/html/webp

فشرده‌سازی فایل‌های تصویری به فرمت WebP با cwebp

برای تبدیل تصاویر PNG و JPEG به فرمت .webp از ابزار خط فرمان WebP استفاده می‌کنیم.

دستور عمومی cwebp:

$ cwebp image.jpg -o image.webp

گزینه -o مسیر ذخیره فایل WebP تبدیل‌شده را مشخص می‌کند.

با توجه به اینکه در دایرکتوری /var/www/html/webp هستیم، دستور زیر را برای تبدیل یک فایل JPG به فرمت WebP اجرا کنید:

$ sudo cwebp -q 100 chinawall.jpg -o chinawall.webp

گزینه -q کیفیت تصویر را پس از تبدیل تعیین می‌کند. پس از تبدیل، می‌توانید کاهش چشمگیر حجم فایل را با دستور ls بررسی کنید.

$ sudo ls -lh chinawall.jpg chinawall.webp
-rw-r--r-- 1 sshusr sshusr 7.4M Jan 18 23:36 chinawall.jpg
-rw-r--r-- 1 sshusr sshusr 3.9M Jan 23 16:46 chinawall.webp

برای حفظ اطلاعات کامل تصویر در حین فشرده سازی، از گزینه "-lossless" در جای -q استفاده کنید. ما عمدتا از این گزینه برای تبدیل فایل PNG استفاده می کنیم تا کیفیت آن حفظ شود. برای تبدیل فایل PNG برای تست، دستور زیر را اجرا کنید.

sudo cwebp -lossless tree.png -o tree.webp

تبدیل تمامی تصاویر JPEG و PNG در یک دایرکتوری

برای تبدیل تمامی تصاویر در یک دایرکتوری، استفاده از یک اسکریپت Shell کارآمدتر است. این اسکریپت، تمامی فایل‌های JPEG را با کیفیت ۹۰٪ و فایل‌های PNG را به‌صورت lossless به WebP تبدیل می‌کند.

یک اسکریپت با نام webp-convert.sh در دایرکتوری home ایجاد کنید. 

$ sudo nano ~/webp-convert.sh

خطوط زیر را به فایل اضافه کنید:

#!/bin/bash

# converting JPEG images
find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;' {} \;

# converting PNG images
find $1 -type f -and -iname "*.png" \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
cwebp -quiet -lossless "$0" -o "$webp_path";
fi;' {} \;

این اسکریپت موارد زیر را انجام می‌دهد:

• ایجاد متغیر webp_path
• بررسی می‌کند که آیا نسخه .webp از تصویر موجود است یا خیر.
• در صورت نبود نسخه .webp تصویر را تبدیل می‌کند.

فایل را ذخیره و بسته و با دستور زیر قابل اجرا کنید:

$ sudo chmod a+x ~/webp-convert.sh

اگر تصاویر جدیدی به دایرکتوری /var/www/html/webp اضافه کردید، اسکریپت را اجرا کنید تا آن‌ها نیز تبدیل شوند.

 sudo ./webp-convert.sh /var/www/html/webp

تبدیل تصاویر به صورت آنی به webp در وب سرور

با اینکه اکثر مرورگرهای بروز از فرمت webp استفاده میکنند, درصد کمی از این فرمت پشتیبانی نمیکنند. بهتر است در هنگام استفاده از فرمت webp از فرمت های قدیمی و رایج مانند png در کنار آن استفاده کنید و هر دو نوع فرمت را با تگ <picture> به کاربران نمایش دهید.

برای مثال در nodejs میتوایند از کتابخانه sharp استفاده کنید.

import sharp from "sharp"
***
public async store({request, response}: HttpContext) {
  const payload = await request.validateUsing(blog)
  const post = await Blog.create(payload)
  const photo = request.file('image')
  if (!photo) return response.internalServerError()
  const key = `/posts/${Filesystem.getDate()}/${cuid()}.${photo.extname}`
  await photo.moveToDisk(key)
  await post.merge({photo: key}).save()
  const saved = await sharp(Filesystem.PATH + key)
  await saved.webp({lossless: true}).toFile(Filesystem.PATH + key.replace(photo.extname || '', 'webp'));
  return response.ok(true)
}

نمایش تصاویر WebP به بازدیدکنندگان با استفاده از المنت های HTML

اگر سایت شما فقط از مرورگرهای سازگار با WebP پشتیبانی می کند، می توانید مطالعه را متوقف کنید. در غیر این صورت، WebP را به مرورگرهای جدیدتر و با یک تصویر بازگشتی به مرورگرهای قدیمی تر ارائه دهید:

قبل

<img src="flower.jpg" alt="">

بعد

<picture>
  <source type="image/webp" srcset="flower.webp">
  <source type="image/jpeg" srcset="flower.jpg">
  <img src="flower.jpg" alt="">
</picture>

تگ های <source> , <picture> و <img> با توجه به ترتیب بندی آنها نسبت به یکدیگر، همگی برای رسیدن به این نتیجه نهایی با هم تعامل دارند.

تگ <picture>

تگ <picture> یک پوشش برای صفر یا چند تگ <source> و یک تگ <img> فراهم می کند.

تگ <source>

تگ <source> یک منبع رسانه را مشخص می کند.

مرورگر از اولین منبع فهرست شده استفاده می کند که در قالبی است که پشتیبانی می کند. اگر مرورگر از هیچ یک از فرمت های فهرست شده در تگ های <source> پشتیبانی نکند، به بارگیری تصویر مشخص شده توسط تگ <img> بازمی گردد.

تگ <img>

 تگ <img> چیزی است که باعث می شود این کد روی مرورگرهایی کار کند که از تگ <picture> پشتیبانی نمی کنند. اگر مرورگر از تگ <picture> پشتیبانی نکند، تگ هایی را که پشتیبانی نمی کند نادیده می گیرد. بنابراین، فقط تگ <img src="flower.jpg" alt=""> را "می بیند" و آن تصویر را بارگذاری می کند.

نتیجه‌گیری

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

منابع وب دو و اینتل سرور