PageSpeed 2.1: 4 Định dạng ảnh phổ biến và cách dùng cho phù hợp

Trong bài viết này, mình muốn giới thiệu với các bạn 4 định dạng ảnh hay được dùng nhất trên các website hiện nay. Và cũng vì không có định dạng ảnh nào có thể đáp ứng tốt trong mọi trường hợp nên mình cũng sẽ mô tả luôn cách sử dụng chúng sao cho hợp lý nhé. Bắt đầu thôi.

1. JPGs

Đây là định dạng phổ biến nhất hiện nay vì dung lượng khi nén tốt (nhỏ) mà vẫn giữ được chất lượng ảnh đáng kể.

Phù hợp cho dùng ảnh với chất lượng cao và nhiều màu sắc phức tạp. Được khuyến cáo dùng trong đa số trường hợp nếu có thể, ví dụ như: ảnh sản phẩm, banner, background..v.v…

Lưu ý:

Do luôn có nền (mặc đính là trắng) nên không thể áp dụng cho các trường hợp ảnh cần có nền trong suốt.

2. PNG:

Cũng là định dạng phổ biến không thua kém gì JPGs nhưng lại có chất lượng hình ảnh nhỉnh hơn JPGs.

Rất phù hợp để dùng trong vài trường hợp cần chất lượng gần như tối đa, hình ảnh chụp sống động và xóa được phông nền như: logo, icon, hoặc các ảnh chồng lên phức tạp như vầy:

Lưu ý:

Ảnh PNG lại có dung lượng lớn hơn rất nhiều (x2, x3) so với JPGs. Thường chỉ nên dùng cho logo hoặc khi thật sự cần thiết.

3. GIF:

Là viết tắt của Graphics Interchange Format, một loại ảnh được tạo ra bởi CompuServe. Ảnh GIF thường bao gồm tối đa 256 (khá ít) nên ảnh GIF (tĩnh) thường có dung lượng nhỏ hơn JPGs nhiều.

Nhưng bù lại GIF cũng có thể lưu lại dạng nền trong suốt và hỗ trợ làm ảnh động khá tốt. Chắc anh chị em cũng không lạ gì các ảnh động phổ biến trên internet thay cho các clip ngắn khá hiệu quả và tối ưu dung lượng hơn video nhiều lần.

Lưu ý:

Đừng quá lạm dụng ảnh GIF động (dài) vì nó có khi lại nặng hơn cả PNG luôn đấy. Tốt nhất chỉ nên dùng cho ảnh động giả lập trạng thái đang tải trang hoặc những chỗ cần làm website sinh động hơn (mà vẫn tải nhẹ hơn video)

4. WEBP:

Google đã dành nhiều năm để tạo ra WEBP với mục tiêu giảm kích thước tập tin ảnh mà ít ảnh hưởng đến chất lượng nhất. Sau nhiều năm nâng cấp thì giờ thuật toán nén của WEBP hiệu quả hơn rất nhiều, giúp kích thước khi nén nhẹ hơn đáng kể so với JPG và PNG.

Ngoài ra, nó còn bá đạo hơn khi hỗ trợ luôn ảnh nền trong suốt như PNG và ảnh động như GIF phà phà. Đúng là cực phẩm?

Lưu ý:

Hầu hết trình duyệt hiện tại như Chrome, Firefox, Edge hay Opera đều hỗ trợ WebP chỉ trừ.. ông kẹ Safari của Apple ????

5. SVG

Ủa, sao tiêu đề nói có 4 cái mà giờ lòi cái số 5 vậy?

Đúng rồi, theo Google Pagespeed Insights thì 4 loại định dạng ảnh trên chiếm 96% lưu lượng ảnh được truyền tải qua Internet trên toàn cầu. Mình định dừng lại đây nhưng trong lúc viết bài này có tham khảo một số ý kiến anh em nên bổ sung thêm định dạng SVG vào bài này.

Cụ thể:

SVG bản chất là vector, tự động co giãn trên mọi trình duyệt mà không sợ bị.. bể (vỡ) ảnh.
Trong vài trường hợp thì kích thước thì nhỏ hơn PNG và JPGs có khi đến 90% ????
Khuyên dùng cho logo và font icon trừu tượng, giữ được chất lượng mà không bị vỡ khi phóng to.

Lưu ý:

SVG không dễ để mở lên thấy ngay mà thường là 1 dãy các mã HTML nên không thân thiện lắm với.. thường dân.

Với nhiều ảnh trừu tượng thì SVG ngon, nhưng chi tiết phức tạp hơn thì ít khi có mà xài.

Hoặc khi cố sử dụng có thể làm tăng DOM size (kích thước HTML có nhiều node hơn với độ sâu quá nhiều). Nghe hơi phức tạp, đại khái là nó làm cái trình duyệt của bạn hiển thị mệt mỏi hơn đó.