- AVIF mang lại khả năng nén tốt hơn hơn 50% so với JPEG nhờ tận dụng codec video AV1, giúp tăng đáng kể hiệu năng của Core Web Vitals.
- Mặc dù khả năng hỗ trợ định dạng JPG hiện nay gần như phổ biến trên mọi trình duyệt, nhưng các phần mềm cũ và dịch vụ in ấn chuyên nghiệp vẫn yêu cầu định dạng JPG để tương thích.
- Việc triển khai chiến lược dự phòng ba lớp với phần tử hình ảnh đảm bảo trải nghiệm người dùng liền mạch trên tất cả các thiết bị.
Hãy nói thẳng thắn: web về cơ bản là một bộ sưu tập khổng lồ các hình ảnh, và nếu những hình ảnh đó quá nặng, người dùng sẽ rời trang nhanh hơn cả khi bạn kịp nói "băng thông". Từ lâu, chúng ta đã nghĩ WebP là định dạng tối ưu nhất, nhưng AVIF đã can thiệp để viết lại hoàn toàn các quy tắc về cách chúng ta xử lý tài sản hình ảnh trực tuyến. Đây không chỉ là một sự điều chỉnh nhỏ; chúng ta đang nói về một bước nhảy vọt khổng lồ về hiệu quả, khiến các định dạng cũ trông giống như những di vật từ thời internet quay số.
Nếu bạn từng thắc mắc tại sao trình duyệt Chrome của mình đột nhiên bắt đầu lưu hình ảnh dưới dạng tệp .avif hoặc tại sao một số công cụ chuyên nghiệp yêu thích của bạn không mở được chúng, thì bạn đã đến đúng chỗ. Chúng ta sẽ cùng tìm hiểu sâu về cấu trúc kỹ thuật của codec AV1 , khám phá cách cân bằng giữa chất lượng và kích thước tệp, và tìm ra cách tốt nhất để phục vụ những hình ảnh này sao cho trang web của bạn luôn nhanh như chớp mà không gây gián đoạn cho người dùng trên các thiết bị cũ hơn.
Bí quyết thành công: Vì sao AVIF là yếu tố thay đổi cuộc chơi
AVIF ban đầu không phải là định dạng hình ảnh; về cơ bản nó là một khung hình tĩnh từ codec video AV1 . Được phát triển bởi Liên minh Truyền thông Mở (bao gồm các ông lớn như Google, Netflix và Amazon), nó được thiết kế để loại bỏ các codec có bản quyền và cung cấp cho chúng ta một cách thức miễn phí để phát trực tuyến video độ phân giải cao. Khi họ áp dụng các thuật toán tương tự cho ảnh tĩnh, họ đã có được một thứ vô cùng mạnh mẽ: khả năng giảm kích thước tệp xuống 50% hoặc hơn so với JPEG trong khi vẫn giữ chất lượng hình ảnh gần như tương đương.
Điều gì khiến nó vượt trội hơn hẳn so với WebP hay JPG? Tất cả nằm ở thuật toán xử lý. Trong khi JPEG sử dụng hệ thống khối 8x8 cứng nhắc, AVIF sử dụng các phép biến đổi DCT có kích thước thay đổi , nghĩa là nó có thể sử dụng các khối lớn cho bầu trời xanh trong vắt và các khối nhỏ cho khuôn mặt chi tiết. Thêm vào đó, nó hỗ trợ Dải động cao (HDR) và Gam màu rộng (WCG) , cho phép hiển thị các màu sắc và độ sáng mà định dạng JPG tiêu chuẩn không thể có được.
Phân tích kỹ thuật: AV1 so với thế giới
Để hiểu rõ hơn về cơ chế hoạt động, chúng ta cần xem xét các chế độ dự đoán nội suy (Intra Prediction modes ). Trong khi WebP chỉ có một vài cách để dự đoán pixel, AV1 lại có tới 71 chế độ định hướng khác nhau . Điều này cho phép bộ mã hóa chính xác hơn nhiều về những gì đang diễn ra trong hình ảnh, nghĩa là ít dữ liệu "lãng phí" hơn được lưu trữ. Một tính năng đáng kinh ngạc khác là tổng hợp hạt phim (Film Grain Synthesis ). Thay vì cố gắng mã hóa từng hạt nhiễu nhỏ nhất trong ảnh chụp thiếu sáng—điều thường làm tăng kích thước tệp—AVI chỉ lưu trữ các thông số thống kê của hạt nhiễu và yêu cầu trình duyệt "giả lập" nó trong quá trình phát lại, tiết kiệm được rất nhiều dung lượng.
Sự đánh đổi: Tốc độ so với hiệu quả
Vấn đề ở đây là: định dạng AVIF khá tốn tài nguyên trong giai đoạn tạo file. Nếu bạn sử dụng công cụ như avifenc , bạn sẽ nhận thấy việc mã hóa ảnh mất nhiều thời gian hơn đáng kể so với WebP. Chúng ta đang nói đến sự khác biệt giữa giây và mili giây . Đối với hầu hết các nhà phát triển, điều này không phải là vấn đề vì bạn chỉ thực hiện nó một lần trong quá trình xây dựng, nhưng nếu bạn đang cố gắng chuyển đổi hình ảnh trực tiếp trên máy chủ đang hoạt động , bạn sẽ cần một chiến lược bộ nhớ đệm rất hiệu quả, nếu không CPU của bạn sẽ bị quá tải.
Chuyển đổi thực tế: Từ JPG sang AVIF
Khi bạn sử dụng phiên bản chính thức libavif công cụ, các cq-level (Mức lượng tử hóa) là nút điều chỉnh quan trọng nhất của bạn. Không giống như thang điểm 0-100 của JPEG, Mức cq của AVIF là nghịch đảo.: 0 là chất lượng không mất dữ liệu (và dung lượng rất lớn), trong khi 63 là chất lượng thấp nhất. Đối với hầu hết các dự án web, “Độ tuổi lý tưởng” thường nằm trong khoảng từ 18 đến 23.Nếu độ phân giải thấp hơn, hiệu quả về kích thước sẽ giảm dần, còn nếu cao hơn thì hình ảnh sẽ trông hơi thô khi phóng to.
Nếu bạn quen thuộc với dòng lệnh, bạn có thể tự động hóa việc này bằng cách sử dụng tập lệnh batch. Việc đặt tham số –speed thành 6 thường là sự cân bằng tốt nhất; nó đủ nhanh để không gây khó chịu nhưng đủ hiệu quả để giữ cho các tệp có kích thước nhỏ. Đối với những người không thích sử dụng terminal, các công cụ dựa trên web như Squoosh hoặc FormatVault cho phép bạn điều chỉnh chất lượng trực quan và xem kết quả theo thời gian thực mà không cần cài đặt bất cứ thứ gì.
Khoảng cách về khả năng tương thích: Tại sao bạn vẫn cần JPG
Mặc dù được hỗ trợ gần 95% trên các trình duyệt như Chrome, Firefox, Safari và Edge, định dạng AVIF không phải là giải pháp thần kỳ cho mọi vấn đề. Vấn đề không nằm ở trình duyệt; mà là ở các yếu tố khác. Các phần mềm cũ như Photoshop CS6 , các phiên bản cũ của Windows Photo Viewer và hầu hết các cổng tải lên của chính phủ hoặc doanh nghiệp đều không thể đọc được tệp AVIF. Nếu bạn cố gắng tải tệp .avif lên dịch vụ in ấn hoặc hệ thống quản lý nội dung (CMS) cũ, rất có thể bạn sẽ nhận được lỗi xác thực.
Đó là lý do tại sao việc chuyển đổi AVIF trở lại JPG vẫn là một kỹ năng cần thiết. Cho dù là cho một ứng dụng email như Outlook không hỗ trợ định dạng này, hay cho một bài thuyết trình PowerPoint, JPG vẫn là ngôn ngữ hình ảnh phổ biến. Các công cụ như Total Image Converter rất hữu ích cho việc này, đặc biệt khi bạn cần xử lý toàn bộ thư mục tải xuống cùng một lúc.
Phục vụ hình ảnh như một chuyên gia: Phương pháp dự phòng ba bước
Bạn không nên chỉ đơn giản đổi ảnh JPG sang AVIF rồi hy vọng mọi chuyện sẽ ổn. Cách làm chuyên nghiệp là sử dụng phần mềm chuyên dụng. <picture> phần tử. Bằng cách liệt kê Đầu tiên là AVIF, sau đó là WebP, và cuối cùng là JPEG.Bạn để trình duyệt tự chọn định dạng tốt nhất mà nó thực sự hiểu. Giống như việc có một thực đơn với ba tùy chọn; trình duyệt sẽ chọn tùy chọn đầu tiên mà nó thích.
Để giữ của bạn Các trang web cốt lõi trong khu vực xanh, luôn bao gồm thuộc tính chiều rộng và chiều cao rõ ràngĐiều này giúp ngăn chặn hiện tượng "Thay đổi bố cục tích lũy" (CLS) khó chịu, trong đó nội dung của bạn bị xáo trộn trong khi hình ảnh đang tải. Đối với hình ảnh chính "nổi bật", hãy thêm... fetchpriority="high" để yêu cầu trình duyệt tải nó ngay lập tức, nhưng sử dụng loading="lazy" Để mọi thứ khác được giữ ở mức tải ban đầu thấp.
Tác động đến SEO và trải nghiệm người dùng
Google không trao huy hiệu chỉ vì bạn sử dụng định dạng AVIF, nhưng họ rất chú trọng đến LCP (Largest Contentful Paint - Kích thước vùng hiển thị nội dung lớn nhất) . Khi bạn thu nhỏ một bức ảnh sản phẩm khổng lồ từ 400KB xuống còn 150KB, bạn đang trực tiếp rút ngắn thời gian cần thiết để trang web "sẵn sàng" tải. Điều này dẫn đến tỷ lệ thoát trang thấp hơn và tỷ lệ chuyển đổi cao hơn , đặc biệt đối với người dùng có kết nối di động không ổn định, nơi mỗi kilobyte đều rất quan trọng.
