คู่มือฉบับสมบูรณ์เกี่ยวกับการใช้รูปแบบรูปภาพของ WebP

WebP หรือออกเสียงอย่างไม่เป็นทางการว่า weppy, เป็นรูปแบบภาพที่นักพัฒนาซอฟต์แวร์ของ Google แนะนำเมื่อประมาณ 5 ปีที่แล้ว หากคุณเป็นนักออกแบบเว็บไซต์หรือนักพัฒนาที่พยายามลดและปรับขนาดไฟล์ภาพของคุณให้ดีที่สุดสิ่งที่ WebP สามารถทำได้คือทำให้รอยยิ้มบนใบหน้าของคุณ.

โดยสังเขปต่อไปนี้เป็นสิ่งสำคัญที่คุณต้องรู้เกี่ยวกับรูปแบบภาพที่ไม่แปลกใหม่ แต่ก็ยังเจ๋งนี้:

• WebP ดำเนินการโดยนามสกุลไฟล์ของ. webp.
• WebP ใช้การบีบอัดทั้งแบบ lossy และ lossless.
• รูปภาพที่สูญเสีย WebP อาจเกิดขึ้นได้ เล็กกว่า JPEG 25-34%.
• อิมเมจแบบไม่สูญเสีย WebP เล็กลง 25% เมื่อเทียบกับ PNG.
• WebP รองรับความโปร่งใสแบบไม่สูญเสียเช่น PNG พร้อมช่องอัลฟา.
• WebP รองรับภาพเคลื่อนไหว เช่นภาพเคลื่อนไหว GIF.

สรุป WebP สามารถลดขนาดไฟล์รูปภาพของ JPEG, GIF, PNG ได้อย่างมาก นี่คือทบทวนใน WebP คุณควรตรวจสอบก่อนที่เราจะเข้าไปในสิ่งที่สนุก.

การทดลอง

สิ่งที่ดีที่สุดเกี่ยวกับการอ้างสิทธิ์บนเว็บคือเราสามารถทำการทดลองเพื่อดูความจริงและความถูกต้องได้เสมอ นี่คือการทดลองบางอย่างที่ฉันค้นพบ รูปภาพมีขนาดเล็กเท่าไรที่จะได้รับ หลังจากนั้นจะถูกแปลงจากรูปแบบภาพต่างๆ (JPEG, PNG และ GIF) เป็น WebP.

1. JPEG - ภาพสูญเสีย

นี่คือภาพ JPEG แบบสุ่มที่ฉันจับได้จาก Pexels. ขนาดไฟล์ดั้งเดิม - 165kb. ↓

ภาพถูกปรับให้เหมาะสมด้วย JpegMini. ใหม่ขนาดไฟล์ - 101kb. ↓

ในที่สุดภาพเดียวกันจะถูกแปลงเป็นรูปแบบ WebP. ขนาดไฟล์สุดท้าย - 70KB. ↓

ในหมายเหตุด้าน: นี่คือขนาดไฟล์ที่แตกต่างกันหากภาพเดียวกันถูกแปลงเป็นรูปแบบต่อไปนี้:

• GIF - 285kb
• PNG 8 - 241.2kb
• PNG 24 - 657.6kb

2. PNG - ภาพที่ไม่มีการสูญเสีย

ตอนนี้ลอง PNG ด้วยความโปร่งใส (ที่มา). ขนาดไฟล์ดั้งเดิม - 587kb. ↓

นี่คือภาพที่ปรับให้เหมาะสมกับ tinypng. ใหม่ขนาดไฟล์ - 278kb. ↓

และสุดท้ายภาพแปลงเป็นรูปแบบ WebP. ขนาดไฟล์สุดท้าย - 112kb. ↓

3. ภาพเคลื่อนไหว GIF

เมื่อแปลงเป็น WebP รูปภาพ JPEG เปลี่ยนจาก 165kb เป็น 70kb ในขณะที่รูปภาพ PNG เปลี่ยนจาก 587kb เป็น 112kb.

มาดูกันว่า GIF แบบเคลื่อนไหวเคลื่อนไหวอย่างไร:

• ขนาดไฟล์ดั้งเดิม - 6.8mb
• ขนาดไฟล์ WebP - 6.3mb

สรุป:

นี่คือตารางสำหรับสรุปการทดสอบทั้งหมด:

