การแสดงอิมเมจ AVIF

1. บทนำ

รูปภาพคิดเป็นมากกว่า 60% ของไบต์โดยเฉลี่ยที่จำเป็นต่อการโหลดหน้าเว็บ การใช้ AVIF ช่วยให้คุณลดขนาดรูปภาพและทำให้เว็บไซต์โหลดเร็วขึ้นได้

AVIF คืออะไร

AVIF คือรูปแบบรูปภาพที่ได้จากสตรีมบิตวิดีโอ AV1 AVIF สร้างขึ้นเพื่อประสิทธิภาพการบีบอัด

ทำไมต้อง AVIF

รูปภาพ AVIF มีขนาดเล็กกว่ารูปภาพ JPEG, PNG, GIF หรือ WebP มาก โดยมีคุณภาพเท่ากันหรือดีกว่า

สิ่งที่คุณจะได้เรียนรู้

วิธีสร้างรูปภาพ AVIF จากรูปภาพ
วิธีแสดงรูปภาพ AVIF ในหน้าเว็บ

สิ่งที่คุณต้องมี

เบราว์เซอร์หลักใดก็ได้
โปรแกรมแก้ไขข้อความ
cmake
git
นินจา
รูปภาพ ฉันได้ระบุไว้ที่นี่
FFmpeg

2. การสร้างรูปภาพ AVIF ด้วย Squoosh

Squoosh เป็นเว็บแอปสำหรับการบีบอัดรูปภาพ ซึ่งช่วยให้คุณบีบอัดรูปภาพเป็นรูปภาพ AVIF ได้อย่างง่ายดาย

เปิด https://squoosh.app
วางรูปภาพในเครื่องลงใน Squoosh

ภาพหน้าจอ Squoosh

เลือก AVIF จากช่องรายการแบบเลื่อนลงของบีบอัด

ช่องแบบเลื่อนลงของ Squoosh

จากนั้น Squoosh จะบีบอัดรูปภาพเป็นรูปภาพ AVIF เมื่อ Squoosh ทำงานเสร็จแล้ว จะแสดงปุ่มดาวน์โหลดพร้อมสถิติบางอย่างเกี่ยวกับรูปภาพ AVIF ที่มุมขวาล่าง

ปุ่มดาวน์โหลด Squoosh

รูปภาพตัวอย่างต้นฉบับมีขนาด 3340 KB และรูปภาพที่บีบอัดมีขนาด 378 KB รูปภาพตัวอย่างได้รับการบีบอัดให้มีขนาดเล็กกว่ารูปภาพต้นฉบับเกือบ 10 เท่า

ดาวน์โหลดรูปภาพ AVIF

คลิกปุ่มดาวน์โหลด แล้วระบบจะบันทึกรูปภาพ AVIF ลงในไดรฟ์ในเครื่อง

ตอนนี้คุณมีรูปภาพ AVIF ของตัวเองแล้ว

3. การสร้างตัวเข้ารหัสบรรทัดคำสั่ง avifenc

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

รับรหัส

git clone https://github.com/AOMediaCodec/libavif.git

เปลี่ยนไดเรกทอรีเป็น libavif

cd libavif/

คุณกำหนดค่า avifenc และ libavif เพื่อสร้างได้หลายวิธี ดูข้อมูลเพิ่มเติมได้ที่ libavif เราจะสร้าง avifenc เพื่อให้ลิงก์กับตัวเข้ารหัส libaom, ตัวถอดรหัส dav1d และไลบรารีการประมวลผล libyuv แบบคงที่

สร้างเครื่องมือเข้ารหัสบรรทัดคำสั่ง avifenc

การสร้างไดเรกทอรีบิลด์สำหรับ avifenc เป็นไอเดียที่ดี

mkdir build

เปลี่ยนไปใช้ไดเรกทอรีบิลด์

cd build

สร้างไฟล์บิลด์สำหรับ avifenc

cmake -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../

สร้าง avifenc

make

คุณสร้าง avifenc เรียบร้อยแล้ว

