Chọn định dạng ảnh phù hợp cho web

Ba câu hỏi cần đặt ra trước tiên

Trên một website thực tế, việc chọn định dạng cho mỗi ảnh quy về ba câu hỏi:

1. Ảnh thể hiện điều gì? Ảnh chụp hợp với các định dạng nén mất dữ liệu như JPG, WebP mất dữ liệu và AVIF, vì những sai lệch nhỏ bị lẫn vào chi tiết tự nhiên của ảnh. Ảnh chụp màn hình, chữ, biểu đồ và đồ họa màu phẳng có các cạnh sắc, nơi nén mất dữ liệu có thể để lại quầng nhiễu dễ thấy, nên chúng hợp với định dạng không mất dữ liệu (PNG, WebP không mất dữ liệu), hoặc SVG nếu chúng được vẽ bằng các hình khối.
2. Ảnh có cần độ trong suốt hoặc chuyển động không? JPG không có cả hai. PNG, WebP và AVIF có thể lưu đầy đủ kênh alpha với các cạnh mềm. Mỗi pixel GIF chỉ có thể trong suốt hoàn toàn hoặc đục hoàn toàn, nên các cạnh cong có thể trông răng cưa hoặc có viền lem trên nền màu. GIF, WebP, AVIF và APNG (PNG động) có thể chứa ảnh động, nhưng một video ngắn thường nhỏ hơn GIF rất nhiều.
3. Ảnh sẽ được đăng ở đâu? Trên các trang HTML của riêng mình, bạn có thể cung cấp nhiều định dạng. Hệ quản trị nội dung (CMS), nền tảng cửa hàng hoặc biểu mẫu tải lên sẽ tự quyết định chấp nhận định dạng nào và có thể tự chuyển đổi tệp, vì vậy hãy xem tài liệu hiện hành của chúng. Các chương trình email khác biệt với nhau nhiều hơn so với giữa các trình duyệt, nên JPG và PNG an toàn hơn cho bản tin email.

Để biết từng định dạng hoạt động ra sao, hãy xem JPG, PNG, WebP hay AVIF.

Chọn định dạng theo nội dung: bảng lựa chọn

Khi phục vụ AVIF hoặc WebP trên trang của riêng bạn, hãy giữ một phiên bản JPG hoặc PNG cho những trình duyệt và ứng dụng không hiển thị được các định dạng này. Khi một nền tảng chỉ nhận một tệp, định dạng ở cột dự phòng thường là lựa chọn an toàn. Favicon có quy tắc riêng; xem Kích thước, định dạng và thẻ HTML của favicon.

Để tạo vòng lặp kiểu GIF trên trang web, một phần tử <video> tắt tiếng với các thuộc tính autoplay, loop, muted và playsinline là cách thay thế phổ biến, vì trình duyệt thường cho phép video tắt tiếng tự động phát. Trong email, một số phiên bản Outlook dành cho máy tính chỉ hiển thị khung hình đầu tiên của GIF động, vì vậy hãy đặt thông điệp chính vào khung hình đó.

Cung cấp WebP hoặc AVIF kèm bản dự phòng

Trên những trang mà bạn tự viết HTML, phần tử <picture> cho phép mỗi trình duyệt dùng định dạng đầu tiên mà nó hỗ trợ:

<picture>
  <source srcset="/img/pasta-1600.avif" type="image/avif">
  <source srcset="/img/pasta-1600.webp" type="image/webp">
  <img src="/img/pasta-1600.jpg" alt="Một bát mì Ý sốt cà chua" width="1600" height="1200">
</picture>

Trình duyệt đọc các phần tử <source> theo thứ tự và bỏ qua phần tử nào có type mà nó không hỗ trợ. Phần tử <img> là bắt buộc: nó mang văn bản thay thế (alt) cùng chiều rộng và chiều cao giúp trình duyệt dành sẵn chỗ cho ảnh, và tệp của nó được hiển thị khi không có nguồn nào phù hợp. Với CSS như img { max-width: 100%; height: auto; }, ảnh vẫn co lại cho vừa màn hình hẹp và giữ nguyên tỷ lệ đó. Để cung cấp thêm nhiều kích thước, hãy liệt kê từng tệp kèm chiều rộng của nó trong srcset và thêm thuộc tính sizes, như được mô tả trong Đổi kích thước ảnh: pixel, tỷ lệ khung hình và DPI.

Nhiều CMS và CDN ảnh có thể tạo bản sao WebP hoặc AVIF và chọn một bản cho từng khách truy cập. Nếu hệ thống của bạn làm được việc này, hãy tải lên một tệp JPG hoặc PNG chất lượng cao và để hệ thống tự chuyển đổi, thay vì tải lên một tệp bạn đã nén mạnh từ trước, để ảnh không bị nén hai lần.

Ví dụ thực tế: các ảnh của một bài viết