ตัวเลขเหล่านั้นบ่งบอกถึงการลดขนาดไฟล์ลงอย่างมากและตัดสินจากภาพคุณไม่สามารถบอกความแตกต่างในแง่ของความคมชัดและความละเอียดได้ ไฟล์ขนาดเล็กลงและเบาลงด้วยคุณภาพของภาพระดับเดียวกัน WebP จึงคุ้มค่าที่จะดู.

การแปลงเป็น WebP ด้วยเครื่องมือ

หากคุณอยู่บนเครื่องแล้วและต้องการเริ่มการปล่อยรูปภาพในรูปแบบ WebP ลองดำน้ำและดูว่าคุณสามารถแปลงรูปภาพของคุณเป็นรูปแบบนี้ได้อย่างง่ายดาย วิธีการทั้งหมดที่กล่าวถึงด้านล่างแตกต่างกันไปในแง่ของการควบคุมใช้งานง่ายและมั่นใจ เลือกพิษของคุณ.

WebPonize สำหรับ Mac

WebPonize น่าจะเป็นวิธีที่ง่ายและรวดเร็วที่สุดในการแปลงภาพเป็นรูปแบบ WebP บน Mac สิ่งที่คุณต้องทำคือเพียงลากและวางภาพของคุณลงใน WebPonize แล้วมันจะทำการแปลง คุณจะได้รับ ouput, ขนาดก่อนหน้า, ขนาดหลังและ% ของการลดขนาดไฟล์ต้นฉบับ [ดาวน์โหลด WebPonize]

Webpconv สำหรับ ของ windows

หากคุณใช้ Windows, Webpconv เป็นแอพที่คุณควรติดตั้ง มันยังมาในรุ่นพกพาเพื่อให้คุณสามารถเรียกใช้มันอย่างอิสระในแฟลชไดรฟ์ของคุณ [ดาวน์โหลด Webconv]

การแปลงด้วย Command Line

หากคุณมีความรู้สึกเกินบรรยายคุณอาจต้องการตัดการแปลงโดยใช้บรรทัดคำสั่ง. cwebp แปลงภาพ JPEG, PNG หรือ TIFF ของคุณเป็นรูปแบบ WebP และ dwebp แปลงเป็นรูปแบบ PNG มาดูกันว่ามันทำงานอย่างไร.

บันทึก: คำแนะนำต่อไปนี้สำหรับ Mac OS X สำหรับผู้ใช้ Windows และ Linux คลิกที่นี่.

การตั้งค่า MacPorts บน Mac OSX

ก่อนอื่นตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Xcode แล้วทำตามขั้นตอนเหล่านี้:

1. ดาวน์โหลดและติดตั้ง MacPorts หากคุณมี MacPort ติดตั้งอยู่ใน Mac แล้วให้ทำตามขั้นตอนที่ 2.
2. เปิด สถานีปลายทาง.
3. ประเภท "sudo port selfupdate"และกด Enter สิ่งนี้จะอัปเดต MacPort ของคุณเป็นเวอร์ชันล่าสุด.

   

4. ถัดไปพิมพ์ "sudo port ติดตั้ง webp"และกด Enter สิ่งนี้จะติดตั้ง libwebp (ห้องสมุด WebP).

   

แค่นั้นแหละ. ทีนี้ลองดูที่ วิธีแปลงรูปภาพเป็น WebP โดยใช้บรรทัดคำสั่ง.

คำสั่งในการแปลง / ย้อนกลับ

นี่คือคำสั่งเพื่อ:

I - แปลงไฟล์ภาพ JPEG / PNG เป็นรูปแบบ WebP

รูป: cwebp -q [image_quality] [JPEG / PNG_filename] -o [WebP_filename]

ตัวอย่าง:

cwebp -q 80 example.png -o example.webp 

II - แปลงไฟล์รูปภาพ WebP ให้เป็น PNG

รูป: dwebp [WebP_filename] -o [PNG_filename]

ตัวอย่าง:

dwebp image.webp -o image.png 

มากกว่า: ถ้าคุณชอบการแปลงด้วยวิธีอื่น ๆ นี่คือคำแนะนำสำหรับการใช้งาน Grunt และ Gulp เพื่อแปลงไฟล์ JPG / PNG เป็น WebP.

แปลงด้วยเครื่องมือออนไลน์