4. การสร้างรูปภาพ AVIF ด้วย avifenc

สร้างรูปภาพ AVIF ด้วยการตั้งค่าเริ่มต้น

พารามิเตอร์พื้นฐานที่สุดสำหรับ avifenc ในการเรียกใช้คือการตั้งค่าไฟล์อินพุตและเอาต์พุต

./avifenc happy_dog.jpg example.avif

ตอนนี้คุณมีรูปภาพ AVIF ที่ 2 เป็นของตัวเองแล้ว

การเปลี่ยนคุณภาพของการเข้ารหัส AVIF

โดยปกติแล้ว พารามิเตอร์เดียวที่คุณอาจต้องการเปลี่ยนในการเข้ารหัส AVIF คือพารามิเตอร์ quality quality คือพารามิเตอร์ที่แลกเปลี่ยนคุณภาพของรูปภาพที่บีบอัดกับขนาดของไฟล์ เช่น ไฟล์คุณภาพสูง (-q 90) จะมีขนาดใหญ่กว่าไฟล์คุณภาพต่ำ (-q 20) มาก แต่ไฟล์คุณภาพสูงจะดูดีกว่ามาก

5. แสดงรูปภาพ AVIF ในหน้าเว็บ

ตอนนี้เรามาแสดงผลงานทั้งหมดของคุณให้โลกได้เห็นกัน

สร้างหน้าเว็บเพื่อแสดงรูปภาพ AVIF

สร้างไฟล์ชื่อ avif_example.html

เปิด avif_example.html ในเครื่องมือแก้ไขข้อความ แล้วพิมพ์โค้ดนี้

<html>
  <head>
    <title>AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="example.avif" />
      <img src="happy_dog.jpg" />
    </picture>
  </body>
</html>

คัดลอกไฟล์ต้นฉบับ (ในกรณีของฉันคือ happy_dog.jpg) และไฟล์ AVIF (eaxmple.avif) ไปยังไดเรกทอรีเดียวกับ avif_example.html

เราใช้องค์ประกอบ picture เพื่อแสดงรูปภาพ AVIF หากเบราว์เซอร์รองรับ AVIF และใช้ JPEG เป็นรูปภาพสำรองหากเบราว์เซอร์ไม่รองรับ ดูข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ picture ได้ที่นี่

เปิดหน้าเว็บใน Chrome

วิธีหนึ่งในการเปิดไฟล์ HTML คือการลาก avif_example.html ไปยัง Chrome อีกตัวเลือกหนึ่งในการเปิดไฟล์ HTML คือการแสดง avif_example.html จากเซิร์ฟเวอร์ HTTP

ตอนนี้ Chrome ควรแสดงรูปภาพ AVIF แล้ว คุณสามารถทดสอบได้โดยคลิกขวาที่รูปภาพแล้วเลือก Save image as... ซึ่งจะเปิดกล่องโต้ตอบที่มี example.avif อีกตัวเลือกหนึ่งคือเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome แล้วดูว่ามีการดาวน์โหลด example.avif หรือไม่

6. การสร้างรูปภาพ AVIF แบบเคลื่อนไหวด้วย FFmpeg

สร้างรูปภาพ AVIF แบบเคลื่อนไหว

เรียกใช้คำสั่งนี้เพื่อสร้างรูปภาพ AVIF แบบเคลื่อนไหวจากไฟล์ y4m

ffmpeg -i ice_qcif_15fps.y4m animated.avif

ตอนนี้คุณก็มีรูปภาพ AVIF แบบเคลื่อนไหวเป็นของตัวเองแล้ว

แสดงรูปภาพ AVIF แบบเคลื่อนไหวในหน้าเว็บ

สร้างไฟล์ชื่อ avif_animated_example.html

เปิด avif_animated_example.html ในเครื่องมือแก้ไขข้อความ แล้วพิมพ์โค้ดนี้

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

