Định dạng ảnh nào tốt nhất cho website?

“Định dạng tốt nhất” chưa phải là câu hỏi đúng nếu bạn chưa biết đó là loại hình ảnh nào. Một website chứa vài loại hình ảnh rất khác nhau và mỗi loại đều có lựa chọn tối ưu rõ ràng:

• Ảnh chụp (sản phẩm, con người, địa điểm): dùng định dạng nén mất dữ liệu. AVIF cho tệp nhỏ nhất, WebP là lựa chọn hiện đại mặc định an toàn, còn JPG là định dạng dự phòng mà mọi trình duyệt đều hiển thị được.
• Logo, biểu tượng và hình minh họa: SVG. Đây là đồ họa vector nên luôn sắc nét ở mọi kích thước trên mọi màn hình, còn tệp thường rất nhỏ. Chỉ chuyển sang định dạng điểm ảnh khi nền tảng không chấp nhận SVG.
• Ảnh chụp màn hình, đồ họa UI và mọi hình ảnh có độ trong suốt: PNG hoặc WebP không mất dữ liệu. Màu phẳng và cạnh sắc nét chính là những nội dung mà định dạng không mất dữ liệu nén hiệu quả.
• Ảnh động ngắn: dùng WebP hoặc AVIF động thay cho GIF, vì GIF bị giới hạn ở bảng màu nhỏ và tạo ra tệp lớn hơn nhiều.
• Favicon: dùng tệp ICO, lý tưởng nhất là kèm theo phiên bản SVG hoặc PNG; xem cách tạo favicon từ hình ảnh.

Sai lầm kinh điển là lưu ảnh chụp dưới dạng PNG. PNG lưu từng điểm ảnh mà không mất dữ liệu, điều này hoàn hảo cho logo nhưng rất tệ với ảnh chụp: tệp phình to gấp nhiều lần JPG mà không cải thiện rõ rệt về hình ảnh.

Với ảnh chụp, lựa chọn phụ thuộc vào mức độ bạn có thể dựa vào các trình duyệt mới:

• AVIF nén hiệu quả nhất: ở mức chất lượng web thông thường, tệp nhỏ hơn JPEG khoảng 50% và nhỏ hơn WebP 20–30%, đồng thời hỗ trợ HDR và dải màu rộng nếu bạn cần. Chrome, Firefox và Safari đều hiển thị được định dạng này (Safari kể từ phiên bản 16.4, vào năm 2023). Đổi lại, quá trình mã hóa chậm, đặc biệt với ảnh lớn, và khả năng hỗ trợ trong phần mềm máy tính cùng thiết bị cũ còn hạn chế.
• WebP là lựa chọn mặc định thực dụng: nhỏ hơn JPEG 25–35% ở cùng chất lượng hình ảnh, hỗ trợ độ trong suốt và được mọi trình duyệt phổ biến hỗ trợ kể từ năm 2020. Một số ứng dụng máy tính và công cụ cũ vẫn không mở được định dạng này; điều đó quan trọng với tệp bạn giao cho nhà thiết kế, chứ không phải tệp cung cấp cho khách truy cập.
• JPG là định dạng dự phòng phổ dụng. Đây là lựa chọn kém hiệu quả nhất trong ba định dạng, nhưng JPG được lưu ở mức chất lượng khoảng 75–82 thường không thể phân biệt với bản gốc trên màn hình, và mọi hệ thống trên web đều hiển thị được.

Thiết lập hiệu quả nhất là cung cấp AVIF cho trình duyệt hiểu định dạng này, WebP cho phần còn lại và giữ JPG cho mọi thứ cũ hơn. Nếu chỉ muốn chọn một định dạng, WebP với JPG dự phòng sẽ phục vụ gần như tất cả mọi người. Các bài so sánh trực tiếp nằm trong WebP với AVIF và WebP với JPG; với đồ họa thay vì ảnh chụp, hãy xem PNG với JPG.

Sau khi biết định dạng đích, việc chuyển đổi diễn ra nhanh chóng và dữ liệu không bao giờ rời khỏi máy của bạn. Trình chuyển đổi ảnh EditItAll chạy hoàn toàn trong trình duyệt:

1. Mở trình chuyển đổi rồi thả ảnh vào, có thể là một tệp hoặc cả một thư mục. Các lô tệp được xử lý cùng nhau.
2. Chọn định dạng đầu ra: WebP hoặc AVIF cho ảnh chụp, PNG cho đồ họa cần độ trong suốt. Có các lộ trình trực tiếp cho những tác vụ phổ biến: JPG sang WebP, PNG sang WebP, JPG sang AVIF và PNG sang AVIF.
3. Đặt chất lượng. Không có trường kích thước mục tiêu vì kích thước là kết quả đầu ra. Mỗi tệp hiển thị kích thước trước và sau, vì vậy hãy điều chỉnh nhẹ thanh trượt cho đến khi cả con số lẫn hình ảnh đều phù hợp.
4. Tải từng kết quả riêng lẻ hoặc tải tất cả dưới dạng một tệp ZIP.

Không có gì được tải lên; bạn có thể ngắt kết nối Internet sau khi trang tải xong mà vẫn tiếp tục chuyển đổi. Siêu dữ liệu EXIF và GPS cũng bị xóa khỏi mọi ảnh xuất ra, nên ảnh sản phẩm sẽ không công khai nơi ảnh được chụp. Công cụ hoàn toàn miễn phí, không cần tài khoản và không có hình mờ. Bạn đã có đúng định dạng và chỉ cần giảm kích thước? Hãy chuyển thẳng đến trình nén ảnh. Nếu một nền tảng bắt buộc phải có phiên bản điểm ảnh của logo vector, SVG sang PNG sẽ kết xuất logo ở bất kỳ kích thước nào bạn chọn.

Việc chọn định dạng rất đáng làm, nhưng ba thói quen sau tiết kiệm nhiều byte hơn cả việc chuyển từ JPG sang AVIF:

• Đổi kích thước theo kích thước bạn thực sự hiển thị. Ảnh từ máy ảnh rộng gấp nhiều lần không gian mà nó chiếm trên trang, và từng điểm ảnh dư thừa đều được tải xuống rồi bỏ đi. Các công cụ ảnh EditItAll có tùy chọn giới hạn kích thước tối đa dành riêng cho việc này.
• Nén một lần từ bản gốc. Mỗi lần lưu có mất dữ liệu đều loại bỏ thêm một chút chi tiết. Hãy giữ bản gốc, xuất bản dùng cho web từ đó và đừng lưu lại theo chuỗi từ JPG sang WebP rồi sang AVIF.
• Cung cấp định dạng hiện đại cùng định dạng dự phòng. Hãy ưu tiên AVIF hoặc WebP và để các trình duyệt cũ chuyển sang JPG hoặc PNG, nhờ đó không khách truy cập nào gặp ảnh bị lỗi.

Nếu báo cáo tốc độ yêu cầu bạn “mã hóa hình ảnh hiệu quả” hoặc “cung cấp hình ảnh ở định dạng thế hệ mới”, đây chính xác là quyết định mà báo cáo đề cập: khắc phục cảnh báo mã hóa hình ảnh hiệu quả hướng dẫn toàn bộ quy trình, còn nén JPEG cho web giải thích chi tiết về thanh trượt chất lượng. Bạn có thể tìm thêm hướng dẫn về định dạng trong nhóm chuyển đổi hình ảnh.