Tìm kiếm

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

Học HTML, CSS từ Zero Tới Hero
  • Định dạng GIF
  • Định dạng WebP
  • Mã hóa Base64

Định dạng GIF

GIF (Graphic Interchange Format) cũng là dạng bitmap như JPEG và PNG. Trong số các trang web có sử dụng hình ảnh thì có khoảng 21% trang web có sử dụng định dạng GIF.

GIF hỗ trợ ảnh động:

Nhìn bằng mắt thường cũng có thể nhận thấy màu sắc trên ảnh GIF không được đẹp.

Ưu điểm:

  • Dung lượng nhỏ
  • Hỗ trợ ảnh trong suốt
  • Hỗ trợ ảnh động
  • Được hỗ trợ trong mọi trình duyệt

Nhược điểm:

  • Màu bị hạn chế
  • Hình ảnh có thể bị vỡ
  • Không chỉnh sửa được ảnh động
  • Ảnh động có thể chưa chuyển động khi chưa tải xong

Dùng khi:

  • Khi cần các hình ảnh động

Định dạng WebP

Hình ảnh WebP là một định dạng hình ảnh bitmap do Google tạo ra, đặc biệt dành cho việc sử dụng web. Đây là một định dạng chưa phổ biến trên các trang web, chiếm khoảng 5% trong số các trang web có sử dụng hình ảnh.

Ưu điểm:

  • Dung lượng nhỏ hơn PNG, JPEG
  • Hỗ trợ ảnh trong suốt
  • Hỗ trợ ảnh động

Nhược điểm:

  • Hình ảnh có thể bị vỡ
  • Chưa được hỗ trợ bởi mọi trình duyệt
  • Giảm chất lượng khi chuyển đổi qua

Mã hóa Base64

Đây không phải là một định dạng ảnh. Base64 là một chương trình mã hóa chuỗi ký tự.

Ưu điểm:

  • Ảnh đi theo code HTML, CSS (không phải tải qua URL)
  • Giảm số lượng kết nối, tăng tốc độ tải trang

Nhược điểm:

  • Không tái sử dụng được như URL
  • Khi ảnh lớn thì chuỗi mã hóa lớn, gây nặng file HTML, CSS
  • Hình ảnh không được công cụ tìm kiếm đánh chỉ mục

Dùng khi:

  • Muốn ảnh đi kèm với code HTML, không phải tải qua một URL

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