จากการทำงานเกี่ยวกับ Improve SEO ให้กับเว็บไซต์ เครื่องมือของ Google แนะนำให้เพิ่มประสิทธิภาพของการแสดงผลรูปภาพเป็นแบบใหม่ คือ WebP เรามาดูคำนิยามกันก่อนว่า WebP มันคืออะไร ทำไมเราต้องสนใจมัน
WebP คือ ไฟล์ภาพที่แนะนำและพัฒนาโดย Google ตั้งแต่ปี 2010 และถูกนำมาใช้กับผลิตภัณฑ์ของ Google และแอนดรอยด์ WebP พัฒนามาจาก WebM อีกที ซึ่งจริงๆ แล้วตอนแรกนั้น WebM ถูกใช้กับวิดีโอ เพราะวิดีโอก็คือการนำภาพหลายๆ ภาพมาเรียงต่อกัน webm นี้ทำให้วิดีโอนั้นมีขนาดเล็กลงมาก Google เลยได้นำมาพัฒนาเป็น WebP เพื่อใช้กับภาพถ่าย
วันนี้ผมก็เลยจะมาเขียนบันทึกเกี่ยวกับการดาวน์โหลดและติดตั้ง WebP
เลือกดาวน์โหลดเวอร์ชันที่ต้องการได้ที่ https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html
ในที่นี้ผมเลือกเวอร์ขันล่าสุดมาเลยละกัน นั่นก็คือ 1.0.3 ทำได้โดยการคัดลอก URL ของเวอร์ชันที่เราต้องการเอาไว้ (เพื่อจะได้เอาไปโหลดใน Linux Server ของเรา ซึ่งจะต้องเป็นสิทธิ root นะ)
FTP ไฟล์ขึ้นไปที่ Server หรือจะใช้เซิร์ฟเวอร์ดาวน์โหลดโดยตรงเลยก็ได้ ในที่นี้ผมขอใช้เซิร์ฟเวอร์ดาวน์โหลดไฟล์มาเลยก็แล้วกัน
[root]# cd ~
[root]#wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.0.3.tar.gz
จากนั้นก็แตกไฟล์ออกมาด้วยคำสั่ง
tar xvzf libwebp-1.0.3.tar.gz
ใช้คำสั่ง cd เพื่อเข้าไปในโฟลเดอร์ที่เราเพิ่งแตกไฟล์มา
cd libwebp-1.0.3
ติดตั้งโลด
./configure
make
sudo make install
มาถึงตรงนี้แล้วก็เป็นอันเสร็จพิธี (ควรจะรันได้แล้วอะนะ) แต่เซิร์ฟเวอร์ผมเหมือนจะเจอปัญหาว่าหา libraries ขึ้น error ว่า
cwebp: error while loading shared libraries: libwebpdemux.so.2: cannot open shared object file: No such file or directory
ก็เลยต้องหาวิธีแก้ไขต่อ จนไปเจอวิธีแก้ ทำได้โดยการตั้งค่า LD_LIBRALY_PATH โดยใช้คำสั่ง
export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/lib
ทีนี้มาลองดูกันอีกทีว่าจะได้ไหม โดยการทดลองรันคำสั่ง
cwebp -version
ขุ่นพระ เราติดตั้ง cwebp version 1.0.3 บน Linux server สำเร็จแล้ว มาลองกันดีกว่าว่าจะทำงานได้จริงๆไหมนะ
ผมสร้าง folder test_webp ขึ้นมา เพื่อจะโหลดไฟล์มาทดลอง โดยสร้างไว้ที่ /var/www/html/test_webp
จากนั้นก็หารูปสักรูป ในที่นี้ทดลองเอารูปหน้าปกจากคำศัพท์ภาษาอีสานมาสักรูป จากนั้นก็ดาวน์โหลดมาเก็บใน test_webp
มาถึงตรงนี้ ตอนนี้เรามีไฟล์ภาพภาพนึงซึ่งเป็นต้นฉบับ เก็บเอาไว้ก่อน
ที่นี้ก็มาถึงจุดที่ต้องลุ้นปล้วแหละว่าจะออกมาเป็นยังไง ผมลองรันคำสั่ง
cwebp 19033.jpg -q 60 -o 19033.webp
มาดูผลลัพธ์ที่ได้
ขนาดไฟล์ลดลงมาก
มาดูไฟล์ของจริงกัน
ต้นฉบับ : http://103.58.150.219/test_webp/19033.jpg
ผลลัพธ์ : http://103.58.150.219/test_webp/19033.webp
อ่านข้อมูลเพิ่มเติมจากเว็บนี้โลด ถ้าไม่เข้าใจ >> https://developers.google.com/speed/webp/download