@techtipsvn
Ảnh cho web

AVIF nhẹ hơn, JPEG XL giữ ảnh .jpg cũ: chọn định dạng ảnh nào cho web?

Hai định dạng ảnh cho web, mỗi bên thắng một kiểu.

2026-10-1708 slide2 phút đọcGiải thích
Slide bìa: AVIF nhẹ hơn, JPEG XL giữ ảnh .jpg cũ: chọn định dạng ảnh nào cho web?Slide 2Slide 3Slide 4Slide 5Slide 6Slide 7Slide 8
cuộn, vuốt, hoặc phím ←→01 / 08

Cùng một bài, đọc bằng chữ. Nhanh hơn và tìm lại được bằng Ctrl+F.

Vì sao giờ mới bàn

Hai định dạng ảnh mới hơn .jpg

AVIF và JPEG XL đều là định dạng ảnh, như .jpg nhưng mới hơn. Chrome 155 vừa thêm JPEG XL ngày 06/10/2026. Theo Jake Archibald, giờ trình duyệt lớn nào cũng mở được nó.

Số liệu

Số liệu trong bài lấy từ bài đo của Jake Archibald, đăng ngày 15/10/2026.

Hai cách nén ảnh

Lossy và lossless

Ảnh chụp trên web gần như luôn nén kiểu lossy. Kiểu này bỏ bớt chi tiết mắt khó thấy, nên file nhẹ. Còn lossless giữ nguyên từng điểm ảnh, file to hơn nhiều.

Ví dụ

File .jpg bạn hay gặp chính là ảnh lossy.

Ai thắng ở loại ảnh nào

Loại ảnhAVIFJPEG XL
Ảnh chụp+nhẹ hơn-nặng hơn 14–17%
Screenshot+nhẹ hơn nhiều-nặng hơn
Đổi .jpg có sẵnkhông có+nhỏ hơn 9–20%
Lossless-nặng hơn 30–120%+nhẹ nhất

Phe AVIF: file nhỏ, hiện nhanh

Với ảnh chụp, JPEG XL tốt nhất vẫn nặng hơn AVIF 14–17% ở cùng chất lượng. Tải xong, trình duyệt còn phải đọc file mới hiện ảnh. Ở chất lượng trung bình, JPEG XL làm bước này lâu gấp 2–3 lần.

Phe JPEG XL: đổi thẳng ảnh .jpg cũ

File .jxl là ảnh JPEG XL. Đổi ảnh .jpg có sẵn sang .jxl thì nhỏ hơn 9–20%, ảnh không xấu đi thêm. Ảnh càng to càng lợi: khoảng 9% khi rộng 400px, khoảng 20% khi rộng 4.900px.

Thêm một điểm

Mạng chậm, JPEG XL hiện ảnh mờ trước

Ảnh JPEG XL có thể hiện mờ trước, rồi nét dần khi tải tiếp. Chrome và Firefox làm được. Safari thì chờ tải xong mới hiện ảnh.

Bạn đứng về phía nào?

AVIF cho ảnh chụp mới nhẹ hơn. JPEG XL đổi được kho .jpg cũ. Project của bạn hợp với bên nào?

techtipstechtipsvnwebdevfrontendlaptrinh
Đọc tiếp

Bài khác cùng chủ đề

Slide bìa: React Native 0.88: thêm SceneDelegate trước khi build bằng Xcode 2709

React Native 0.88: thêm SceneDelegate trước khi build bằng Xcode 27

feature2′ đọc19.10
Slide bìa: Copilot ngừng Claude Opus 4.8, Opus 5 và GPT-5.6 Terra ngày 16/11: đổi sang model nào07

Copilot ngừng Claude Opus 4.8, Opus 5 và GPT-5.6 Terra ngày 16/11: đổi sang model nào

Tin1′ đọc18.10
Slide bìa: Review bằng AI khiến PostgreSQL 19 gỡ 8–10 tính năng? Người viết code kể lại09

Review bằng AI khiến PostgreSQL 19 gỡ 8–10 tính năng? Người viết code kể lại

Tin2′ đọc17.10
Slide bìa: Next.js 16.4 ensureStatic: một dòng để build báo lỗi khi trang static lẫn phần dynamic08

Next.js 16.4 ensureStatic: một dòng để build báo lỗi khi trang static lẫn phần dynamic

feature2′ đọc17.10

Mỗi ngày một bài mới.

Mẹo, giải thích và tin công nghệ cho sinh viên và dev mới đi làm. Một người viết, đăng đều.

Bài cũng được đăng lên TikTok, ở dạng slide.

TikTok@techtipsvn