หน้านี้ได้รับการแปลโดย Cloud Translation API

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

1. บทนำ

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

AVIF คืออะไร

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

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

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

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

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

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

เบราว์เซอร์หลักๆ ใดก็ได้
เครื่องมือแก้ไขข้อความ
cmake
git
ninja
รูปภาพ เราได้ให้วิดีโอไว้ที่นี่
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 โดย avifenc ใช้ 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

ตอนนี้รูปภาพ AVIF ควรแสดงผลใน Chrome คุณสามารถทดสอบได้โดยคลิกขวาที่รูปภาพแล้วเลือก 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