คัดลอกไฟล์ต้นฉบับ (ในกรณีข้างต้นคือ ice_qcif_15fps.gif) และไฟล์ AVIF (animated.avif) ไปยังไดเรกทอรีเดียวกับ avif_animated_example.html

เปิดหน้าเว็บใน Chrome

วิธีหนึ่งในการเปิดไฟล์ HTML คือการลาก avif_animated_example.html ไปยัง Chrome อีกตัวเลือกหนึ่งในการเปิดไฟล์ HTML คือการแสดง avif_animated_example.html จากเซิร์ฟเวอร์ HTTP

ตอนนี้รูปภาพ AVIF แบบเคลื่อนไหวควรแสดงใน Chrome แล้ว

หากใช้สื่อตัวอย่างที่ให้ไว้ ควรมีลักษณะดังนี้

ลานน้ำแข็งแบบเคลื่อนไหว

คุณสามารถทดสอบว่ารูปภาพ AVIF เป็นภาพเคลื่อนไหวได้โดยคลิกขวาที่รูปภาพแล้วเลือก Save image as... ซึ่งควรจะเปิดกล่องโต้ตอบที่มี animated.avif อีกตัวเลือกหนึ่งคือเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome แล้วดูว่ามีการดาวน์โหลด animated.avif หรือไม่

7. การสร้างรูปภาพ AVIF แบบเคลื่อนไหวด้วย avifenc

แปลงสื่อต้นฉบับเป็นรูปแบบ y4m

avifenc รองรับ y4m เป็นอินพุตในการสร้างรูปภาพ AVIF แบบเคลื่อนไหว ตัวเลือกที่ยอดเยี่ยมในการสร้างไฟล์ y4m คือการใช้ FFmpeg

ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m

สร้างรูปภาพ AVIF แบบเคลื่อนไหว

เรียกใช้คำสั่งนี้เพื่อสร้างรูปภาพ AVIF แบบเคลื่อนไหวจากไฟล์ y4m

./avifenc ice_qcif_15fps.y4m animated.avif

ตอนนี้คุณมีรูปภาพ AVIF เคลื่อนไหวที่ 2 ของตัวเองแล้ว

แสดงรูปภาพ AVIF แบบเคลื่อนไหวในหน้าเว็บ

สร้างไฟล์ชื่อ avif_animated_example.html

เปิด avif_animated_example.html ในเครื่องมือแก้ไขข้อความ แล้วพิมพ์โค้ดนี้

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

เปิดหน้าเว็บใน Chrome

ตอนนี้รูปภาพ AVIF แบบเคลื่อนไหวควรแสดงใน Chrome แล้ว

หากใช้สื่อตัวอย่างที่ให้ไว้ ควรมีลักษณะดังนี้

ลานน้ำแข็งแบบเคลื่อนไหว

การเปลี่ยนคุณภาพของการเข้ารหัส AVIF

ไฟล์ ice_qcif_15fps.gif มีขนาดใหญ่กว่าประมาณ 7 เท่าและมีคุณภาพแย่กว่ามาก คุณสามารถเปลี่ยนคุณภาพของ AVIF ให้ใกล้เคียงกับคุณภาพของ ice_qcif_15fps.gif ได้โดยเปลี่ยนพารามิเตอร์คุณภาพเป็น 20

./avifenc -q 20 ice_qcif_15fps.y4m animated.avif

ตอนนี้ไฟล์ AVIF แบบเคลื่อนไหวและ ice_qcif_15fps.gif มีคุณภาพใกล้เคียงกัน แต่ไฟล์ GIF มีขนาดใหญ่กว่าประมาณ 22 เท่า

8. ยินดีด้วย

คุณทำโค้ดแล็บการแสดงรูปภาพ AVIF เสร็จแล้ว

เราหวังว่าคุณจะเห็นว่า AVIF ช่วยให้รูปภาพมีขนาดเล็กลงและส่งผ่านทางเว็บได้อย่างมีประสิทธิภาพมากขึ้นได้อย่างไร คุณดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์ของ AVIF ได้ในโพสต์ที่ยอดเยี่ยมของ Jake Archibald