Thẻ IMG trong HTML

• Trần Thị Vân
• 1926
• 02/05/2025

Chức năng của Thẻ IMG trong HTML

Thẻ trong HTML dùng để hiển thị hình ảnh cho người dùng xem khi lướt website, thẻ này dùng để SEO hình ảnh lên các công cụ tìm kiếm như Google, Bing,...

Cú pháp của Thẻ IMG trong HTML

<img src="duongdan" width="chieurong" height="chieucao" alt="motaseo" title="motaxem">

src: Thuộc tính src chứa duongdan (Đường dẫn tới file hình ví dụ: https://webmoi.vn/upload/tinblog/the-img-trong-html.jpg hoặc upload/tinblog/the-img-trong-html.jpg)

width: Thuộc tính width chứa chieurong (Chiều rộng của hình ví dụ: 100px; 100%,....)

height: Thuộc tính height chứa chieucao (Chiều cao của hình ví dụ: 300px; 100vh,....)

alt: Thuộc tính alt chứa motaseo (Mô tả cho các công cụ SEO đọc file hình)

title: Thuộc tính title chứa motaxem (Mô tả cho hình khi người dùng rê chuột vào xem)

Các thuộc tính trong thẻ ỊMG

Thuộc tính SRC trong thẻ IMG

Thuộc tính này chứa liên kết tới file hình ảnh, file hình ảnh này có thể nằm trực tiếp trên website hiện tại hoặc có thể nằm ở trên các website khác:

<img src="https://webmoi.vn/upload/tinblog/the-img-trong-html.jpg">

Chạy Thử

Thuộc tính Width, Height trong thẻ IMG

Cần phải đặt chiều rộng và chiều cao của hình ảnh trong thẻ để cho các công cụ tìm kiếm dễ dàng biết được kích thước của hình ảnh đó:

<img src="https://webmoi.vn/upload/tinblog/the-img-trong-html.jpg" width="526" height="274" >

Chạy Thử

Thuộc tính ALT trong thẻ IMG

Thuộc tính ALT dùng để mô tả nội dung của hình ảnh đó nói đến, nội dung thuộc tính ALT sẽ được các công cụ tìm kiếm như Google tìm đọc để hiểu thêm về nội dung của hình ảnh:

<img src="https://webmoi.vn/upload/tinblog/the-img-trong-html.jpg" alt="Thẻ IMG trong HTML">

Chạy Thử

Thuộc tính Title trong thẻ ỊMG

Thuộc tính Title sẽ hiển thị nội dung của hình ảnh trong trường hợp lướt website mà hình ảnh không được hiển thị, giúp người dùng biết được nội dung của hình ảnh đó đang nói về điều gì:

<img src="https://webmoi.vn/upload/tinblog/the-img-trong-html.jpg" title="Thẻ IMG trong HTML">

Chạy Thử

Lưu ý khi dùng thẻ IMG

Nên dùng thẻ này:

<img src="https://webmoi.vn/upload/tinblog/the-img-trong-html.jpg">

Không nên dùng thẻ này:

<img src="https://webmoi.vn/upload/tinblog/the-img-trong-html.jpg"/>

Thẻ img có dấu / phía sau hiện giờ đã lỗi thời, nên chú ý vấn đề này.

Cách tối ưu thẻ IMG trong HTML chuẩn SEO

Tối ưu thẻ img trong HTML không chỉ giúp hình ảnh hiển thị đúng mà còn cải thiện tốc độ tải trang, trải nghiệm người dùng và khả năng được công cụ tìm kiếm đánh giá tốt hơn. Một hình ảnh được tối ưu cần đảm bảo các yếu tố như dung lượng, tên file, kích thước và khả năng hiển thị trên nhiều thiết bị.

Đặt tên file hình ảnh thân thiện với công cụ tìm kiếm

Tên file hình ảnh nên mô tả đúng nội dung ảnh thay vì sử dụng các ký tự ngẫu nhiên hoặc dãy số khó hiểu. Cách đặt tên rõ ràng giúp công cụ tìm kiếm dễ nhận biết chủ đề của hình ảnh và hỗ trợ khả năng xuất hiện trên kết quả tìm kiếm hình ảnh.

Nên sử dụng từ khóa liên quan, viết thường, ngăn cách bằng dấu gạch ngang và tránh các ký tự đặc biệt. Ví dụ, thay vì đặt tên ảnh là IMG001.jpg, có thể sử dụng tên như the-img-html.jpg để thể hiện rõ nội dung.

Nén hình ảnh giúp tăng tốc độ tải trang

Hình ảnh có dung lượng lớn là một trong những nguyên nhân khiến website tải chậm, đặc biệt với người dùng truy cập bằng thiết bị di động. Vì vậy, cần nén ảnh trước khi đưa lên website để giảm kích thước file nhưng vẫn giữ được chất lượng hiển thị cần thiết.

Ngoài việc nén ảnh, nên lựa chọn định dạng phù hợp như WebP cho hình ảnh trên website hiện đại hoặc sử dụng định dạng phổ biến như JPEG, PNG tùy theo mục đích sử dụng.

Sử dụng thuộc tính loading để tối ưu hiệu suất website

Thuộc tính loading giúp kiểm soát thời điểm trình duyệt tải hình ảnh. Với những hình ảnh nằm ngoài khu vực người dùng chưa nhìn thấy ngay, có thể sử dụng chế độ tải chậm để giảm tài nguyên ban đầu và cải thiện tốc độ mở trang.

Ví dụ sử dụng thuộc tính loading cho hình ảnh:

<img src="hinh-anh.jpg" alt="Mô tả hình ảnh" loading="lazy">

Giá trị lazy giúp trình duyệt chỉ tải ảnh khi người dùng cuộn đến vị trí cần hiển thị, từ đó giảm thời gian tải trang ban đầu.

Kết hợp thẻ IMG với responsive image trên nhiều thiết bị

Mỗi thiết bị có kích thước màn hình và độ phân giải khác nhau, vì vậy hình ảnh cần có khả năng tự điều chỉnh để hiển thị phù hợp. Việc sử dụng hình ảnh responsive giúp website tránh tình trạng ảnh bị méo, quá lớn hoặc làm ảnh hưởng đến bố cục trên điện thoại.

Có thể kết hợp thẻ img với các thuộc tính như srcset và sizes để trình duyệt lựa chọn phiên bản hình ảnh phù hợp nhất với thiết bị của người dùng.

<img src="anh-nho.jpg" 
srcset="anh-nho.jpg 480w, anh-lon.jpg 1200w" 
sizes="(max-width: 600px) 480px, 1200px" 
alt="Hình ảnh responsive">

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ IMG trong HTML.