Giả sử một bài viết công thức nấu ăn có ba ảnh, và cột nội dung của trang rộng tối đa 760 pixel CSS.

• Ảnh đầu trang. Ảnh gốc chụp bằng điện thoại có kích thước 4032 × 3024 pixel, khoảng 12,2 megapixel. Một cột rộng 760 pixel trên màn hình có hai pixel thiết bị cho mỗi pixel CSS cần khoảng 1.520 pixel chiều ngang, nên kích thước 1600 × 1200 giữ được tỷ lệ 4:3 với 1,92 megapixel, khoảng 16% so với ảnh gốc. Hãy đổi kích thước trước, rồi lưu thành AVIF hoặc WebP kèm một bản JPG dự phòng; ảnh gốc ở kích thước đầy đủ có số pixel gấp hơn sáu lần phiên bản 1600 × 1200, và trình duyệt sẽ phải thu nhỏ, bỏ đi phần lớn số pixel đó.
• Logo có nền trong suốt. Tệp PNG của nhà thiết kế có kích thước 1000 × 500 pixel và được hiển thị rộng 200 pixel CSS, nên kích thước 400 × 200 là đủ cho màn hình có hai pixel thiết bị cho mỗi pixel CSS. Hãy giữ ở dạng PNG hoặc WebP; nếu lưu thành JPG, các vùng trong suốt sẽ bị lấp bằng một màu đặc và hiện thành một khung chữ nhật trên phần đầu trang có nền màu. Nếu nhà thiết kế có thể xuất tệp SVG thì càng tốt hơn.
• Ảnh chụp màn hình một ứng dụng hẹn giờ. Chỉ có chữ và màu phẳng: hãy lưu dưới dạng PNG. JPG có thể tạo ra các đốm lấm tấm quanh chữ, và người đọc dễ nhận ra chúng hơn so với những sai lệch nhỏ trong ảnh chụp.

Chuyển đổi tệp bằng công cụ chuyển đổi ảnh của LeedyBox

Công cụ Chuyển đổi ảnh thay đổi định dạng của một hoặc nhiều ảnh ngay trong trình duyệt của bạn, không tải dữ liệu ảnh lên LeedyBox.

1. Nhấp vào “Chọn tệp hoặc kéo & thả vào đây” hoặc thả các tệp PNG, JPG, WebP, BMP, GIF hay AVIF vào vùng đó. Các loại tệp khác, chẳng hạn HEIC hoặc SVG, và những tệp mà trình duyệt không giải mã được sẽ bị từ chối kèm một thông báo.
2. Mỗi tệp có một menu định dạng riêng (trên màn hình rộng có nhãn “To:”), ban đầu được đặt là JPG. Hãy chọn JPG, PNG, WEBP, BMP, AVIF hoặc ICO cho từng tệp, hoặc cho tất cả các tệp bằng “Đặt tất cả định dạng thành...” trong phần “Tùy chọn hàng loạt”.
3. Nhấp “Chuyển đổi & Tải xuống”. Nếu chỉ có một tệp, tệp sẽ được lưu với tên chẳng hạn như logo_converted.webp; nếu có nhiều tệp, chúng được gộp trong leedybox_converted_images.zip.

• Kích thước pixel được giữ nguyên, trừ khi chuyển sang ICO. Hãy đổi kích thước trước bằng công cụ Đổi kích thước ảnh, hoặc dùng tùy chọn “Giới hạn cả chiều rộng và chiều cao” trong công cụ Nén ảnh.
• Với JPG, WebP và AVIF, công cụ yêu cầu trình duyệt dùng mức chất lượng 0,92 trên thang từ 0 đến 1, và không có thanh trượt chất lượng. Thiết lập này ưu tiên giữ chi tiết hơn là giảm dung lượng tệp. Điều đó cũng có nghĩa là WebP được lưu ở dạng mất dữ liệu: không có tùy chọn WebP không mất dữ liệu, vì vậy hãy chuyển ảnh chụp màn hình và đồ họa nhiều chữ sang PNG. Để có tệp nhỏ hơn, công cụ nén ảnh có thanh trượt chất lượng (mặc định 75) và tùy chọn dung lượng mục tiêu; xem Giải thích các thiết lập nén ảnh.
• Tệp JPG và tệp BMP do công cụ tạo ra không có độ trong suốt, nên các vùng trong suốt sẽ chuyển thành màu trắng. Tệp BMP còn không được nén, với 3 byte mỗi pixel (mỗi hàng được đệm cho đủ bội số của 4 byte) cộng thêm phần đầu tệp 54 byte: một ảnh 1200 × 800 sẽ thành 2.880.054 byte (khoảng 2,9 MB) bất kể ảnh thể hiện gì, vì vậy BMP không phù hợp để dùng trên trang web.
• Tệp ICO chứa một ảnh PNG và giữ được độ trong suốt. Ảnh có cạnh dài hơn 256 pixel sẽ được thu nhỏ cho vừa khung 256 × 256, nên một logo 1000 × 500 sẽ thành 256 × 128; ảnh nhỏ hơn giữ nguyên kích thước. Để tạo favicon.ico với các kích thước 16, 32 và 48 pixel cùng biểu tượng PNG và Apple touch icon, hãy dùng công cụ Tạo favicon.
• Chỉ chọn được AVIF nếu trình duyệt của bạn tạo được tệp AVIF, điều mà hiện nay nhiều trình duyệt chưa làm được; nếu không, tùy chọn này hiển thị là “AVIF (trình duyệt không hỗ trợ)”. Nếu trình duyệt không tạo được định dạng đã chọn (khả năng xuất WebP cũng tùy thuộc vào trình duyệt), một thông báo sẽ xuất hiện và không có tệp nào được lưu, thay vì lưu dữ liệu PNG dưới phần mở rộng sai. Khi chuyển nhiều tệp, chỉ cần một lỗi như vậy là cả lô dừng lại, nên không có tệp ZIP nào được tạo.
• Mỗi ảnh được vẽ lại và mã hóa mới, nên dữ liệu EXIF, vị trí GPS và hồ sơ màu của ảnh gốc không được giữ lại, còn GIF, WebP hoặc AVIF động sẽ trở thành ảnh tĩnh chỉ gồm một khung hình. Công cụ không tạo tệp SVG, GIF hay tệp ảnh động.

