Chèn ảnh trong HTML: thẻ img, alt và kích thước ảnh

Cách chèn ảnh trong HTML

Dùng phần tử <img>. src là tệp ảnh, alt mô tả ảnh, còn width và height cho biết kích thước theo pixel. <img> là phần tử rỗng (void element): nó không có thẻ đóng.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Image</title>
</head>
<body>
  <img
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3Cpath d='M0 150 Q80 90 160 140 T300 130 V200 H0Z' fill='%2316a34a'/%3E%3C/svg%3E"
    alt="Green hills under a yellow sun"
    width="300"
    height="200">
</body>
</html>

src ở đây là một SVG nhỏ được viết thẳng vào URL (data URI) để ví dụ chạy được khi không có mạng. Trên trang web thật, src là đường dẫn tới một tệp:

Đường dẫn phân biệt chữ hoa chữ thường trên hầu hết máy chủ web: Photo.JPG và photo.jpg là hai tệp khác nhau.

Văn bản alt

Văn bản alt đứng thay cho ảnh. Trình đọc màn hình đọc to nó lên, và trình duyệt hiện nó khi ảnh không tải được. Cả hai ảnh ở đây đều trỏ tới những tệp không tồn tại:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alt text</title>
  <style>
    img { border: 2px dashed #e5e7eb; }
  </style>
</head>
<body>
  <p><img src="missing-logo.png" alt="Coddy logo" width="160" height="60"></p>
  <p><img src="missing-chart.png" alt="" width="160" height="60"> (decorative, empty alt)</p>
</body>
</html>

Ảnh thứ nhất hiện văn bản alt của nó, "Coddy logo", ở chỗ lẽ ra là ảnh. Ảnh thứ hai có alt rỗng, nên không có chữ nào để hiện, và trình đọc màn hình bỏ qua nó. Cách viết alt:

• Mô tả điều quan trọng trong ngữ cảnh. "Biểu đồ cột: doanh số tăng gấp đôi từ tháng 3 đến tháng 6" nói được nhiều hơn "biểu đồ".
• Đừng bắt đầu bằng "Ảnh của". Trình đọc màn hình đã thông báo đây là một ảnh.
• Dùng alt="" cho ảnh trang trí (đường phân cách, họa tiết nền) để trình đọc màn hình bỏ qua.
• Đừng bao giờ bỏ alt. Khi thiếu nó, một số trình đọc màn hình sẽ đọc tên tệp, kiểu như "IMG gạch dưới 4032 chấm jpg".
• Với ảnh nằm trong liên kết, hãy mô tả nơi liên kết dẫn tới: <a href="/"><img src="logo.svg" alt="Home"></a>.

Đặt kích thước ảnh

Thuộc tính width và height tính bằng pixel, không ghi đơn vị. Kích thước trong CSS sẽ ghi đè chúng. Cặp CSS hữu ích nhất cho ảnh là cặp dưới đây, cho phép ảnh co lại theo khối chứa nhưng không bao giờ giãn quá chiều rộng gốc:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Image size</title>
  <style>
    .box { width: 180px; border: 2px solid #2563eb; margin-bottom: 12px; }
    .responsive { max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <div class="box">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3C/svg%3E"
      alt="Overflowing" width="300" height="200">
  </div>
  <div class="box">
    <img class="responsive" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3C/svg%3E"
      alt="Fits" width="300" height="200">
  </div>
</body>
</html>

Ảnh thứ nhất giữ nguyên 300 pixel và tràn ra khỏi khung 180 pixel. Ảnh thứ hai thu nhỏ xuống 180 x 120, giữ tỷ lệ 3:2. height: auto rất quan trọng: thiếu nó, thuộc tính height="200" sẽ giữ ảnh cao 200 pixel và làm ảnh bị bóp méo.

Luôn ghi width và height trong HTML, kể cả với ảnh responsive. Trình duyệt dùng chúng để giữ sẵn đúng khoảng trống trước khi tệp tải xong, nhờ vậy phần chữ bên dưới không bị nhảy xuống khi ảnh hiện ra.

Cắt ảnh bằng object-fit

Khi ảnh phải lấp đầy một khung có hình dạng khác (avatar vuông từ một ảnh rộng, các thẻ card cao bằng nhau), object-fit quyết định phần thừa sẽ ra sao:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>object-fit</title>
  <style>
    body { font-family: system-ui, sans-serif; display: flex; flex-wrap: wrap; gap: 12px; }
    figure { margin: 0; text-align: center; }
    img { width: 120px; height: 120px; border: 2px solid #111827; display: block; }
  </style>
</head>
<body>
  <figure>
    <img style="object-fit: fill" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>fill</figcaption>
  </figure>
  <figure>
    <img style="object-fit: contain" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>contain</figcaption>
  </figure>
  <figure>
    <img style="object-fit: cover" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>cover</figcaption>
  </figure>
</body>
</html>

Ảnh gốc là một hình tròn tỷ lệ 2:1, hiển thị trong các khung vuông:

• fill (mặc định) kéo giãn ảnh cho vừa khung, nên hình tròn thành hình bầu dục.
• contain đặt vừa cả ảnh vào trong, để lại các dải trống.
• cover lấp đầy khung và cắt phần tràn ra, giữ hình tròn vẫn tròn. Đây là lựa chọn thường dùng cho ảnh thu nhỏ và avatar.

object-position chọn phần nào được giữ lại khi cắt, ví dụ object-position: top cho ảnh chân dung.

Chú thích với figure và figcaption

Chú thích đi kèm một ảnh nằm trong <figcaption>, và cả hai nằm trong <figure>. Cách này gắn chúng lại với nhau cho trình đọc màn hình, và figure có thể được định dạng như một khối:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Figure</title>
  <style>
    figure { display: inline-block; margin: 0; padding: 8px; border: 1px solid #e5e7eb; }
    img { display: block; }
    figcaption { font: 14px system-ui, sans-serif; color: #4b5563; padding-top: 6px; }
  </style>
</head>
<body>
  <figure>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Crect width='240' height='120' fill='%23e5e7eb'/%3E%3Crect x='20' y='70' width='40' height='40' fill='%232563eb'/%3E%3Crect x='80' y='40' width='40' height='70' fill='%232563eb'/%3E%3Crect x='140' y='20' width='40' height='90' fill='%232563eb'/%3E%3C/svg%3E"
      alt="Bar chart: signups rose each quarter" width="240" height="120">
    <figcaption>Figure 1. Signups per quarter.</figcaption>
  </figure>
</body>
</html>

Chú thích không thay thế alt. alt nói ảnh thể hiện gì; chú thích bổ sung những gì người nhìn thấy ảnh cũng cần biết.

Khoảng trống dưới ảnh

Ảnh nằm trên đường cơ sở của chữ, giống như một chữ cái, nên khối chứa chừa chỗ bên dưới nó cho phần đuôi của các chữ như g và y. Một đường viền giúp thấy rõ khoảng trống đó:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Gap under image</title>
  <style>
    div { display: inline-block; border: 2px solid #dc2626; margin-inline-end: 12px; }
    .fixed img { display: block; }
  </style>
</head>
<body>
  <div><img alt="" width="100" height="60" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60'%3E%3Crect width='100' height='60' fill='%232563eb'/%3E%3C/svg%3E"></div>
  <div class="fixed"><img alt="" width="100" height="60" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60'%3E%3Crect width='100' height='60' fill='%232563eb'/%3E%3C/svg%3E"></div>
</body>
</html>

Khung viền thứ nhất có một dải trắng bên dưới ảnh màu xanh. display: block trên ảnh (khung thứ hai) bỏ được nó; vertical-align: middle cũng vậy nếu ảnh phải giữ là inline.

Lazy loading và nguồn ảnh responsive

Với những ảnh nằm xa phía dưới một trang dài, loading="lazy" hoãn việc tải cho đến khi người đọc cuộn tới gần:

<img src="gallery-7.jpg" alt="Harbor at dusk" width="800" height="533" loading="lazy">

Đừng lazy load ảnh chính ở đầu trang; nó làm chậm phần trang mà người đọc thấy đầu tiên.

Để gửi tệp nhỏ hơn cho màn hình nhỏ, liệt kê nhiều kích thước trong srcset và cho trình duyệt biết ảnh sẽ hiển thị rộng bao nhiêu bằng sizes. Trình duyệt sẽ tự chọn tệp:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Harbor at dusk" width="800" height="533">

<picture> đi xa hơn và đưa ra các định dạng khác nhau, với <img> làm phương án dự phòng, đồng thời mang thuộc tính alt:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Harbor at dusk" width="800" height="533">
</picture>

Định dạng ảnh

Lỗi thường gặp

• Đường dẫn trên máy của bạn, như src="C:\Users\me\photo.jpg". Nó chỉ chạy trên máy của bạn. Đặt tệp cạnh tệp HTML và dùng đường dẫn tương đối.
• Thiếu alt. Mọi <img> đều cần alt, để rỗng nếu chỉ để trang trí.
• Đặt cả width và height trong CSS theo một tỷ lệ khác với ảnh. Ảnh sẽ bị kéo giãn. Đặt một chiều và để chiều kia là auto, hoặc dùng object-fit.
• Không có thuộc tính width và height, nên trang bị nhảy khi ảnh tải.
• Tệp rất lớn được thu nhỏ bằng CSS. Một ảnh 4000 pixel hiển thị ở 400 pixel vẫn bị tải đầy đủ. Hãy đổi kích thước tệp, hoặc dùng srcset.
• Thẻ đóng </img>. <img> là phần tử rỗng; không có gì để đóng.

Ảnh trong các ví dụ trên là những SVG nhỏ viết thẳng vào trang. Để thử cùng đoạn code với ảnh của riêng bạn, hãy dán nó vào HTML playground.