Thẻ hình ảnh

Trong HTML, hình ảnh là yếu tố quan trọng giúp nội dung trở nên sinh động và dễ tiếp cận hơn. Thẻ <img> cho phép bạn nhúng hình ảnh vào trang web, phục vụ minh họa, quảng bá sản phẩm, hoặc làm đẹp bố cục.

Thẻ img

• Thẻ <img> (image - hình ảnh) dùng để hiển thị hình ảnh trên trang web.
• Thuộc tính src (source - nguồn) xác định đường dẫn ảnh.
• Thuộc tính alt (alternative text - văn bản thay thế) bắt buộc nên có để hiển thị khi ảnh lỗi hoặc hỗ trợ công cụ tìm kiếm.
• Thẻ <img> là thẻ rỗng (không có thẻ đóng).
• Thuộc tính width và height xác định kích thước hiển thị của hình ảnh.

Ví dụ:

<img
  src="https://placehold.co/400x400"
  alt="Hình minh họa sản phẩm"
  width="200"
  height="200"
/>

Thuộc tính alt

• Dùng khi ảnh không hiển thị, hỗ trợ SEO, công cụ đọc màn hình.
• Nếu ảnh chỉ để trang trí thì nên để alt="" (đừng bỏ hẳn thuộc tính).

Ví dụ:

<img
  src="https://placehold.co/400x400"
  alt="Vai trò của HTML, CSS và JavaScript trong trang web"
/>

Kích thước ảnh (width, height)

• Nếu không chỉ định, ảnh hiển thị theo kích thước gốc.
• Không nên đặt sai tỷ lệ ảnh gốc (ảnh dễ méo).
• Không nên phóng ảnh lớn hơn kích thước gốc (ảnh bị vỡ).

Ví dụ:

<img
  src="https://placehold.co/600x400"
  alt="Ảnh thu nhỏ"
  width="300"
  height="200"
/>

Các định dạng ảnh phổ biến

• Ảnh JPEG/JPG: Phù hợp ảnh chụp, banner, nội dung bài viết. Không hỗ trợ nền trong suốt.
• Ảnh PNG: Phù hợp logo, icon, ảnh có nền trong suốt. Chất lượng cao, không giảm khi nén.
• Ảnh SVG: Định dạng vector, không vỡ khi phóng to. Phù hợp logo, biểu tượng, hình học.
• Ảnh GIF: Hỗ trợ ảnh động, dung lượng nhỏ. Màu sắc hạn chế.
• Ảnh WebP: Dung lượng nhỏ hơn PNG/JPEG. Hỗ trợ ảnh trong suốt và ảnh động (nhưng chưa hỗ trợ mọi trình duyệt).
• Base64: Không phải định dạng ảnh mà là cách mã hóa ảnh thành chuỗi ký tự để nhúng trực tiếp vào HTML/CSS, giúp giảm số request nhưng làm nặng file HTML. Thường phù hợp cho ảnh rất nhỏ hoặc icon.

Tối ưu hình ảnh trên web

• Chọn đúng định dạng ảnh cho nhu cầu.
• Giảm kích thước ảnh bằng công cụ (TinyPNG, Squoosh…).
• Sử dụng ảnh chất lượng x2 so với kích thước hiển thị cho màn hình Retina.
• Không tải ảnh từ nguồn không tin cậy.

Hình ảnh kết hợp liên kết

Để gắn liên kết vào ảnh, bọc thẻ <img> trong thẻ <a>:

<a href="https://placehold.co" target="_blank" rel="noopener">
  <img src="https://placehold.co/400x400" alt="Ảnh từ placehold" />
</a>

Thẻ figure và figcaption trong HTML5

• <figure>: khối chứa hình ảnh hoặc minh họa.
• <figcaption>: chú thích cho hình ảnh.

Ví dụ:

<figure>
  <img src="https://example.com/images/appple.png" alt="Apple" />
  <figcaption>An Apple</figcaption>
</figure>

Nguồn ảnh miễn phí chất lượng cao

• Unsplash: Ảnh phong cảnh, con người, chất lượng cao.
• Giphy: Ảnh động GIF vui nhộn.
• Pexels: Ảnh, video miễn phí đa dạng chủ đề.
• Drawkit: Minh họa vector, icon.
• UnDraw: Minh họa SVG hiện đại, dễ tùy biến màu.
• UI Faces: Ảnh chân dung/avatar miễn phí.

Kết luận