Hình ảnh là một yếu tố không kém phần quan trọng trong quá trình phát triển trang web, giúp website của bạn tăng thêm tính trực quan, đồng thời cải thiện đáng kể trải nghiệm của người dùng. Vậy cách chèn ảnh trong HTML được thực hiện như thế nào?
Bài viết dưới đây sẽ giải đáp chi tiết về:
Các định dạng hình ảnh được sử dụng trong HTML
Các bước chèn hình ảnh vào trang web bằng thẻ img trong HTML
Cách chèn ảnh nền và sử dụng thuộc tính của CSS để chèn hình ảnh
Một số định dạng ảnh thông dụng trong HTML
HTML hỗ trợ nhiều loại định dạng hình ảnh khác nhau như JPEG, PNG hay GIF,… Khi lựa chọn định dạng ảnh cho trang web, bạn có thể xem xét đến các yếu tố như loại nội dung, độ trong suốt, chất lượng, dung lượng hay khả năng hỗ trợ trình duyệt đối với định dạng ảnh bạn đang lựa chọn.
Một số thông tin cơ bản về các loại định dạng ảnh trong HTML như sau:
Định dạng
Ưu điểm
Thích hợp
Hạn chế
JPEG (Joint Photographic Experts Group)
Độ nén cao
Kích thước file nhỏ
Chất lượng hình ảnh tốt
Dạng ảnh chụp và ảnh có màu gradient
Không phù hợp với hình ảnh có độ trong suốt
PNG (Portable Network Graphics)
Hỗ trợ nén lossless
Chất lượng hình ảnh tốt
Có độ trong suốt
Hình ảnh có độ trong suốt, icon, logo hoặc đồ họa nét
Kích thước tệp lớn hơn so với JPEG
GIF (Graphics Interchange Format)
Hỗ trợ hình ảnh động
Có độ trong suốt
Kích thước nhỏ cho đồ họa đơn giản
Hoạt ảnh đơn giản, hình ảnh có bảng màu hạn chế
Hỗ trợ bảng màu còn hạn chế, không phù hợp với ảnh chụp hoặc hình ảnh phức tạp
SVG (Scalable Vector Graphics)
Không phụ thuộc vào độ phân giải
Kích thước tệp nhỏ
Hiển thị sắc nét ở mọi kích thước
Đồ họa Vector, logo, icon, hình ảnh chia tỷ lệ mà không làm giảm chất lượng
Không phù hợp với những hình ảnh phức tạp
WebP
Cung cấp khả năng nén mất hoặc không mất dữ liệu
Kích thước tệp nhỏ và chất lượng hình ảnh tốt
Trình duyệt web hiện đại và phân giải hình ảnh hiệu quả
Hỗ trợ hạn chế trong các trình duyệt phiên bản cũ
TIFF (Tagged Image File Format)
Lưu trữ hình ảnh chất lượng cao
Sử dụng thẻ (tag) tìm kiếm văn bản trong hình ảnh
Nén không làm mất dữ liệu
Các định dạng đồ họa raster
Dung lượng lớn hơn PNG hoặc JPEG
Không được sử dụng thường xuyên trong các trình duyệt web
Việc kết hợp các định dạng trong trang web để tối ưu hóa phân phối hình ảnh được sử dụng rất phổ biến. Đối với các ảnh có dung lượng lớn, bạn có thể sử dụng các công cụ hoặc kỹ thuật để giảm dung lượng nhưng vẫn đảm bảo duy trì được chất lượng hình ảnh. Điều này sẽ giúp cải thiện hiệu suất của web tốt hơn.
Giới thiệu tổng quan về thẻ img trong HTML
Thẻ img trong HTML thường được sử dụng để chèn hình ảnh vào trang web bằng cách nhúng liên kết của chúng. Trình duyệt sẽ tạo một khoảng trống thích hợp để hiển thị hình ảnh, được xác định bằng các thuộc tính như src, width, height hay alt,… và thẻ <img> là một thẻ tự đóng, không cần thêm thẻ đóng.
Cú pháp cơ bản của thẻ <img> được sử dụng như sau:
<img src="đường_dẫn_đến_ảnh">
Trong đó, có hai cách để khai báo đường dẫn đến nơi chứa hình ảnh là:
Cách 1: Cung cấp đường dẫn tuyệt đối của hình ảnh (địa chỉ URL, đường dẫn cục bộ), sau đó nhúng chúng vào thuộc tính của thẻ <img>
Cách 2: Cung cấp đường dẫn tương đối đến vị trí chứa hình ảnh của trang web hiện tại.
Để hiểu rõ hơn về cách sử dụng thẻ img, hãy tham khảo qua các bước chèn ảnh trong HTML ngay sau đây!
8 bước chèn ảnh trong HTML bằng thẻ <img>
Sử dụng thuộc tính src và thẻ img trong HTML
Nếu bạn chèn ảnh bằng cách sử dụng thẻ img trong HTML thì không thể thiếu thuộc tính src. Thuộc tính này chỉ định đường dẫn tới ảnh mà bạn muốn chèn. Đường dẫn có thể là tương đối (relative) hoặc tuyệt đối (absolute), nếu thiếu thuộc tính này trình duyệt sẽ không biết phải hiển thị nội dung gì. Để hình ảnh được hiển thị tốt, bạn có thể sử dụng các định dạng ảnh phổ biến như jpeg, png hoặc gif.
<!DOCTYPE html><html><style>img { background-color: black;}</style><body><h2>Chèn hình ảnh vào HTML</h2><p>Hướng dẫn cách chèn hình ảnh bằng thuộc tính src</p><img src="https://itviec.com/assets/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png" alt="itviecblog" width="900" height="345"></body></html>
Kết quả hiển thị của đoạn mã trên:
Thuộc tính alt
Trình duyệt có thể hiển thị hình ảnh mà không cần thuộc tính alt, tuy nhiên thuộc tính này cũng rất quan trọng trong việc lập trình web. Bởi nếu như hình ảnh không được hiển thị trên màn hình, văn bản thay thế được khai báo trong thuộc tính Alt sẽ xuất hiện. Bên cạnh đó, thuộc tính alt giúp các công cụ tìm kiếm hình ảnh (Google Images) thu thập dữ liệu và xếp hạng trang web tốt hơn.
<!DOCTYPE html><html><style>img { background-color:black; color:red;}</style><body><h2>Alternative text</h2><p>Hướng dẫn cách chèn hình ảnh bằng thuộc tính alt</p><img src="https://itviec.com/assets/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png" alt="itviecblog" width="700" height="200"><p>Nếu trang web không thể hiển thị hình ảnh, alt sẽ được hiển thị thay thế như sau:</p><img src="https://itviec.com/assets/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.gif" alt="logo ITViec"></body></html>
Kết quả hiển thị của đoạn mã trên:
Định dạng kích thước của hình ảnh
Bạn có thể định dạng kích thước hình ảnh bằng cách sử dụng thuộc width và height để điều chỉnh chiều rộng cũng như chiều cao của hình ảnh. Các giá trị của thuộc tính được chỉ định theo đơn vị mặc định là pixel.
Bằng cách sử dụng width và height để chèn ảnh trong HTML giúp cải thiện tốc độ tải trang hiệu quả, trình duyệt sẽ biết trước kích thước của ảnh, từ đó có thể dành không gian cho ảnh ngay lập tức. Điều này sẽ tránh làm thay đổi bố cục khi ảnh được hiển thị trên trang web.
Ví dụ, bạn muốn định dạng hình ảnh trong đoạn mã bên dưới với kích thước của chiều rộng và chiều cao lần lượt là 700×200 pixel.
<!DOCTYPE html><html><head> <title> Setting width and height of image </title></head><style>img{background-color: black;}</style><body> <p>Điều chỉnh kích thước của hình ảnh</p><img src="https://itviec.com/assets/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png" alt="ITviec Blog logo" width="700" height="200" /></body></html>
Kết quả hiển thị của đoạn mã trên:
Điều chỉnh định dạng ảnh
Đối với định dạng ảnh, bạn có thể tùy chỉnh kích thước của chúng. Ở ví dụ này, bạn sẽ thực hành sử dụng thuộc tính border để định dạng cho hình ảnh. Theo mặc định, mỗi hình ảnh đều có đường viền xung quanh, sử dụng thuộc tính border sẽ giúp tạo độ dày cho đường viền ảnh. Độ dày bằng 0 nghĩa là không có đường viền xung quanh.
Cụ thể như sau:
<!DOCTYPE html><html><head> <title>Setting border to image</title></head><style>img { background-color: pink;}</style><body> <p>Tùy chỉnh định dạng ảnh</p> <img src="https://itviec.com/assets/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png" alt="ITviec Blog logo" width="500" height="200" border="7"/></body></html>
Kết quả hiển thị của đoạn mã trên:
Căn chỉnh lề
Đối với các trình duyệt web hiện đại, bạn có thể căn chỉnh hình ảnh bằng thuộc tính CSS image-align với các giá trị “left” hoặc “right” tương ứng. Trước kia, bạn có thể thuộc tính align của HTML nhưng hiện tại chúng không còn được hỗ trợ trong HTML5 nữa.
Chẳng hạn theo ví dụ dưới đây, bạn có thể sử dụng thuộc tính của CSS để căn chỉnh hình ảnh sang trái hoặc căn phải trong một đoạn văn:
<style> .image-align-left { float: left; margin-right: 10px; background-color:black; } .image-align-right { float: right; margin-right: 10px; background-color:black; }</style><p><img src="https://itviec.com/assets/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png" alt="ITviec Blog" class="image-align-left"></p><p>Trang thông tin<br> phát triển<br> sự nghiệp IT<br> của bạn, </p><p><img src="https://itviec.com/assets/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png" alt="ITviec Blog" class="image-align-right"></p>
Kết quả hiển thị của đoạn mã trên:
Thêm liên kết của hình ảnh
Nếu bạn muốn dẫn hình ảnh về một trang trong website hoặc nội dung bên ngoài website thì có thể chèn liên kết vào ảnh bằng cách sử dụng phần tử <a> (anchor) cùng thuộc tính href bao bọc bên ngoài thẻ <img>. Thẻ <a> cho phép bạn tùy chỉnh các siêu liên kết của hình ảnh trong bài, có thể nhấn vào liên kết với các nội dung bên ngoài trang web.
Bên cạnh đó, có thể bổ sung thuộc tính target=“<giá trị>” để mở trang được liên kết trong tab hiện tại hoặc tab mới.
Chẳng hạn như cách chèn liên kết vào hình ảnh qua ví dụ như sau:
<!DOCTYPE html><html> <head> <title>Adding image as link</title> </head><style>img{background-color:black;}</style> <body> <h3>ITviec Blog</h3> <p>Chèn liên kết vào hình ảnh</p><a href= "https://itviec.com/"> <img src="https://itviec.com/assets/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png" alt="ITviec Blog logo"/> </a> </body></html>
Sau khi hình ảnh được hiển thị, bạn có thể click vào hình để xem đường dẫn được chèn vào trong hình ảnh rồi đấy.
Chèn Responsive Image
Hiện nay, đa số các trang web hiện đại luôn cần hình ảnh hiển thị tốt, thích ứng linh hoạt với nhiều kích cỡ màn hình khác nhau. Để làm cho hình ảnh của bạn có tính phản hồi nhanh và linh hoạt, bạn có thể sử dụng thuộc tính max-width của CSS, thuộc tính này sẽ giúp ảnh tự động giảm tỷ lệ phù hợp với chiều rộng của vùng chứa, ngay cả khi kích thước màn hình hoặc chiều rộng của khung giảm.
Điều này sẽ đảm bảo hình không bị tràn hoặc phá vỡ bố cục hiện tại của trang web, thậm chí khi hiển thị trên màn hình nhỏ hơn như thiết bị di động. Chẳng hạn như:
<!DOCTYPE html><html><style>img{background-color:black;}</style><body><h2>Chèn hình ảnh vào HTML</h2><p>Hướng dẫn cách chèn Responsive Image</p><img src="https://itviec.com/assets/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png" alt="itviecblog" style="max-width: 100%;"></body></html>
Kết quả hiển thị của đoạn mã trên:
Chú thích hình ảnh
Để chèn chú thích cho hình ảnh, bạn có thể sử dụng thẻ <figure> hoặc <figcaption>, đây là hai thẻ giúp cung cấp một vùng chứa ngữ nghĩa cho các số liệu và liên kết rõ ràng hình ảnh với chú thích.
Bên cạnh đó, bạn nên điều chỉnh nội dung của chú thích với văn bản thay thế (alt) khác nhau. Theo quan điểm chức năng, chú thích và văn bản thay thế có vai trò riêng biệt. Chú thích sẽ luôn được hiển thị trên trang web kể cả khi hình ảnh có hiển thị hay không thể hiển thị. Trong khi đó, văn bản thay thế chỉ hiển thị khi hình ảnh không thể hiển thị được trên trình duyệt.
Do đó, chú thích và văn bản thay thế không nên có nội dung giống nhau vì cả hai sẽ đều hiển thị khi hình ảnh biến mất. Cụ thể như sau:
<style>img{background-color:black;}</style><figure> <img src="https://itviec.com/assets/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png" alt="ITviec logo" width="700" height="200" /> <figcaption> Đây là logo của ITviec Blog. </figcaption></figure>
Bên cạnh cách chèn ảnh trong HTML thông thường, bạn cũng có thể điều chỉnh hình ảnh làm hình nền cho trang web. Điều này sẽ giúp cải thiện khả năng hiển thị cũng như giúp trang web gây ấn tượng với người dùng hiệu quả hơn.
Hình nền có thể được điều chỉnh cho hầu hết mọi phần tử HTML. Bạn có thể chèn hình ảnh background với các trường hợp cụ thể như sau:
Background cho một phần tử HTML
Để thêm hình nền vào phần tử HTML, bạn có thể sử dụng thuộc tính CSSbackground-image như sau:
<!DOCTYPE html><html><body><h2>Chèn background vào phần tử HTML</h2><p>HƯỚNG DẪN CHÈN ẢNH BACKGROUND VÀO HTML</p><p style="background-image: url(https://itviec.com/assets/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png);">Chèn ảnh vào HTML với thuộc tính src<br>width hoặc height để căn chỉnh kích thước ảnh<br>align để căn chỉnh ảnh<br>href để chèn link ảnh<br>Hoặc các thuộc tính CSS khác<br></p></body></html>
Kết quả hiển thị của đoạn mã trên:
Hoặc bạn có thể điều chỉnh hình nền trong phần tử <style> cùng thuộc tính CSS background-image như sau:
<!DOCTYPE html><html><head><style>p { background-image: url(https://itviec.com/assets/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png);}</style></head><body><h2>Background Image</h2>
<p>Chèn ảnh vào HTML với thuộc tính src<br>width hoặc height để căn chỉnh kích thước ảnh<br>align để căn chỉnh ảnh<br>href để chèn link ảnh<br>Hoặc các thuộc tính CSS khác<br></p></body></html>
Chèn background trên một trang
Tương tự, nếu bạn muốn chèn ảnh cho toàn bộ trang, bạn có thể chỉ định hình nền trên phần tử <body>, như sau:
<!DOCTYPE html><html><head><style>body { background-image: url('img_girl.jpg');}</style></head><body><h2 style="background-color:White;">Background Image</h2>
<p style="background-color:Pink;">Chèn ảnh vào HTML với thuộc tính src, hoặc sử dụng width hoặc height để căn chỉnh kích thước ảnh. Bạn cũng có thể sử dụng align để căn chỉnh ảnh hoặc href để chèn link ảnh. Hoặc các thuộc tính CSS khác</p></body></html>
Kết quả hiển thị đoạn mã trên:
Background lặp lại
Nếu bạn chèn hình ảnh nhỏ hơn phần tử, hình ảnh sẽ được lặp đi lặp lại theo cả chiều ngang và chiều dọc cho đến khi chạm đến phần cuối ở trang web như sau:
Do đó, để tránh hình nền bị lặp lại, bạn hãy sử dụng thuộc tính background-repeat thành no-repeat, cụ thể như sau:
Nếu bạn muốn hình nền bao phủ toàn bộ phần tử, bạn có thể sử dụng thuộc tính background-size để bao phủ toàn bộ. Ngoài ra, để đảm bảo toàn bộ phần tử luôn được che phủ, bạn sử dụng thêm background-attachment để hình nền không bị giãn và giữ nguyên tỷ lệ ban đầu.
Cụ thể như sau:
<!DOCTYPE html><html><head><style>body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover;}</style></head><body><h2>Background Cover</h2><p>Sử dụng thuộc tính background-size để bao phủ toàn bộ. Sử dụng thêm background-attachment để hình nền không bị giãn và giữ nguyên tỷ lệ ban đầu</p></body></html>
Kết quả hiển thị đoạn mã trên:
Căng nền (Background Stretch)
Nếu bạn muốn hình nền giãn ra để vừa với kích thước của trang web, bạn có thể điều chỉnh thuộc tính background-size thành 100% 100%, cụ thể như sau:
<!DOCTYPE html><html><head><style>body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%;}</style></head><body><h2>Background Image</h2><p>Chèn ảnh vào HTML với thuộc tính src, hoặc sử dụng width hoặc height để căn chỉnh kích thước ảnh. Bạn cũng có thể sử dụng align để căn chỉnh ảnh hoặc href để chèn link ảnh. Hoặc các thuộc tính CSS khác</p></body></html>
Kết quả hiển thị đoạn mã trên:
Chèn ảnh trong HTML sử dụng ::before và ::after trong CSS
Bên cạnh sử dụng thẻ img trong HTML để chèn hình ảnh thì bạn cũng có thể dùng thuộc tính CSS để định dạng hình ảnh. Phần tử giả ::before và ::after trong CSS cho phép bạn chèn ảnh trong HTML.
Để sử dụng hai thuộc tính này, bạn chỉ cần dùng theo cú pháp element:before hoặc element:after kèm theo thuộc tính content, ngay cả khi nó được để trống. Sau đó, để chèn hình nền vào, bạn có thể cung cấp thêm một màn hình khối (block display) hoặc chiều cao phù hợp với hình ảnh.
Theo ví dụ sau, phần tử giả ::before sẽ đặt hình nền trước phần tử được chọn và nếu phần tử có màu nền dược liên kết, thuộc tính z-index sẽ được sử dụng thêm để hình ảnh được hiển thị không bị đè lên nội dung của phần tử cha. Cụ thể như sau:
Ngoài ra, khi sử dụng ::before và ::after để thêm hình ảnh, bạn chỉ có thể sử dụng hình ảnh như một ảnh nền và không thể sử dụng các thuộc tính hình ảnh nâng cao như khi sử dụng <img>.
Để căn chỉnh hình ảnh trên trang web, bạn có thể sử dụng các thuộc tính của CSS như margin, padding hay float, cụ thể như sau:
margin: Xác định khoảng cách giữa ảnh và các phần tử khác trên trang web.
padding: Khoảng cách giữa nội dung và viền ảnh.
float: Xác định ảnh nổi lên bên trái hay bên phải của phần tử chứa nó, làm cho nội dung văn bản hoặc các phần tử khác bao quanh nó.
Chèn ảnh trong HTML bị méo thì nên khắc phục như thế nào?
Có một số nguyên nhân khiến việc chèn ảnh trong HTML bị méo và không hiển thị đúng kích thước ảnh như:
Kích thước ảnh không phù hợp với kích thước được chỉ định trong thuộc tính weight và height.
Định dạng ảnh không được hỗ trợ trong trình duyệt web.
Lỗi mã trong đoạn HTML.
Sử dụng định dạng CSS chưa đúng.
Bạn cần kiểm tra lại các nguyên nhân và thực hiện các điều chỉnh phù hợp. Đối với lỗi định dạng và kích thước ảnh, bạn có thể sử dụng những định dạng ảnh phổ biến hơn như JPEG hoặc PNG để có hiển thị tốt trên trang web.
Tại sao nên sử dụng hình ảnh trên trang web?
Hình ảnh giúp trang web của bạn thêm phần sinh động và dễ dàng thu hút người dùng hơn. Nếu một trang web không có hình ảnh và dày đặc những thông tin sẽ dễ khiến người dùng chán nản cũng như không có hứng thú để trải nghiệm trang web.
Hình ảnh sẽ giúp minh họa cho nội dung trang web thêm phần hấp dẫn và trực quan hơn. Ngoài ra, đối với những thông tin có số liệu, hình ảnh sẽ giúp người đọc hiểu chúng một cách dễ dàng hơn. Bên cạnh đó, còn giúp cải thiện trải nghiệm của người dùng cũng như tăng lượng truy cập đến trang web.
Tổng kết về cách chèn ảnh trong HTML
Chèn ảnh trong HTML là kỹ năng cơ bản và cần thiết dành cho các nhà phát triển web. Nắm vững kiến thức về thẻ <img> cùng các thuộc tính, bạn có thể dễ dàng lập trình cách hiển thị, kích thước cũng như căn chỉnh hình ảnh một cách tối ưu trên trang web. Bạn có thể thực hành các dự án tích hợp hình ảnh vào trang web, ứng dụng các phương pháp trên để nâng cao hiệu suất và trải nghiệm người dùng hiệu quả hơn.
Nắm vững kiến thức về HTML cũng như lập ra một lộ trình học HTML sẽ giúp bạn nâng cao kỹ năng, từ đó mở rộng cơ hội thăng tiến trên con đường trở thành một Front-End Developer chuyên nghiệp.
