Thẻ img trong HTML là thành phần dùng để nhúng hình ảnh vào trang web, giúp nội dung trở nên trực quan và sinh động hơn. Việc hiểu rõ cách sử dụng thẻ img trong HTML không chỉ giúp bạn tối ưu hóa giao diện mà còn nâng cao hiệu suất và SEO của website. Trong bài viết này, mình sẽ hướng dẫn chi tiết cách sử dụng thẻ <img>, từ cú pháp cơ bản, cách thiết lập vị trí, kích thước đến các định dạng hình ảnh phổ biến. Nếu bạn muốn tối ưu hình ảnh trên website hiệu quả, đây sẽ là hướng dẫn hữu ích dành cho bạn.
Điểm chính cần nắm
- Thẻ
imgtrong HTML là gì?: Thẻ<img>dùng để nhúng hình ảnh vào trang web, giúp nội dung trực quan và sinh động hơn. - Lý do, vai trò của hình ảnh trong website: Hình ảnh giúp tăng tính hấp dẫn, cải thiện trải nghiệm người dùng và hỗ trợ SEO.
- Cú pháp cơ bản của thẻ
<img>: Thẻimgtrong HTML có cú pháp đơn giản với thuộc tínhsrcđể chỉ định đường dẫn hình ảnh vàaltđể mô tả hình ảnh. - Cách chèn hình ảnh vào HTML: Sử dụng thẻ
imgtrong HTML với đường dẫn tương đối hoặc tuyệt đối để hiển thị hình ảnh trên trang web. - Thiết lập vị trí hình ảnh: Dùng CSS hoặc thuộc tính
alignđể căn chỉnh hình ảnh theo ý muốn như trái, phải, giữa. - Kích thước hình ảnh: Điều chỉnh kích thước bằng các thuộc tính
width,heighthoặc dùng CSS để tối ưu hiển thị. - Viền và kiểu dáng hình ảnh: Sử dụng CSS để thêm viền, bo góc hoặc tạo hiệu ứng cho hình ảnh.
- Hình ảnh động (GIF) trong HTML: Dùng thẻ
<img>để hiển thị ảnh động định dạng GIF trên trang web. - Hình ảnh responsive trong HTML: Áp dụng CSS hoặc thẻ
<picture>để hình ảnh tự động điều chỉnh theo kích thước màn hình. - Các định dạng hình ảnh phổ biến: Gồm JPEG, PNG, GIF, SVG, WebP… mỗi loại có ưu điểm và ứng dụng riêng.
- Vietnix – Giải pháp lưu trữ uy tín, tốc độ và bảo mật: Vietnix cung cấp dịch vụ hosting, VPS, server chất lượng cao, tối ưu hiệu suất và bảo mật.
Thẻ img trong HTML là gì?
Thẻ img trong HTML được sử dụng để chèn hình ảnh vào trang web mà không cần thẻ đóng. Hình ảnh hiển thị thông qua thuộc tính src, là đường dẫn đến file ảnh. Ngoài ra, thẻ này hỗ trợ các thuộc tính như alt (văn bản thay thế), width và height (định kích thước ảnh). Việc sử dụng đúng thẻ <img> giúp cải thiện trải nghiệm người dùng và tối ưu SEO.
Hình ảnh trong HTML giúp nội dung trực quan hơn, nâng cao trải nghiệm người dùng và truyền tải thông tin hiệu quả. Chúng có thể là ảnh chụp, đồ họa, biểu tượng hoặc hình minh họa. Để chèn hình ảnh vào trang web, chúng ta sử dụng thẻ img trong HTML.
Lý do, vai trò của hình ảnh trong website
Hình ảnh đóng vai trò quan trọng trong website, giúp nội dung trực quan hơn và cải thiện trải nghiệm người dùng. Nếu được tối ưu đúng cách, hình ảnh còn hỗ trợ SEO và góp phần xây dựng thương hiệu. Dưới đây là những vai trò chính của hình ảnh trong website:
- Tăng khả năng đọc: Minh họa nội dung, giúp truyền tải thông tin dễ hiểu hơn.
- Tăng tính trực quan và thu hút: Làm cho trang web sinh động, hấp dẫn hơn.
- Cải thiện trải nghiệm người dùng: Giúp bố cục dễ nhìn và chuyên nghiệp hơn.
- Hỗ trợ SEO: Thuộc tính
altgiúp cải thiện thứ hạng tìm kiếm. - Truyền tải thông điệp và thương hiệu: Thể hiện phong cách, tăng nhận diện thương hiệu.
- Hỗ trợ nội dung đa phương tiện: Kết hợp với văn bản, video để tăng tương tác.
Cú pháp cơ bản của thẻ img trong HTML
Thẻ img trong HTML được sử dụng để chèn hình ảnh vào trang web. Đây là một thẻ rỗng, không có thẻ đóng, và bắt buộc phải có thuộc tính src để xác định đường dẫn hình ảnh.
Cú pháp:
<img src="image_path" alt="Alternate text" width="200" height="150">Giải thích:
src: Đường dẫn đến file hình ảnh (bắt buộc).alt: Văn bản thay thế khi hình ảnh không hiển thị (khuyến nghị sử dụng để hỗ trợ SEO và truy cập web).width&height: Định kích thước hình ảnh (tính bằng pixel hoặc phần trăm).
Cách chèn hình ảnh vào HTML
Bạn có thể chèn hình ảnh vào trang web bằng thẻ img trong HTML, trong đó thuộc tính src là bắt buộc để xác định đường dẫn đến file hình ảnh. Hình ảnh có thể được lưu trữ trên cùng máy chủ với trang web hoặc được liên kết từ một nguồn bên ngoài. Khi trình duyệt đọc code HTML, nó sẽ tải hình ảnh từ đường dẫn được chỉ định và hiển thị trên trang.
Lưu ý
Thẻ <img> là một thẻ rỗng, có nghĩa là nó không có thẻ đóng như các thẻ HTML khác. Thay vì chứa nội dung bên trong, thẻ này chỉ có thể bao gồm danh sách các thuộc tính để định dạng và mô tả hình ảnh, chẳng hạn như alt, width, height,…
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Chèn hình ảnh trong HTML</title>
</head>
<body>
<h1>Logo Vietnix</h1>
<img src="https://image.vietnix.vn/wp-content/uploads/2022/07/logo-vietnix-2.png"
alt="Logo Vietnix"
width="300"
height="auto">
</body>
</html>Trong ví dụ này:
Thuộc tính
srcchứa đường dẫn đến hình ảnh logo của Vietnix.Thuộc tính
altcung cấp văn bản thay thế nếu hình ảnh không thể hiển thị.Thuộc tính
widthđược đặt là 300px để đảm bảo kích thước phù hợp trên giao diện web.heightđược đặt làautođể giữ tỷ lệ gốc của hình ảnh.
Kết quả:
Thiết lập vị trí hình ảnh
Trong HTML, việc đặt đúng vị trí hình ảnh rất quan trọng để đảm bảo chúng hiển thị đúng trên trang web. Bạn cần chỉ định đường dẫn hình ảnh trong thuộc tính src của thẻ img trong HTML.
Có hai loại đường dẫn bạn có thể sử dụng:
- Đường dẫn tuyệt đối: Dẫn trực tiếp đến một hình ảnh trên internet.
- Đường dẫn tương đối: Dẫn đến một hình ảnh trong thư mục dự án hoặc máy chủ.
Ví dụ:
1. Đường dẫn tuyệt đối
Nếu hình ảnh của Vietnix có URL:https://image.vietnix.vn/wp-content/uploads/2022/07/logo-vietnix-2.png. Bạn có thể chèn vào trang web như sau:
<img src="https://image.vietnix.vn/wp-content/uploads/2022/07/logo-vietnix-2.png" alt="Logo Vietnix">Kết quả:
2. Đường dẫn tương đối
Nếu hình ảnh nằm trong thư mục /images/ trên server:
<img src="/images/logo-vietnix-2.png" alt="Logo Vietnix">Kích thước hình ảnh
Hình ảnh có thể có kích thước tùy chỉnh để phù hợp với giao diện trang web. Bạn có thể sử dụng các thuộc tính width và height trực tiếp trong thẻ img trong HTML, hoặc kiểm soát thông qua CSS để linh hoạt hơn. Nếu không đặt kích thước hợp lý, hình ảnh có thể bị méo hoặc ảnh hưởng đến bố cục trang web. Để đảm bảo hiển thị đẹp, bạn nên đặt chiều rộng hoặc chiều cao tự động để giữ tỷ lệ gốc của hình ảnh.
Ví dụ:
<img src="https://image.vietnix.vn/wp-content/uploads/2022/07/logo-vietnix-2.png" width="300" height="100" alt="Logo Vietnix">
<style>
.vietnix-logo {
width: 300px;
height: auto;
}
</style>
<img class="vietnix-logo" src="https://image.vietnix.vn/wp-content/uploads/2022/07/logo-vietnix-2.png" alt="Logo Vietnix">
Kết quả:
Viền và kiểu dáng hình ảnh
Viền hình ảnh giúp tạo điểm nhấn và phân tách hình ảnh khỏi phần nội dung xung quanh. Trước đây, bạn có thể sử dụng thuộc tính border trong thẻ img trong HTML, nhưng hiện nay, CSS được ưu tiên hơn vì linh hoạt hơn.
Bạn có thể thiết lập độ dày, màu sắc và kiểu viền bằng thuộc tính border trong CSS. Ngoài ra, có thể bo góc hình ảnh để tạo hiệu ứng mềm mại hơn bằng thuộc tính border-radius.
Ví dụ:
<style>
.bordered-img {
border: 3px solid #000;
border-radius: 5px;
}
</style>
<img class="bordered-img" src="https://image.vietnix.vn/wp-content/uploads/2022/07/logo-vietnix-2.png" alt="Logo Vietnix">Kết quả:
Hình ảnh động (GIF) trong HTML
Hình ảnh động định dạng GIF có thể làm cho trang web trở nên sinh động hơn. Không cần thuộc tính đặc biệt, bạn chỉ cần chèn hình ảnh GIF vào trang như cách chèn hình ảnh thông thường.
Lưu ý rằng các file GIF có dung lượng lớn có thể ảnh hưởng đến tốc độ tải trang, nên hãy tối ưu kích thước và chỉ sử dụng khi thực sự cần thiết. Nếu muốn có hiệu ứng mượt mà hơn, bạn có thể cân nhắc sử dụng CSS animations hoặc video thay vì GIF.
Ví dụ:
<img src="https://image.vietnix.vn/wp-content/uploads/2021/02/f47fd896add554744b4114d964b61b41.gif" alt="Hình ảnh động" style="width: 400px">Kết quả:
Hình ảnh responsive trong HTML
Hình ảnh responsive giúp trang web hiển thị đẹp trên mọi thiết bị, từ máy tính đến điện thoại di động. Khi thiết kế giao diện web, việc đảm bảo hình ảnh tự động thay đổi kích thước theo màn hình là rất quan trọng.
Có hai cách để làm hình ảnh responsive:
- Dùng CSS với
width: 100%; height: auto;để hình ảnh co giãn theo khung chứa. - Dùng thẻ
<picture>để hiển thị hình ảnh khác nhau dựa trên độ phân giải của thiết bị.
Ví dụ: Cách 1 – Dùng CSS
<img src="https://image.vietnix.vn/wp-content/uploads/2022/07/logo-vietnix-2.png" style="width: 100%; height: auto;" alt="Logo Vietnix">Kết quả:
Ví dụ: Cách 2 – Dùng <picture>
<picture>
<source media="(min-width: 800px)" srcset="logo-large.png">
<source media="(max-width: 799px)" srcset="logo-small.png">
<img src="logo-default.png" alt="Logo Vietnix">
</picture>
Các định dạng hình ảnh phổ biến
Dưới đây là bảng tổng hợp các định dạng hình ảnh được hỗ trợ trong thẻ img trong HTML:
| Định dạng | Tên đầy đủ | Hỗ trợ nền trong suốt | Hỗ trợ ảnh động | File Extension |
|---|---|---|---|---|
| JPEG/JPG | Joint Photographic Experts Group | Không | Không | .jpg, .jpeg |
| PNG | Portable Network Graphics | Có | Không | .png |
| GIF | Graphics Interchange Format | Có | Có | .gif |
| SVG | Scalable Vector Graphics | Có | Không | .svg |
| WebP | Web Picture Format | Có | Có | .webp |
| BMP | Bitmap Image File | Không | Không | .bmp |
| ICO | Icon File | Có | Không | .ico |
Vietnix – Giải pháp lưu trữ uy tín, tốc độ và bảo mật
Vietnix là nhà cung cấp hàng đầu tại Việt Nam trong lĩnh vực cho thuê server, hosting, VPS và domain, mang đến giải pháp lưu trữ tối ưu với hiệu suất cao và bảo mật vượt trội. Với hơn 80.000 khách hàng tin tưởng, Vietnix không ngừng nâng cao chất lượng dịch vụ, đảm bảo hệ thống hoạt động ổn định và an toàn. Đội ngũ kỹ thuật chuyên nghiệp hỗ trợ 24/7, sẵn sàng giúp bạn giải quyết mọi vấn đề nhanh chóng.
Thông tin liên hệ:
- Hotline: 18001093
- Email: sales@vietnix.com.vn
- Địa chỉ: 265 Hồng Lạc, Phường 10, Quận Tân Bình, Thành Phố Hồ Chí Minh.
- Website: https://vietnix.vn/
Câu hỏi thường gặp
Có thể sử dụng thẻ <img> để tải hình ảnh từ API hoặc dịch vụ bên thứ ba không?
Làm thế nào để chèn hình ảnh có dung lượng lớn mà không làm chậm tốc độ tải trang?
Sử dụng WebP thay vì PNG/JPEG.
Áp dụng lazy loading:
<img src="image.jpg" loading="lazy" alt="Hình ảnh tối ưu">
Có thể nhúng hình ảnh vào HTML mà không cần tải từ server (ví dụ: sử dụng Base64)?
Có, bằng cách mã hóa hình ảnh thành Base64:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAA..." alt="Hình ảnh Base64">
Có cách nào giúp tối ưu SEO cho hình ảnh trên trang web bằng thẻ <img>?
– Dùng tên file chứa từ khóa (hinh-anh-san-pham.jpg).
– Sử dụng alt có mô tả chi tiết.
– Tối ưu dung lượng ảnh để tăng tốc độ tải trang.
Lời kết
Hình ảnh đóng vai trò quan trọng trong thiết kế web, không chỉ giúp nội dung thu hút hơn mà còn hỗ trợ SEO và cải thiện trải nghiệm người dùng. Việc sử dụng thẻ <img> đúng cách sẽ giúp bạn kiểm soát tốt kích thước, vị trí và khả năng hiển thị của hình ảnh trên nhiều thiết bị khác nhau. Nếu bạn có bất cứ thắc mắc hay cần hỗ trợ gì, hãy để lại bình luận bên dưới, mình sẽ phản hồi nhanh nhất. Cảm ơn bạn đã đọc!
Mọi người cũng xem:
