Trong thiết kế web hiện đại, nội dung trực quan ngày càng đóng vai trò then chốt trong việc giữ chân người dùng và cải thiện thứ hạng tìm kiếm. Thẻ img trong HTML chính là công cụ cốt lõi để bạn chèn hình ảnh vào trang web một cách chuẩn chỉnh. Tuy nhiên, không chỉ đơn giản là giúp hiển thị hình ảnh, việc sử dụng đúng cú pháp, thuộc tính và tối ưu thẻ img còn có thể tác động mạnh mẽ đến hiệu suất website và chiến lược SEO.
- Thẻ img là gì?
- Cú pháp cơ bản của thẻ img trong HTML
- Các thuộc tính của thẻ img trong HTML
- Hướng dẫn sử dụng thẻ img hiệu quả cho hiệu suất SEO
- 1. Chèn ảnh từ thư mục nội bộ
- 2. Chèn ảnh từ URL bên ngoài
- 3. Đặt tên tệp hình ảnh và alt text chuẩn SEO
- 4. Sử dụng srcset để responsive ảnh
- 5. Tối ưu tốc độ tải trang với thuộc tính lazy loading
- 6. Đặt kích thước width và height trong HTML
- 7. Chọn định dạng hình ảnh phù hợp
- 8. Tối ưu dung lượng ảnh
- 9. Thêm chú thích ảnh nếu phù hợp
- Các lỗi phổ biến khi dùng thẻ img HTML và cách khắc phục
Thẻ img là gì?
Thẻ img là một thẻ HTML dùng để hiển thị hình ảnh trên trang web. Khi bạn muốn chèn một bức ảnh vào trong nội dung trang web, thẻ img chính là công cụ cần sử dụng.
Về cơ bản, thẻ img trong HTML không phải là một container (vùng chứa) cho hình ảnh, mà giống như một liên kết hoặc một chỉ dẫn cho trình duyệt web biết rằng: "Này, hãy tải và hiển thị bức ảnh này tại vị trí này!".
Cú pháp cơ bản của thẻ img trong HTML
Khác với nhiều thẻ HTML khác, img là thẻ tự đóng, nghĩa là nó không cần có thẻ đóng < /img > và hoạt động dựa trên các thuộc tính đi kèm.
Cú pháp cơ bản của thẻ img trong HTML trông như thế này:
< img src="duong-dan-den-anh" alt="mo-ta-anh" >
Trong đó:
- < img >: Đây là tên của thẻ, cho trình duyệt biết bạn muốn nhúng một hình ảnh.
- src (source): Là thuộc tính bắt buộc, dùng để chỉ đường dẫn tới tệp hình ảnh bạn muốn hiển thị. Có thể là đường dẫn tương đối (ảnh trong cùng thư mục) hoặc tuyệt đối (ảnh từ URL bên ngoài). Chẳng hạn:
+ Nếu bạn có một ảnh tên logo.png nằm cùng thư mục với tệp HTML, bạn sẽ viết src="logo.png".
+ Nếu ảnh nằm trong thư mục images cùng cấp: src = "images/logo.png".
+ Nếu ảnh nằm trên một website khác (đường dẫn tuyệt đối): src = "https://example.com/images/banner.jpg".
- Alt (alternative text): Là văn bản mô tả ảnh sẽ hiển thị khi ảnh không tải được, đồng thời giúp cải thiện SEO và hỗ trợ người dùng khiếm thị. Chẳng hạn, thay vì alt="anh", hãy viết alt="Logo công ty ABC màu xanh dương".
Ví dụ:
< img src="images/logo.png" alt="Logo công ty Phuong Nam Vina" >
Trong ví dụ này:
- Ảnh nằm trong thư mục con tên là images.
- Tên ảnh là logo.png.
- Nếu ảnh không hiện, trình duyệt sẽ hiển thị dòng chữ "Logo công ty Phuong Nam Vina".
Các thuộc tính của thẻ img trong HTML
Trong HTML, thẻ img không chỉ đơn giản dùng để chèn hình ảnh vào trang web, mà còn đi kèm nhiều thuộc tính quan trọng giúp kiểm soát cách ảnh hiển thị, tối ưu tốc độ tải trang, hỗ trợ người dùng và cải thiện SEO. Việc hiểu rõ các thuộc tính của thẻ img trong HTML sẽ giúp bạn xây dựng những website trực quan, chuyên nghiệp và thân thiện với mọi thiết bị.
| Thuộc tính | Chức năng | Bắt buộc | Giá trị điển hình | Lưu ý quan trọng |
| Src | Đường dẫn đến hình ảnh cần hiển thị | Có | image.jpg images/logo.png https://example.com/pic.webp | Luôn đảm bảo đường dẫn chính xác. |
| Alt | Văn bản thay thế mô tả nội dung hình ảnh. | Có | Một chú mèo con đang ngủ Logo công ty X | Cực kỳ quan trọng cho SEO và khả năng tiếp cận (Accessibility). |
| Width | Chiều rộng hiển thị của hình ảnh. | Không | 800px, 100% | Nên dùng cùng height để ngăn ngừa Layout Shift. |
| Height | Chiều cao hiển thị của hình ảnh. | Không | 400px, auto | Nên dùng cùng width để ngăn ngừa Layout Shift. |
| Title | Văn bản hiển thị khi rê chuột qua ảnh (tooltip). | Không | Ảnh minh họa đẹp | Chủ yếu mang tính trang trí. |
| Loading | Chiến lược tải hình ảnh. | Không | lazy, eager, auto | Sử dụng lazy để cải thiện tốc độ tải trang ban đầu bằng cách chỉ tải ảnh khi cần thiết. |
| Srcset | Danh sách các nguồn ảnh thay thế cho các độ phân giải/kích thước khác nhau. | Không | small.jpg 480w, large.jpg 1200w | Hỗ trợ hiển thị hình ảnh tối ưu trên nhiều thiết bị (Responsive Images), tiết kiệm băng thông. |
| Sizes | Mô tả kích thước ảnh trên các viewport khác nhau (dùng với srcset có w). | Không | (max-width: 600px) 100vw, 50vw | Giúp trình duyệt lựa chọn ảnh phù hợp nhất từ srcset. |
| Crossorigin | Kiểm soát việc tải ảnh từ các tên miền khác (CORS). | Không | anonymous, use-credentials | Quan trọng khi thao tác ảnh bằng JavaScript hoặc dùng CDN. |
| Ismap | Đánh dấu ảnh là bản đồ hình ảnh phía máy chủ. | Không | (không giá trị) | Ít được sử dụng hiện nay. |
| Usemap | Liên kết ảnh với bản đồ hình ảnh phía máy khách (< map >). | Không | #mymap | Tạo các khu vực nhấp được trên ảnh mà không cần gửi dữ liệu đến máy chủ. |
Hướng dẫn sử dụng thẻ img hiệu quả cho hiệu suất SEO
Hình ảnh là một phần không thể thiếu của mọi website hiện đại. Chúng giúp truyền tải thông điệp, tăng tính thẩm mỹ và giữ chân người dùng. Tuy nhiên, nếu không được sử dụng đúng cách, hình ảnh có thể làm chậm website của bạn, ảnh hưởng tiêu cực đến trải nghiệm người dùng và thứ hạng SEO. Dưới đây là những cách tối ưu HTML image tag giúp bạn tăng hiệu suất SEO một cách toàn diện.
1. Chèn ảnh từ thư mục nội bộ
Việc lưu trữ hình ảnh trực tiếp trên máy chủ website giúp kiểm soát tốt hơn tốc độ tải trang và chất lượng hiển thị. Để chèn ảnh từ thư mục nội bộ, bạn nên đặt ảnh trong một thư mục riêng (ví dụ: images/, assets/) và gọi bằng đường dẫn tương đối.
- Ảnh cùng thư mục: < img src="logo.png" alt="Logo công ty ABC" >.
- Ảnh trong thư mục con: Nếu bạn có một thư mục images chứa ảnh, đặt cùng cấp với file HTML. Chẳng hạn < img src="images/banner.jpg" alt="Banner quảng cáo sản phẩm mới" >.
- Ảnh ở thư mục cấp trên: Nếu ảnh nằm ở thư mục cha của file HTML. < img src="../icons/home-icon.svg" alt="Biểu tượng trang chủ" >.
Việc mọi tài nguyên nằm trong dự án giúp việc phát triển và triển khai dễ dàng hơn. Bên cạnh đó, chèn ảnh từ thư mục nội bộ sẽ giúp bạn kiểm soát hoàn toàn từ kích thước, định dạng ảnh trực tiếp và không phụ thuộc vào tốc độ của máy chủ bên ngoài.
2. Chèn ảnh từ URL bên ngoài
Đôi khi, bạn cần nhúng ảnh từ một nguồn bên ngoài, ví dụ như từ một CDN (Content Delivery Network), một trang mạng xã hội hoặc một website khác mà bạn có quyền sử dụng ảnh.
Để chèn ảnh từ nguồn bên ngoài, bạn cần sử dụng đường dẫn tuyệt đối (full URL) trong thuộc tính src. Ví dụ:
< img src="https://images.unsplash.com/photo-1549429402-127e99767295" alt="Cà phê latte art trên bàn gỗ" >
Lưu ý:
- Đảm bảo bạn có quyền sử dụng hình ảnh đó để tránh các vấn đề về bản quyền.
- Tốc độ tải của ảnh phụ thuộc vào máy chủ chứa ảnh đó. Nếu máy chủ chậm, ảnh của bạn cũng sẽ tải chậm.
- Nếu nguồn ảnh bên ngoài bị xóa hoặc ngừng hoạt động, ảnh trên website của bạn cũng sẽ biến mất.
- Khi tải ảnh từ tên miền khác để thao tác bằng JavaScript (ví dụ: vẽ lên < canvas >), hãy thêm thuộc tính crossorigin="anonymous" để tránh lỗi CORS.
3. Đặt tên tệp hình ảnh và alt text chuẩn SEO
Tên file ảnh và alt text có ý nghĩa lớn đối với SEO hình ảnh, nó cung cấp ngữ cảnh cho công cụ tìm kiếm, giúp chúng hiểu ảnh của bạn là gì và lập chỉ mục hiệu quả hơn. Đây là những yếu tố quan trọng nhất của SEO hình ảnh, vì vậy bạn nên:
- Đặt tên ảnh bằng từ khóa có dấu gạch ngang (-) để phân tách từ, ví dụ: banh-trung-thu-nhan-dau-xanh.jpg
- Viết alt text như thể bạn đang mô tả ảnh cho một người không thể nhìn thấy nó. Ví dụ: alt="Bánh trung thu nhân đậu xanh truyền thống"
- Dùng tiếng Việt không dấu hoặc tiếng Anh nếu hướng đến quốc tế.
- Tránh tên ảnh chung chung như image1.jpg, pic.png,.…
- Nên dùng chữ thường để tránh lỗi phát sinh trên các hệ điều hành khác nhau.
- Nếu ảnh hoàn toàn chỉ để trang trí và không truyền tải thông tin gì (ví dụ: một đường viền), bạn có thể để alt="" (chuỗi rỗng) để trình đọc màn hình bỏ qua.
4. Sử dụng srcset để responsive ảnh
Trong thời đại đa thiết bị, việc hình ảnh hiển thị đẹp và tối ưu trên mọi màn hình là cực kỳ quan trọng và srcset là giải pháp mạnh mẽ cho việc này. Cụ thể, nếu bạn chỉ dùng một ảnh lớn cho mọi thiết bị, người dùng di động sẽ phải tải một tệp nặng không cần thiết, làm chậm trang. Ngược lại, ảnh quá nhỏ sẽ bị vỡ nét trên màn hình lớn. Lúc này, srcset cho phép bạn cung cấp nhiều phiên bản của cùng một ảnh với các kích thước khác nhau. Trình duyệt sẽ tự động chọn phiên bản phù hợp nhất dựa trên kích thước màn hình, độ phân giải và mật độ pixel của thiết bị người dùng.
Ví dụ:
< img src="anh-mac-dinh.jpg"
srcset="anh-nho.jpg 480w,
anh-trung-binh.jpg 800w,
anh-lon.jpg 1200w"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
33vw"
alt="Mô tả ảnh responsive" >
5. Tối ưu tốc độ tải trang với thuộc tính lazy loading
Theo mặc định, trình duyệt sẽ cố gắng tải tất cả hình ảnh trên trang cùng lúc. Nếu trang của bạn có nhiều ảnh ở cuối trang, việc tải chúng ngay lập tức là không cần thiết và làm chậm thời gian hiển thị nội dung chính.
Lúc này, thuộc tính loading="lazy" cho trình duyệt biết rằng: "Này, đừng tải ảnh này vội. Chỉ khi người dùng cuộn đến gần nó thì hẵng tải." Việc này giúp giảm thời gian tải ban đầu (Largest Contentful Paint - LCP), tiết kiệm băng thông và giảm tải cho máy chủ.
Ví dụ: < img src="images/banner.jpg" alt="Banner sản phẩm" loading="lazy" >.
6. Đặt kích thước width và height trong HTML
Nếu bạn không chỉ định width và height cho ảnh trong HTML image tag, trình duyệt sẽ không biết ảnh chiếm bao nhiêu không gian trước khi nó được tải. Điều này dẫn đến hiện tượng Layout Shift (CLS) – các phần tử trên trang bị "giật" và sắp xếp lại khi ảnh tải xong, gây khó chịu cho người dùng và bị đánh giá thấp bởi Google. Do đó, hãy luôn khai báo width và height với giá trị thực của ảnh trong thuộc tính HTML.
Ví dụ: < img src="my-image.jpg" alt="Mô tả ảnh" width="800" height="600" >.
7. Chọn định dạng hình ảnh phù hợp
Việc chọn đúng định dạng tệp ảnh là một yếu tố then chốt ảnh hưởng đến dung lượng và chất lượng.
- JPEG/JPG: Tốt nhất cho ảnh chụp (ảnh có nhiều màu sắc và độ chuyển màu phức tạp). Nó sử dụng nén mất dữ liệu (lossy compression), nghĩa là một phần dữ liệu bị loại bỏ để giảm kích thước file, nhưng thường không nhận thấy bằng mắt thường.
- PNG: Tốt nhất cho đồ họa, logo, ảnh có nền trong suốt, hoặc ảnh có ít màu sắc. Nó sử dụng nén không mất dữ liệu (lossless compression), giữ nguyên chất lượng ảnh nhưng kích thước file thường lớn hơn JPEG.
- GIF: Dành riêng cho ảnh động hoặc các biểu tượng rất nhỏ, ít màu. Chất lượng kém và không phù hợp cho ảnh tĩnh lớn.
- WebP: Định dạng thế hệ mới của Google. Hỗ trợ cả nén mất dữ liệu và không mất dữ liệu, thường cho ra kích thước file nhỏ hơn đáng kể (từ 25-35%) so với JPEG và PNG mà vẫn giữ được chất lượng tương đương. Đây là định dạng được khuyến khích sử dụng hàng đầu hiện nay.
- AVIF: Định dạng mới hơn WebP, có tiềm năng nén tốt hơn nữa. Tuy nhiên, mức độ hỗ trợ trình duyệt hiện tại chưa rộng rãi bằng WebP.
Lưu ý: Để đảm bảo tương thích với các trình duyệt cũ không hỗ trợ WebP/AVIF, bạn nên sử dụng thẻ < picture > để cung cấp nhiều định dạng.
8. Tối ưu dung lượng ảnh
Một hình ảnh không được nén có thể nặng vài MB, gây tốn tài nguyên và thời gian tải. Do đó, bạn hãy giảm dung lượng file xuống mức thấp nhất có thể mà vẫn đảm bảo chất lượng hình ảnh không bị ảnh hưởng đáng kể đến trải nghiệm người dùng.
Một số công cụ nén ảnh trực tuyến miễn phí:
- TinyPNG / TinyJPG: Nén ảnh PNG và JPEG rất hiệu quả mà vẫn giữ chất lượng tốt.
- Compressor.io: Hỗ trợ nhiều định dạng và tùy chọn nén.
- Squoosh: Một công cụ mạnh mẽ, cho phép bạn điều chỉnh nhiều thông số nén và xem trước kết quả.
9. Thêm chú thích ảnh nếu phù hợp
Caption không phải là một trong các thuộc tính của thẻ img trong HTML, nhưng nó là một yếu tố quan trọng đi kèm với hình ảnh. Đây là đoạn văn bản nằm ngay bên dưới hoặc bên cạnh hình ảnh, cung cấp thông tin bổ sung, giải thích hoặc chú thích cho ảnh.
Để thêm chú thích ảnh, bạn hãy dùng thẻ figcaption đi kèm figure để mô tả hoặc dẫn giải cho ảnh, giúp tăng giá trị nội dung và trải nghiệm người đọc.
Ví dụ:
< figure >
< img src="historical-building.jpg" alt="Tòa nhà Quốc hội ở Budapest, Hungary" >
< figcaption>Hình 1: Tòa nhà Quốc hội Hungary nhìn từ sông Danube.
< /figure >
Các lỗi phổ biến khi dùng thẻ img HTML và cách khắc phục
Việc sử dụng thẻ img HTML hiệu quả đòi hỏi sự tỉ mỉ và hiểu biết về các yếu tố ảnh hưởng đến hiệu suất và SEO. Do đó, hãy biến việc kiểm tra các lỗi dưới đây thành thói quen mỗi khi bạn làm việc với hình ảnh.
1. Lỗi ảnh không hiển thị (Broken image)
Đây là lỗi phổ biến nhất và dễ nhận thấy nhất, bạn thấy một biểu tượng ảnh bị hỏng (thường là một hình vuông nhỏ với biểu tượng gạch chéo hoặc chữ "x") thay vì bức ảnh mong muốn.
Nguyên nhân:
- Bạn đã viết sai chính tả đường dẫn, ảnh không tồn tại ở vị trí đó hoặc ảnh đã bị di chuyển/xóa khỏi máy chủ.
- Ảnh chưa được tải lên máy chủ.
- Tên file ảnh trên host không khớp với tên bạn đặt trong code.
- Hệ điều hành trên máy chủ (ví dụ: Linux) thường phân biệt chữ hoa/thường trong tên file, trong khi máy tính của bạn (ví dụ: Windows) có thể không. image.JPG khác với image.jpg.
Cách khắc phục:
- Kiểm tra kỹ đường dẫn src, đảm bảo từng ký tự, dấu gạch chéo đều chính xác.
- Kiểm tra xem file ảnh có thực sự tồn tại ở đường dẫn mà bạn đã chỉ định trên máy chủ hay không.
- Đảm bảo tên file trong code khớp hoàn toàn với tên file trên máy chủ, bao gồm cả chữ hoa/thường và phần mở rộng (đuôi file như .jpg, .png).
- Dù không trực tiếp sửa lỗi ảnh bị hỏng, việc có alt text tốt sẽ giúp người dùng và công cụ tìm kiếm hiểu được nội dung ảnh ngay cả khi nó không hiển thị.
2. Lỗi ảnh quá lớn hoặc quá nhỏ
Ảnh hiển thị không đúng kích thước mong muốn, hoặc quá lớn làm vỡ bố cục hoặc quá nhỏ khiến người dùng không nhìn rõ.
Nguyên nhân:
- Không đặt thuộc tính width và height nên trình duyệt sẽ hiển thị ảnh theo kích thước gốc.
- Kích thước bạn đặt cho width và height trong HTML không phù hợp với không gian hiển thị hoặc tỷ lệ khung hình của ảnh bị sai.
- Thiếu CSS responsive khiến ảnh không co giãn theo kích thước màn hình, đặc biệt trên thiết bị di động.
Cách khắc phục:
- Luôn đặt width và height trong HTML.
- Sử dụng CSS để điều chỉnh và responsive nhằm kiểm soát kích thước hiển thị linh hoạt.
- Đảm bảo tỷ lệ width/height bạn đặt khớp với tỷ lệ ảnh gốc để tránh ảnh bị méo. Nếu bạn chỉ đặt width và height: auto trong CSS, trình duyệt sẽ tự động duy trì tỷ lệ.
3. Tốc độ tải trang chậm
Trang web của bạn tải rất lâu, đặc biệt là khi có nhiều hình ảnh. Đây là một trong những lỗi ảnh hưởng nghiêm trọng nhất đến trải nghiệm người dùng và SEO.
Nguyên nhân:
- Dung lượng file ảnh quá lớn.
- Sử dụng định dạng ảnh không tối ưu.
- Không sử dụng lazy loading khiến trình duyệt tải tất cả ảnh cùng lúc, kể cả ảnh ở cuối trang.
- Không dùng ảnh responsive (srcset) dẫn đến người dùng di động phải tải ảnh có kích thước lớn dành cho desktop.
- Máy chủ ảnh quá xa người dùng, hoặc quá tải.
Cách khắc phục:
- Luôn nén ảnh trước khi tải lên web. Sử dụng các công cụ như TinyPNG, Compressor.io, Squoosh.
- Chọn định dạng phù hợp như WEBP, AVIF, JPEG, PNG.
- Thêm loading="lazy" cho các ảnh không hiển thị ngay khi trang tải.
- Sử dụng srcset và sizes cho ảnh responsive.
- Cân nhắc dùng CDN để phân phối ảnh từ các máy chủ gần người dùng để tăng tốc độ.
Thẻ img trong HTML không chỉ là công cụ giúp chèn hình ảnh vào website mà còn là yếu tố quan trọng góp phần nâng cao trải nghiệm người dùng và hiệu quả SEO nếu được sử dụng đúng cách. Qua việc hiểu rõ cú pháp, thuộc tính và cách tối ưu thẻ img HTML, bạn sẽ dễ dàng tạo ra những trang web hấp dẫn, thân thiện với cả người truy cập lẫn công cụ tìm kiếm. Đừng quên áp dụng các mẹo và tránh những lỗi phổ biến mà Phương Nam Vina đã chia sẻ, để mỗi bức ảnh không chỉ đẹp mắt mà còn thật sự có giá trị với website của bạn!
