แนะนำรูปแบบ WebP

WebP เป็นรูปแบบภาพใหม่ที่ Google พัฒนาขึ้น รองรับการบีบอัดแบบสูญเสียข้อมูล แบบไม่สูญเสียข้อมูล และความโปร่งใส ไฟล์หลังบีบอัดมีขนาดเล็กกว่า JPEG、PNG เป็นต้น จึงช่วยประหยัดแบนด์วิดท์ ลดเวลาโหลดหน้าเว็บ และประหยัดปริมาณการใช้ข้อมูลของผู้ใช้。

แอป Android และ iOS เพียงนำไลบรารีถอดรหัสที่ Google จัดเตรียมไว้มาใช้ ก็รองรับรูปแบบ WebP ได้อย่างง่ายดาย แต่บนเว็บ การรองรับ WebP ยังไม่แพร่หลายมากนัก ตามข้อมูลจากข้อมูลของ Can I Use，ปัจจุบันมีเพียงเบราว์เซอร์ Chrome、Opera และ WebView ของ Android ที่รองรับ WebP แต่เมื่อภาพ WebP มีข้อดีมากมายขนาดนี้ เราจะนำมาใช้ในหน้าเว็บได้ไหม？ได้ บทความนี้จะมาพูดคุยเรื่องนี้กัน

แปลงรูปภาพที่มีอยู่เป็นรูปแบบ WebP

หากต้องการใช้รูปแบบ WebP คุณต้องสร้างภาพทุกรูปที่ใช้ในเว็บไซต์เป็นเวอร์ชัน WebP ไว้ด้วย หากใช้ผู้ให้บริการ CDN โดยทั่วไปจะมีตัวเลือกแปลงเป็นรูปแบบ WebP ให้ เช่น Upyun：

หลังเพิ่มการกำหนดค่าเช่นนี้ เราสามารถเติมส่วนต่อท้ายที่สอดคล้องกันลงใน URL ของรูปภาพ เพื่อใช้ทรัพยากรเวอร์ชันรูปแบบ WebP ได้

คุณยังสามารถใช้ปลั๊กอินของ webpack、gulp เพื่อแปลงรูปแบบภาพเป็นชุดได้ ในที่นี้จะไม่กล่าวรายละเอียดเพิ่มเติม。

การใช้รูปแบบ WebP ในเบราว์เซอร์

เนื่องจากไม่ใช่ทุกเบราว์เซอร์จะรองรับรูปแบบ WebP เราจึงมีแนวทางสองแบบ：แบบหนึ่งคือใช้รูปแบบ WebP เฉพาะในเบราว์เซอร์ที่รองรับ WebP；อีกแบบคือทำให้เบราว์เซอร์ที่ไม่รองรับ WebP สามารถรองรับ WebP ได้。

ท่าที่หนึ่ง： <picture>แท็ก

<picture>เป็นแท็กใหม่ใน HTML5 คล้ายกับ<video>นอกจากนี้ยังระบุทรัพยากรได้หลายรูปแบบ โดยให้เบราว์เซอร์เลือกรูปแบบที่ตนรองรับมาโหลด。

<picture class="picture">
  <source type="image/webp" srcset="image.webp">
  <img class="image" src="image.jpg">
</picture>

หากเบราว์เซอร์รองรับรูปแบบ WebP ก็จะโหลดimage.webp，มิฉะนั้นจะโหลดimage.jpg。

แม้เบราว์เซอร์จะไม่รองรับ<picture>แท็ก รูปภาพจะยังคงแสดงตามปกติ เพียงแต่ CSS อาจเลือกองค์ประกอบนั้นได้ไม่ถูกต้องpictureองค์ประกอบ ตัวอย่างเช่น ใน IE8 โค้ด CSS ต่อไปนี้จะไม่มีผล：

.picture img {  width: 100px;  height: 100px;
}

แต่สามารถเขียนสไตล์ให้ภาพแบบนี้ได้：

.image {  width: 100px;  height: 100px;
}

แม้เบราว์เซอร์จะใช้รูปภาพในรูปแบบ WebP สุดท้ายก็ยังคงนำไปใช้imgสไตล์ขององค์ประกอบ。

แต่ขอเพียงใช้html5shiv，ทำให้เบราว์เซอร์รุ่นเก่ารองรับแท็กนี้ แล้วตัวเลือก CSS ก็จะใช้งานได้ตามปกติ。

วิธีนี้ง่ายที่สุด แต่ใช้กับรูปภาพใน CSS ไม่ได้（เช่น ภาพพื้นหลัง）

วิธีที่สอง：ใช้ JS แทนที่ URL ของรูปภาพ。

