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

การแสดงรูปภาพ AVIF

เกี่ยวกับ Codelab นี้

subjectอัปเดตล่าสุดเมื่อ ก.พ. 22, 2025
account_circleเขียนโดย Googler

1 บทนำ

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

AVIF คืออะไร

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

เหตุผลที่ควรใช้ AVIF

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

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

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

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

  • เบราว์เซอร์หลักๆ ใดก็ได้
  • เครื่องมือแก้ไขข้อความ
  • cmake
  • git
  • ninja
  • รูปภาพ เราได้ให้วิดีโอไว้ที่นี่
  • FFmpeg

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

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

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

ภาพหน้าจอ Squoosh

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

ช่องรายการแบบเลื่อนลงของ Squoosh

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

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

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

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

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

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

3 การสร้างโปรแกรมเปลี่ยนไฟล์ avifenc ในบรรทัดคำสั่ง

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

  1. รับรหัส
git clone https://github.com/AOMediaCodec/libavif.git
  1. เปลี่ยนไดเรกทอรีเป็น libavif
cd libavif/

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

  1. สร้างเครื่องมือการเข้ารหัสบรรทัดคำสั่ง 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

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

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

./avifenc happy_dog.jpg example.avif

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

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

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

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

มาแสดงให้โลกเห็นถึงผลงานที่คุณทุ่มเทกัน

  1. สร้างหน้าเว็บเพื่อแสดงรูปภาพ 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 ได้ที่นี่

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

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

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

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

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

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

ffmpeg -i ice_qcif_15fps.y4m animated.avif

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

  1. แสดงผลภาพ 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

  1. เปิดหน้าเว็บใน 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

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

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

ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m
  1. สร้างรูปภาพ AVIF แบบเคลื่อนไหว

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

./avifenc ice_qcif_15fps.y4m animated.avif

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

  1. แสดงผลภาพ 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

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

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

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

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

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

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

  1. การเปลี่ยนคุณภาพของการเข้ารหัส 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