Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

การแสดงอิมเมจ 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 จากช่องแบบเลื่อนลง Compress

ช่องแบบเลื่อนลงของ 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

ตอนนี้รูปภาพ 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. ยินดีด้วย

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

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