Tìm kiếm

HTML/CSS | Các định dạng ảnh #1

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:

Tags

Bạn có thể thích những bài đăng này

Nhận xét

Mới hơn Cũ hơn