×

Cách sử dụng thẻ <img> để chèn hình ảnh vào trang trong HTML

Avatar of admin
admin 0 Views

Trong lập trình web, việc chèn hình ảnh vào trang HTML là một bước quan trọng để tạo nên nội dung hấp dẫn và sinh động. Để thực hiện điều này, thẻ <img> là công cụ tuyệt vời mà HTML cung cấp cho các nhà phát triển. Bài viết này sẽ hướng dẫn bạn cách sử dụng thẻ <img> một cách chi tiết, từ những khía cạnh cơ bản đến những thuộc tính nâng cao.

Thẻ <img> Là Gì?

Thẻ <img> là một thẻ không có thẻ đóng. Nó được sử dụng để nhúng (embed) hình ảnh vào trang web và đi kèm với nhiều thuộc tính để điều chỉnh cách hiển thị của hình ảnh. Thẻ này không tự chứa nội dung mà chỉ liên kết đến tập tin hình ảnh được lưu trữ.

Các Thuộc Tính Cơ Bản

  1. src (source)

    • Thuộc tính src chỉ định đường dẫn tới tập tin hình ảnh cần chèn. Đây là thuộc tính bắt buộc.
    • Ví dụ: <img src="path/to/image.jpg" alt="Description">

  2. alt (alternative text)

    • Thuộc tính alt cung cấp một đoạn văn bản thay thế sẽ hiển thị khi hình ảnh không thể tải được. Đây cũng là một yếu tố quan trọng để cải thiện SEO và truy cập cho người dùng khuyết tật.
    • Ví dụ: <img src="path/to/image.jpg" alt="A beautiful scenery">

Các Thuộc Tính Nâng Cao

  1. width và height

    • Thuộc tính width và height được sử dụng để điều chỉnh kích thước của hình ảnh. Giá trị có thể được đặt bằng pixel hoặc phần trăm.
    • Ví dụ: <img src="path/to/image.jpg" alt="A beautiful scenery" width="500" height="300">

  2. title

    • Thuộc tính title sẽ hiển thị một đoạn chữ khi người dùng di chuột lên hình ảnh.
    • Ví dụ: <img src="path/to/image.jpg" alt="A beautiful scenery" title="Beautiful Scenery">

  3. loading

    • Thuộc tính loading tối ưu hóa việc tải hình ảnh bằng cách trì hoãn việc tải cho đến khi hình ảnh nằm trong khung nhìn của người dùng. Giá trị có thể là lazy hoặc eager.
    • Ví dụ: <img src="path/to/image.jpg" alt="A beautiful scenery" loading="lazy">

  4. srcset và sizes

    • Thuộc tính srcset cung cấp danh sách các nguồn hình ảnh khác nhau cho các thiết bị có độ phân giải khác nhau.
    • Thuộc tính sizes chỉ định chiều rộng của hình ảnh tương ứng với các breakpoint.
    • Ví dụ: <img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" sizes="(max-width: 600px) 480px, (max-width: 1024px) 800px, 1200px" alt="A beautiful scenery">

Ví Dụ Cụ Thể

Chèn Hình Ảnh Cơ Bản

<img src="images/landscape.jpg" alt="A breathtaking landscape">

Chèn Hình Ảnh Có Kích Thước Cụ Thể

<img src="images/landscape.jpg" alt="A breathtaking landscape" width="600" height="400">

Tối Ưu Hóa Việc Tải Hình Ảnh

<img src="images/landscape.jpg" alt="A breathtaking landscape" loading="lazy">

Sử Dụng srcset và sizes

<img src="images/landscape-small.jpg" srcset="images/landscape-small.jpg 500w, images/landscape-medium.jpg 1000w, images/landscape-large.jpg 1500w" sizes="(max-width: 600px) 480px, (max-width: 1024px) 800px, 1200px" alt="A breathtaking landscape">

Kết Luận

Biết cách sử dụng thẻ <img> một cách hiệu quả không chỉ giúp nâng cao chất lượng trang web của bạn mà còn cải thiện trải nghiệm người dùng và tối ưu hóa SEO. Tận dụng hết các thuộc tính mà thẻ <img> cung cấp sẽ giúp bạn tạo nên những trang web sinh động và chuyên nghiệp.

Comments

Bài viết liên quan