Học HTML, CSS từ Zero Tới Hero
- Định dạng JPG/JPEG
- Định dạng PNG
- Định dạng SVG
Trong quá trình xây dựng và phát triển một trang web bạn sẽ có cơ hội sử dụng nhiều định dạng ảnh khác nhau. Mục tiêu của bài này là giới thiệu khái quát về các định dạng ảnh mà bạn có thể sử dụng trên trang web trong tương lai.
Định dạng JPG/JPEG
JPG (tên gốc là JPEG - Joint Photographic Experts Group) là một trong số định dạng ảnh bitmap được sử dụng phổ biến nhất trên các trang web, chiếm khoảng 75% trong số các trang web có sử dụng hình ảnh.
Ví dụ ảnh bitmap:
Ảnh Bitmap (Raster Image) - là loại ảnh dùng một loạt các pixel (điểm ảnh) để biểu thị hình ảnh.
Ưu điểm:
- Mức độ nén cao
- Được hỗ trợ trong mọi trình duyệt
- Hỗ trợ hiển thị hàng triệu màu sắc
Nhược điểm:
- Hình ảnh có thể bị vỡ
- Không hỗ trợ nền ảnh trong suốt
- Chất lượng bị giảm khi độ nén cao
- Không hỗ trợ ảnh động
Dùng khi:
- Hình ảnh trong nội dung bài viết (blog, bài post trên Facebook, v.v)
- Ảnh quảng cáo, banner không đòi hỏi ảnh trong suốt
Ảnh bitmap có thể bị vỡ:
Nếu file ảnh bitmap không có độ phân giải cao, có thể gặp phải tình trạng vỡ khung hình, mờ nhòe.
Định dạng PNG
PNG (Portable Network Graphics) cũng là một trong số định dạng ảnh bitmap được sử dụng phổ biến nhất trên các trang web, chiếm khoảng 80% trong số các trang web có sử dụng hình ảnh.
PNG hỗ trợ ảnh trong suốt:
Khác biệt cơ bản giữa JPEG và PNG là PNG có hỗ trợ ảnh trong suốt.
Ưu điểm:
- Chất lượng hình ảnh không đổi khi bị nén
- Được hỗ trợ trong mọi trình duyệt
- Hỗ trợ hiển thị hàng triệu màu sắc
- Hỗ trợ ảnh trong suốt
Nhược điểm:
- Hình ảnh có thể bị vỡ
- Không hỗ trợ ảnh động
Dùng khi:
- Ảnh trên web yêu cầu độ trong suốt (logo, biểu tượng, v.v)
- Các hình ảnh có kết hợp màu phức tạp như màu chuyển
- Các hình ảnh cần chỉnh sửa lại nhiều lần
Định dạng SVG
SVG (Scalable Vector Graphics) là một định dạng vector, không phải là dạng bitmap như các định dạng đã đề cập. Sự khác biệt dễ nhận thấy là dạng vector sẽ không bị vỡ ảnh khi phóng to. SVG cũng là một định dạng được sử dụng phổ biến bởi các trang web có sử dụng hình ảnh, chiếm khoảng 51%.
Ví dụ định dạng vector:
Vì được tạo nên từ các công thức toán học nên định dạng vector sẽ không bị vỡ khi phóng lớn.
Ưu điểm:
- Dung lượng có thể nhỏ
- Dễ dàng chỉnh sửa bằng CSS
- Phóng lớn mà không bị vỡ ảnh
- Hỗ trợ ảnh động
- Hỗ trợ ảnh trong suốt
- Được hỗ trợ trong mọi trình duyệt
Nhược điểm:
- Dung lượng tăng cao nếu hình có nhiều họa tiết khác nhau, phức tạp
- Không thể đọc một phần của định dạng này, phải chờ tải xong hoàn toàn
Dùng khi:
- Logo, icon với thiết kế dạng hình học, vector
- Hình ảnh cần đáp ứng nhiều kích thước khác nhau
Tham khảo thêm:
- Thống kê tỉ lệ sử dụng các định dạng ảnh trên trang web: https://w3techs.com/technologies/overview/image_format.
- Lịch sử thống kê các định dạng ảnh được sử dụng: https://w3techs.com/technologies/history_overview/image_format/all
- Để tìm hiểu chi tiết hơn về các định dạng ảnh bạn có thể: Tìm kiếm “Giống và khác nhau giữa các định dạng ảnh”.
Nhận xét