ในบทความต่อไปเราจะมาดูวิธีการ แปลงรูปภาพเป็นรูปแบบ WebP. หากคุณอุทิศตัวเองให้กับการสร้างหน้าเว็บคุณจะรู้อยู่แล้วว่าหนึ่งในแนวทางปฏิบัติที่ดีที่สุดในการเพิ่มประสิทธิภาพเว็บไซต์ของคุณคือการใช้รูปภาพบีบอัด ในบทความนี้เราจะดูวิธีใช้รูปแบบ WebP ด้วยวิธีนี้เราสามารถสร้างรูปภาพที่บีบอัดและมีคุณภาพเพื่อใช้บนหน้าเว็บของเรา
WebP เป็นรูปแบบรูปภาพที่ค่อนข้างใหม่ซึ่งนำเสนอการบีบอัดรูปภาพบนเว็บที่ไม่สูญเสียและไม่สูญเสียเป็นพิเศษ รูปแบบนี้ได้รับ ออกแบบโดย Google. ในการใช้งานคุณจะต้องดาวน์โหลดยูทิลิตี้ที่คอมไพล์ไว้ล่วงหน้าสำหรับ Gnu / Linux, Windows และ Mac OS X
WebP เป็นรูปแบบภาพใหม่ที่ให้การบีบอัดแบบไม่สูญเสียและไม่สูญเสียสำหรับไฟล์ PNG และ JPEG ด้วยรูปแบบนี้ เราจะได้ภาพที่มีขนาดเล็กลงถึง 34%. มันคือ เข้ากันได้กับ Google Chrome และ Opera. เราสามารถใช้ Nginx และ Apache เพื่อตรวจสอบว่ารูปแบบนี้ได้รับการสนับสนุนโดย Browser Agent หรือไม่จากนั้นให้บริการภาพในรูปแบบใหม่แทนภาพต้นฉบับ รูปแบบไฟล์นี้ยังรองรับภาพเคลื่อนไหวซึ่งอาจนำไปสู่การลดขนาดภาพลงได้มาก
ด้วยรูปแบบ WebP ผู้ดูแลเว็บและนักพัฒนาเว็บสามารถ สร้างภาพที่มีขนาดเล็กและสมบูรณ์ยิ่งขึ้น ที่ทำให้เว็บเร็วขึ้น
ติดตั้งเครื่องมือ WebP บน Ubuntu
โชคดีที่แพคเกจ webp เป็น มีอยู่ในที่เก็บ Ubuntu อย่างเป็นทางการ. เราสามารถติดตั้งได้โดยใช้ APT package manager เราจะต้องเปิดเทอร์มินัลเท่านั้น (Ctrl + Alt + T) และเขียนลงในนั้น:
sudo apt install webp
นอกจากนี้เรายังสามารถเลือก Ubuntu และ Gnu / Linux อื่น ๆ สำหรับไฟล์ ดาวน์โหลดแพ็คเกจ webp จากที่เก็บของ Google. สำหรับสิ่งนี้เราจะใช้คำสั่ง wget โดยเปิดเทอร์มินัล (Ctrl + Alt + T) แล้วพิมพ์:
wget -c https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-0.6.1-linux-x86-32.tar.gz
สิ่งต่อไปที่เราจะทำคือแตกไฟล์และย้ายไปยังไดเร็กทอรีของแพ็กเกจที่แยกออกมาดังนี้:
tar -xvf libwebp-0.6.1-linux-x86-32.tar.gz cd libwebp-0.6.1-linux-x86-32/ cd bin/ ls
เครื่องมือในตัว
ดังที่คุณเห็นจากภาพหน้าจอด้านบนแพ็คเกจประกอบด้วยไลบรารีที่คอมไพล์ไว้ล่วงหน้า (libwebp) เพื่อเพิ่มยูทิลิตี้เว็บต่างๆตามรายการด้านล่าง
- anim_diff →เป็นเครื่องมือสำหรับ แสดงความแตกต่างระหว่างภาพเคลื่อนไหว.
- anim_dump →นี่คือเครื่องมือสำหรับ ถ่ายโอนความแตกต่างระหว่างภาพแอนิเมชั่น.
- cwebp →เป็นเครื่องมือสำหรับ การเข้ารหัส webp.
- dwebp →นี่คือเครื่องมือสำหรับ การถอดรหัส webp.
- gif2webp →เครื่องมือสำหรับ แปลงภาพ GIF เป็น webp.
- img2webp →เครื่องมือสำหรับ แปลงลำดับภาพเป็นไฟล์เว็บแบบเคลื่อนไหว.
- vwebp →นี่คือไฟล์ โปรแกรมดูไฟล์ webp.
- webpinfo →เครื่องมือนี้ใช้เพื่อดู ข้อมูลเกี่ยวกับไฟล์ ภาพ webp
- webpmux →หนึ่ง เครื่องมือ mux จาก webp.
เราจะสามารถดูตัวเลือกทั้งหมดสำหรับเครื่องมือก่อนหน้านี้ได้โดยการดำเนินการโดยไม่โต้แย้งหรือใช้ - ธงช่วย. ตัวอย่างเช่น
cwebp -longhelp
สุดท้ายหากเราต้องการรันโปรแกรมก่อนหน้านี้โดยไม่ต้องเขียนพา ธ สัมบูรณ์เราจะต้องเพิ่มไดเร็กทอรีเท่านั้น ~ / libwebp-0.6.1-linux-x86-32 / bin ไปยังไฟล์ ตัวแปรสภาพแวดล้อม PATH ในไฟล์ ~ / .bashrc ของเรา. ในการดำเนินการนี้เราจะดำเนินการในเทอร์มินัล (Ctrl + Alt + T):
vi ~/.bashrc
ในไฟล์สุดท้ายเราจะเพิ่ม:
export PATH=$PATH:~/libwebp-0.6.1-linux-x86-32/bin
เมื่อเสร็จแล้วเราจะต้องบันทึกไฟล์และปิดเท่านั้น เมื่อออกจาก เราจะเปิดหน้าต่างเทอร์มินัลใหม่ และเราจะสามารถเรียกใช้โปรแกรมเว็บทั้งหมดเช่นเดียวกับคำสั่งอื่น ๆ ในระบบ
แปลงรูปภาพเป็น webp
ในการแปลงรูปภาพเป็น webp เราสามารถทำได้ ใช้เครื่องมือ cwebp. ในพารามิเตอร์นั้น -q กำหนดคุณภาพเอาต์พุตและ -o ระบุไฟล์เอาต์พุต. นี่คือตัวอย่าง:
cwebp -q 80 ubunlog.jpeg -o ubunlog.webp
ดูภาพที่แปลงแล้ว
เมื่อการแปลงเสร็จสิ้นเราสามารถทำได้ ดูภาพ webp โดยใช้เครื่องมือ vwebp. ดังที่คุณเห็นในการจับภาพภาพเดียวกันมีความแตกต่างบางประการเกี่ยวกับภาพในรูปแบบ jpeg
vwebp ubunlog.webp
WebP เป็นเพียงหนึ่งในผลิตภัณฑ์จำนวนมากที่เกิดจากความพยายามอย่างต่อเนื่องของ Google ในการทำให้เว็บเร็วขึ้น หากเราต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบภาพนี้เราสามารถทำได้ เยี่ยมชม เว็บไซต์โครงการ WebP.