หน้าเว็บหลายหน้าของเรามักใช้ “การโหลดแบบขี้เกียจ” กับรูปภาพ——โดยทั่วไปจะนำ URL ของรูปภาพไปใส่ไว้ในimgในแอตทริบิวต์ที่กำหนดเองของเอลิเมนต์ จากนั้นใช้ JS กำหนด URL ให้กับสิ่งต่อไปนี้เมื่อถึงเวลาที่เหมาะสมsrcแอตทริบิวต์ ด้วยหลักการคล้ายกันนี้ เราสามารถกำหนดให้กับimgกำหนดสิ่งที่แตกต่างกันให้แก่องค์ประกอบsrcค่า。

ก่อนอื่นเราต้องใช้ JS ตรวจสอบว่าเบราว์เซอร์รองรับรูปแบบ WebP หรือไม่ โดยส่งภาพรูปแบบ WebP ให้เบราว์เซอร์ แล้วดูว่าเบราว์เซอร์แสดงผลได้อย่างถูกต้องหรือไม่ วิธีนี้ทำงานแบบอะซิงโครนัส จึงต้องเขียนการทำงานถัดไปไว้ในฟังก์ชันคอลแบ็ก เราสามารถจัดเก็บผลลัพธ์ไว้ในlocalStorageภายใน เพื่อจะได้ไม่ต้องตรวจสอบซ้ำอีกในภายหลัง

function checkWebp(callback) {  var img = new Image();
  img.onload = function () {    var result = (img.width > 0) && (img.height > 0);
    callback(result);
  };
  img.onerror = function () {
    callback(false);
  };
  img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}

จากนั้นใช้โค้ดด้านล่างแทนที่ src ที่เกี่ยวข้องตามการรองรับ WebP

function showImage(useWebp){  var imgs = Array.from(document.querySelectorAll('img'));

  imgs.forEach(function(i){    var src = i.attributes['data-src'].value;    if (useWebp){
      src = src.replace(/\.jpg$/, '.webp');
    }

    i.src = src;
  });
}

checkWebp(showImage);

ข้อดีของวิธีนี้คือสามารถใช้ร่วมกับฟังก์ชันโหลดแบบหน่วงเวลาที่มีอยู่แล้วได้ นอกจากนี้ เมื่อใช้ JS เรายังจัดการรูปภาพใน CSS（เช่น ภาพพื้นหลัง เป็นต้น）ได้ด้วย

วิธีที่สาม：ใช้ JS ถอดรหัสภาพ WebP

ในเมื่อตัวถอดรหัส WebP เป็นโอเพนซอร์ส แล้วจะใช้ JS เขียนขึ้นมาได้หรือไม่？ได้แน่นอน，มีคนเขียนตัวถอดรหัส WebP ด้วย JS ขึ้นมาแล้ว。การนำไลบรารี JS นี้มาใช้ ก็คือการใช้ JS ถอดรหัสภาพ WebP ทั้งหมดแล้วแปลงเป็นbase64，จากนั้นแทนที่ URL เดิม เท่านี้ก็ทำให้เบราว์เซอร์ที่เดิมไม่รองรับ WebP แสดงภาพ WebP ได้ตามปกติ วิธีใช้ไลบรารีนี้ง่ายมาก เพียงอ่านคำอธิบายบนหน้าเว็บก็พอ。

ข้อเสียของวิธีนี้คือ เนื่องจาก JS ต้องถอดรหัสภาพ WebP จึงต้องส่งคำขอแบบอะซิงโครนัสไปยัง URL ใน src ที่จุดนี้（แต่เนื่องจากก่อนหน้านี้ดาวน์โหลดภาพมาแล้วหนึ่งครั้ง จึงใช้แคชได้โดยตรง）；อีกทั้งการถอดรหัสด้วย JS ค่อนข้างช้าและกระทบต่อประสิทธิภาพ อาจต้องใช้เวลาสักระยะจึงจะแสดงภาพได้

ทั้งหมดนี้คือวิธีต่าง ๆ ในการใช้รูปภาพ WebP ในเบราว์เซอร์ ซึ่งสามารถเลือกใช้ให้เหมาะกับสถานการณ์จริงของตนเองได้ จากการใช้งานของเรา หลังเปลี่ยนมาใช้รูปแบบ WebP ขนาดรูปภาพโดยทั่วไปลดลงมากกว่า 1/3 ทั้งช่วยให้โหลดเร็วขึ้นและประหยัดปริมาณอินเทอร์เน็ตของผู้ใช้ เราจึงแนะนำอย่างยิ่งให้เริ่มใช้รูปแบบนี้ตั้งแต่ตอนนี้