1. บทนำ
รูปภาพคิดเป็นมากกว่า 60% ของไบต์โดยเฉลี่ยที่ต้องใช้ในการโหลดหน้าเว็บ การใช้ AVIF จะช่วยให้รูปภาพมีขนาดเล็กลงและทำให้เว็บไซต์โหลดได้เร็วขึ้น
AVIF คืออะไร
AVIF คือรูปแบบรูปภาพใหม่ที่ได้มาจากบิตรีมวิดีโอ AV1 AVIF สร้างขึ้นเพื่อประสิทธิภาพในการบีบอัด
เหตุใดจึงควรใช้ AVIF
รูปภาพ AVIF มีขนาดเล็กกว่ารูปภาพ JPEG, PNG, GIF หรือ WebP ซึ่งมีคุณภาพเท่ากันหรือดีกว่ามาก
สิ่งที่คุณจะได้เรียนรู้
- วิธีสร้างรูปภาพ AVIF จากรูปภาพของคุณ
- วิธีแสดงผลรูปภาพ AVIF ในหน้าเว็บ
สิ่งที่ต้องมี
2. การสร้างรูปภาพ AVIF ด้วย Squoosh
Squoosh เป็นเว็บแอปสำหรับการบีบอัดรูปภาพ คุณสามารถใช้สคูชเพื่อบีบอัดรูปภาพเป็นรูปภาพ AVIF ได้ง่ายๆ
- เปิด https://squoosh.app
- วางรูปภาพในเครื่องลงใน Squoosh
- เลือก AVIF จากช่องรายการแบบเลื่อนลง Compress
จากนั้น Squoosh จะบีบอัดรูปภาพเป็นรูปภาพ AVIF เมื่อทำ Squoosh เสร็จแล้ว ระบบจะแสดงปุ่มดาวน์โหลดพร้อมสถิติเกี่ยวกับรูปภาพ AVIF ที่มุมขวาล่าง
ภาพตัวอย่างต้นฉบับคือ 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 ให้ลิงก์แบบคงที่กับไลบรารีโปรแกรมเปลี่ยนไฟล์และตัวถอดรหัส Av1 ซึ่งก็คือ libaom
- รับและสร้าง Libaom
เปลี่ยนเป็นไดเรกทอรีส่วนขยาย libavif
cd ext
คำสั่งถัดไปจะดึงซอร์สโค้ด libaom และสร้าง libaom แบบคงที่
./aom.cmd
เปลี่ยนไดเรกทอรีเป็น libavif
cd ../
- สร้างเครื่องมือการเข้ารหัสบรรทัดคำสั่ง avifenc
การสร้างไดเรกทอรีบิลด์สำหรับ avifenc เป็นความคิดที่ดี
mkdir build
เปลี่ยนเป็นไดเรกทอรีบิลด์
cd build
สร้างไฟล์บิลด์สำหรับ avifenc
cmake -DCMAKE_BUILD_TYPE=Release -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../
สร้าง avifenc
make
คุณสร้าง avifenc สำเร็จแล้ว!
4. การสร้างอิมเมจ AVIF ด้วย avifenc
- สร้างอิมเมจ AVIF ด้วยการตั้งค่าเริ่มต้น
พารามิเตอร์พื้นฐานที่สุดที่ avifenc ทำงานคือการตั้งค่าไฟล์อินพุตและเอาต์พุต
./avifenc happy_dog.jpg example.avif --min 0 --max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420
Avifenc มีตัวเลือกมากมายที่จะส่งผลต่อทั้งคุณภาพและความเร็ว หากต้องการดูตัวเลือกต่างๆ และดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกเหล่านี้ ให้เรียกใช้ ./avifenc
ตอนนี้คุณมีอิมเมจ AVIF ที่ 2 ของตัวเองแล้ว
- กำลังเร่งโปรแกรมเปลี่ยนไฟล์
พารามิเตอร์อย่างหนึ่งที่อาจเปลี่ยนแปลงได้ดีโดยขึ้นอยู่กับจำนวนแกนที่คุณมีในเครื่องคือพารามิเตอร์ --jobs พารามิเตอร์นี้กำหนดจำนวนเทรด avifenc ที่จะใช้ในการสร้างรูปภาพ AVIF โปรดลองเรียกใช้บรรทัดคำสั่งนี้
./avifenc happy_dog.jpg example.avif --jobs 8
การดำเนินการนี้จะบอกให้ avifenc ใช้ 8 เทรดเมื่อสร้างอิมเมจ AVIF คอมพิวเตอร์ของฉันจะเร่งการเข้ารหัส AVIF ให้เร็วขึ้น 5 เท่า
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
เราใช้เอลิเมนต์
- เปิดหน้าเว็บใน Chrome
วิธีหนึ่งในการเปิดไฟล์ HTML คือการลาก avif_example.html ลงใน Chrome อีกตัวเลือกหนึ่งในการเปิดไฟล์ HTML คือการแสดง avif_example.html จากเซิร์ฟเวอร์ HTTP
ตอนนี้รูปภาพ AVIF ควรจะแสดงผลใน Chrome คุณทดสอบได้โดยการคลิกขวาที่รูปภาพและเลือก Save image as... ซึ่งจะเปิดกล่องโต้ตอบที่มี example.avif อีกตัวเลือกหนึ่งคือเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome และดูว่าดาวน์โหลด example.avif แล้ว
6. การสร้างรูปภาพ AVIF แบบเคลื่อนไหว
- แปลงสื่อต้นฉบับเป็นรูปแบบ y4m
avifenc รองรับ y4m เป็นอินพุตสำหรับสร้างรูปภาพ AVIF แบบเคลื่อนไหว ตัวเลือกที่ดีในการสร้างไฟล์ y4m คือการใช้ FFmpeg
ffmpeg -i input.gif -pix_fmt yuv420p -f yuv4mpegpipe output.y4m
- สร้างรูปภาพ AVIF แบบเคลื่อนไหว
เรียกใช้คำสั่งนี้เพื่อสร้างรูปภาพ AVIF แบบเคลื่อนไหวจากไฟล์ y4m
avifenc 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 ที่แสดงเสร็จแล้ว
เราหวังว่าคุณจะเข้าใจชัดเจนว่า AVIF จะช่วยให้รูปภาพของคุณเล็กลงและมีประสิทธิภาพมากขึ้นในการส่งผ่านเว็บได้อย่างไร คุณดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์ของ AVIF ได้ในโพสต์ดีๆ จาก Jake Archibald