หากคุณไม่ได้มองหาการติดตั้งแอปพลิเคชันใด ๆ บนระบบปฏิบัติการเพื่อทำงานนี้ให้เลือกใช้เครื่องมือออนไลน์เหล่านี้แทน นี่คือบางส่วนที่ฉันได้รู้จัก:

• Online-converter.com
• Webp-convertor.com
• Zamzar

เคล็ดลับ: ถ้าคุณ google แปลงเว็บเพจออนไลน์ , คุณอาจจะพบตัวเลือกเพิ่มเติม.

ปลั๊กอิน Photoshop

คุณอาจดีใจที่รู้ว่ามีปลั๊กอิน Photoshop ที่ให้คุณบันทึกรูปภาพในรูปแบบ WebP ผ่าน Photoshop ปลั๊กอินนี้รองรับ Mac OS X (CS 2- CS 6) และ Windows (32 บิตและ 64 บิต) [ดาวน์โหลดปลั๊กอินที่นี่]

บันทึก: แค่คิดว่าคุณควรรู้ว่าฉันลองใช้งานบน Photoshop CC ไม่ได้ทำงานที่นั่น.

รองรับ WebP Browser

สุดท้ายเรามาพูดถึงความเข้ากันได้ ขณะนี้คุณสามารถดูภาพรูปแบบ WebP ได้จากเบราว์เซอร์ต่อไปนี้:

• Chrome / Chrome สำหรับ iOS
• Opera / Opera Mini

โชคไม่มากสำหรับ FireFox และ การแข่งรถวิบาก, ซึ่งยังคงไม่รองรับรูปแบบ WebP อย่างไรก็ตามคุณสามารถใช้ไลบรารี Javascript ของ WebPJS ได้ แปลงอิมเมจ WebP ให้เป็นสตริง dataURI บนไซต์ไคลเอ็นต์.

ถอยกลับไปใช้รูปแบบภาพอื่น ๆ

เป็นความคิดที่ดีที่จะใช้ทางเลือกเพื่อหลีกเลี่ยงการแสดงข้อผิดพลาดของภาพเนื่องจากเบราว์เซอร์ที่ไม่รองรับ ในกรณีนี้ทางเลือกจะเป็นภาพในรูปแบบ JPG หรือ PNG นี่คือวิธีที่คุณทำ.

  source srcset = "example.webp 1x" type = "รูปภาพ / webp">   

สำหรับรหัสนี้, images / สมบูรณ์คู่มือการใช้-webp-ภาพ format_13.jpg จะถูกโหลดหากผู้ใช้ใช้ Firefox หรือ Safari.

ดูตัวอย่างรูปภาพ WebP

คุณสามารถดูตัวอย่างรูปภาพ WebP บน Chrome และ Opera Browers แต่ถ้าคุณต้องการที่จะทำมันบนเครื่องของคุณคุณจะต้องมีเครื่องมือบางอย่าง.

ผู้ใช้ Mac สามารถใช้ WebPQuickLook เพื่อดูตัวอย่างรูปภาพในฟอร์แมต WebP โดยใช้ฟังก์ชั่น Quick Look (เมื่อเลือกรูปภาพหรือไฮไลต์แล้วให้กด spacebar).

สำหรับผู้ใช้ Windows, WebPCodec จะแสดงภาพตัวอย่างขนาดย่อของรูปภาพ WebP ใน File Explorer ทั้ง WebP และ JPEG ที่เทียบเท่าจะปรากฏขึ้น ใน Window OS ที่รองรับ (Vista, 7, 8), รูปภาพ WebP สามารถแสดงบน Windows Photo Viewer ได้เช่นกัน.

มากกว่า: ReSCR.it ส่งภาพในรูปแบบ WeBP โดยอัตโนมัติและจะสามารถใช้งานได้หากคุณเก็บภาพของคุณด้วย MaxCDN (อ่านเพิ่มเติม)

อ้างอิงเพิ่มเติม

• การแปลง Animated GIF เป็น WebP
• WebP ทำงานอย่างไร
• การปรับใช้ WebP ผ่านยอมรับการเจรจาต่อรองเนื้อหา
• เว็บที่เล็กลงและสวยงามยิ่งขึ้นด้วย WebP
• การปรับใช้รูปแบบรูปภาพใหม่บนเว็บ
• เอกสารประกอบ WebP API