Các lỗi thường gặp và cách khắc phục

• Logo trong suốt bị bao quanh bởi một khung trắng hoặc đen. Có lẽ logo đã được lưu dưới dạng JPG hoặc BMP không có độ trong suốt. Hãy dùng PNG hoặc WebP; xem vì sao độ trong suốt bị mất khi chuyển sang JPG.
• Tệp PNG lớn hơn nhiều so với tệp JPG ban đầu. PNG lưu chính xác từng pixel, kể cả nhiễu hạt và các vết nén của JPG, và việc chuyển đổi không khôi phục được chi tiết mà JPG đã làm mất. Hãy dùng WebP hoặc JPG cho ảnh chụp.
• Biểu mẫu tải lên từ chối WebP hoặc AVIF. Một số biểu mẫu chỉ chấp nhận JPG và PNG. Hãy chuyển ảnh chụp sang JPG và đồ họa trong suốt sang PNG. Chỉ đổi phần mở rộng của tên tệp không làm thay đổi định dạng.
• Tệp WebP hầu như không nhỏ hơn tệp JPG, thậm chí còn lớn hơn. Tệp JPG gốc có thể đã bị nén mạnh, và mức chất lượng 0,92 của công cụ chuyển đổi giữ lại nhiều chi tiết, kể cả các vết nén sẵn có của JPG, vốn cũng tốn byte để lưu. Nếu tệp vẫn quá lớn dù ở định dạng nào, có thể ảnh vẫn đang ở kích thước gốc của máy ảnh. Hãy đổi kích thước về kích thước hiển thị, sau đó dùng công cụ nén ảnh và so sánh kết quả.
• Màu sắc trông nhạt hơn so với ảnh gốc. Công cụ chuyển đổi vẽ từng ảnh lên canvas của trình duyệt, vốn mặc định làm việc trong không gian màu sRGB, và không giữ hồ sơ màu gốc. Ảnh chụp trong không gian màu rộng hơn như Display P3 hoặc Adobe RGB có thể mất bớt những màu bão hòa nhất, và điều này dễ thấy nhất trên màn hình có gam màu rộng. Hãy xuất một bản sao sRGB từ trình chỉnh sửa ảnh, kiểm tra bản đó ngay trong trình chỉnh sửa rồi mới chuyển đổi.
• Ảnh HEIC từ điện thoại không được chấp nhận. HEIC không nằm trong danh sách định dạng của công cụ chuyển đổi. Nhiều điện thoại có thể xuất hoặc chia sẻ ảnh dưới dạng JPG; hãy chuyển đổi bản sao đó.

Cần kiểm tra gì trước khi đăng

• Mở trang trên hai trình duyệt và trên điện thoại. Nếu dùng <picture>, hãy kiểm tra cả bản dự phòng bằng cách tạm thời bỏ các nguồn AVIF và WebP.
• So sánh tệp mới với ảnh gốc ở kích thước thực, chú ý đến khuôn mặt, chữ và các vùng chuyển màu.
• Trong bảng Network của công cụ dành cho nhà phát triển trên trình duyệt, hãy kiểm tra tệp nào đã được tải xuống và dung lượng của nó.
• Nếu website có chế độ tối, hãy xem các ảnh trong suốt trên cả nền sáng lẫn nền tối.
• Giữ lại ảnh gốc và chuyển đổi từ ảnh gốc; mỗi lần lưu lại một tệp nén mất dữ liệu sẽ cộng thêm sai lệch mới vào sai lệch cũ.

Câu hỏi thường gặp