Thẻ hình ảnh HTML là gì?
lúc bạn tải một trang web, hình ảnh sẽ bật lên nhanh chóng. Con người là sinh vật trực quan và chúng ta thích xem những trang web với hình ảnh đầy màu sắc. Chúng thu hút ánh nhìn và sự sử dụng rộng rãi của chúng ta.
Những hình ảnh đó được nhắc bởi thẻ hình ảnh, một loại mã cho máy chủ của trang web biết nơi tìm hình ảnh, cách tải chúng và phải làm gì với chúng sau lúc chúng được tải.
Thẻ hình ảnh là hướng dẫn về cách hiển thị hình ảnh, vì hình ảnh ko thực sự được nhúng vào một trang. Hình ảnh là những tệp được tìm nạp và hiển thị trên trang tùy thuộc vào mã hoặc thẻ hình ảnh được sử dụng. Mã với thể thay đổi những thuộc tính hoặc chức năng của hình ảnh lúc nó tải.
Bạn với thể gửi một số tín hiệu SEO rất cần thiết bằng cách tối ưu hóa hình ảnh trang web của mình. Chúng tôi thảo luận sâu hơn về vấn đề này với hướng dẫn của chúng tôi về SEO Hình ảnh tại đây.
Thẻ hình ảnh HTML là gì?
Hãy xem xét những thẻ hình ảnh kỹ hơn:
<img src="https://static.semrush.com/blog/uploads/media/43/b0/43b0b9a04c8a433a0c52360c9cc9aaf2/seo-guide-to-yoast-for-wordpress.svg" alt="yoast seo" height="288" width="388"/>
<img src="https://static.semrush.com/blog/uploads/media/20/b9/20b9fc4db7fe16be59032ff15883e98d/google-advertising.svg" alt="google advertising" height="288" width="388"/>
Trong đoạn mã trên, bạn với thể thấy 2 thuộc tính: SRC và ALT.
- SRC cho biết đường dẫn tới hình ảnh đang được hiển thị.
- ALT cho biết văn bản thay thế sẽ hiển thị nếu bản thân hình ảnh ko thể được hiển thị.
Sau thuộc tính ALT, bạn với thể thấy những thuộc tính chiều cao và chiều rộng. Bạn với thể đặt kích thước của hình ảnh theo cách thủ công, điều này với thể hữu ích nếu bạn với yêu cầu nghiêm ngặt về ko gian trên trang web.
Đảm bảo tránh làm cong hình ảnh lúc thiết lập kích thước hình ảnh của bạn; điều này với thể tạo ra trải nghiệm người sử dụng kém.
Thuộc tính SRC
Thuộc tính nguồn (SRC) tạo một đường dẫn tới tệp hình ảnh. Nếu liên kết bị hỏng, tệp đã bị di chuyển hoặc với lỗi đánh máy trong mã, bạn sẽ thấy biểu tượng ‘hình ảnh bị hỏng’ trên trang.
Thuộc tính ALT
Thuộc tính ALT chỉ định văn bản thay thế cho hình ảnh nếu chúng ko thể hoặc ko tải. Văn bản thay thế rất hữu ích cho những người với tầm nhìn hạn chế. Công cụ chuyển văn bản thành giọng nói với thể cho người xem biết hình ảnh nào đang được hiển thị.
Nó cũng tốt cho kết quả SEO. Tìm kiếm hình ảnh trên Google với ai ko?
Chiều rộng và chiều cao
những thuộc tính này quy định chiều cao và chiều rộng của hình ảnh. Nếu sử dụng những thuộc tính này với thẻ hình ảnh, cách tốt nhất là đặt cả chiều cao và chiều rộng để trang biết với bao nhiêu ko gian trên trang là cần thiết để hiển thị hình ảnh.
Nếu bạn ko chỉ định cả hai, bạn với thể gặp sự cố trong lúc trang nỗ lực tải hình ảnh.
những thuộc tính chiều rộng và chiều cao xuất hiện như sau:
<img src="https://googleentitystacking.com/the-hinh-anh-html-va-cach-chen-hinh-anh-de-lam-phong-phu-trang-cua-ban/img_logo.jpg" alt="Semrush logo một" width="500" height="600">
Mã này tải mage logo Semrush với tên tệp img_logo.jpg. Hình ảnh sẽ với chiều rộng 500 pixel và chiều cao 600 pixel.
những thuộc tính khác
với một số thuộc tính khác mà bạn với thể sử dụng trong thẻ hình ảnh. Một cách khác mà bạn với thể sử dụng để định dạng là thuộc tính “Align”. Thuộc tính này đặt hình ảnh của bạn ở nơi bạn muốn trên trang.
Với những người tạo và chỉnh sửa trang web tiên tiến ngày nay, thẻ này rất nhiều là thừa. Bạn với thể nhấp và kéo và chèn hình ảnh vào nơi bạn muốn. Tuy nhiên, một số lập trình viên vẫn sử dụng thẻ căn chỉnh để căn chỉnh hình ảnh của họ ở nơi họ muốn.
Ví dụ về việc sử dụng thuộc tính này bao gồm “trái” và “phải”, đặt hình ảnh ở bên trái hoặc bên phải của trang.
“Phần đầu văn bản” căn chỉnh hình ảnh với ví dụ văn bản cao nhất; “Abs bottom” căn chỉnh hình ảnh của bạn với phần cuối của dòng hiện tại mà nó được đặt.
Cách thêm Thẻ hình ảnh HTML
Nếu bạn muốn thêm hình ảnh vào trang của mình theo cách thủ công, chúng tôi sẽ hướng dẫn bạn cách thực hiện.
Thêm hình ảnh chuẩn
<img src="https://googleentitystacking.com/the-hinh-anh-html-va-cach-chen-hinh-anh-de-lam-phong-phu-trang-cua-ban/semrush.jpg" alt="Semrush logo" width="50" height="50" style="vertical-align:bottom">
Mã này sẽ tìm và chèn một hình ảnh của biểu tượng Semrush, với chiều rộng và chiều cao là 50 x 50 pixel. Hình ảnh này sẽ được căn chỉnh với phần dưới cùng của màn hình.
<img src="https://googleentitystacking.com/the-hinh-anh-html-va-cach-chen-hinh-anh-de-lam-phong-phu-trang-cua-ban/semrush.jpg" alt="Semrush logo" width="50" height="50" style="float:right">
Mã này cũng chèn một hình ảnh 50 x 50 pixel của biểu trưng Semrush. Kiểu là ‘float right’, với nghĩa là hình ảnh sẽ nằm ở phía bên tay phải của trang. những phần tử sắp đó sẽ chảy xung quanh hình ảnh, tương đương bọc văn bản trong trình xử lý văn bản.
Thêm đường viền hình ảnh
<img src="https://googleentitystacking.com/the-hinh-anh-html-va-cach-chen-hinh-anh-de-lam-phong-phu-trang-cua-ban/semrush.jpg" alt="Semrush logo" width="50" height="50" style="border:10px solid green">
Đoạn mã trên sẽ thêm hình vuông 50 x 50 pixel của biểu tượng Semrush và thêm đường viền màu xanh lá cây dày 10 pixel.
Điều này với thể giúp làm nổi bật những hình ảnh rất cần thiết trên trang và thu hút ánh nhìn tới nơi bạn muốn người sử dụng nhìn vào.
Thêm lề trái và lề phải vào hình ảnh
<img src="https://googleentitystacking.com/the-hinh-anh-html-va-cach-chen-hinh-anh-de-lam-phong-phu-trang-cua-ban/semrush.jpg" alt="Semrush logo" width="50" height="50" style="vertical-align:middle;margin:0px 50px">
Mã này tải biểu trưng Semrush, căn chỉnh nó theo chiều dọc ở giữa trang và thêm lề chiều rộng 50 pixel vào bên trái và bên phải của hình ảnh. ngay bây giờ, ko với văn bản nào sẽ xuất hiện trong vòng 50 pixel ở hai bên của hình ảnh.
Thêm lề trên và lề dưới vào hình ảnh
tương đương ở trên, biểu trưng Semrush sẽ tải, căn chỉnh lại với giữa trang, nhưng ngay bây giờ sẽ với lề 50 pixel ở trên và dưới hình ảnh. ko với yếu tố nào khác nằm trong phạm vi 50 pixel của hình ảnh này, trên cùng hoặc dưới cùng.
Yếu tố hình ảnh thêm vào trải nghiệm người sử dụng của một trang. Nếu một trang trông hấp dẫn, mọi người sẽ ở lại lâu hơn và Google sẽ lưu ý điều này.
Thẻ hình ảnh cố định hình ảnh để hình ảnh xuất hiện trong mối quan hệ với những phần tử khác trên trang web. Bạn với thể sử dụng thẻ hình ảnh để định cấu hình cách hình ảnh xuất hiện và tối ưu hóa cho cả bot công cụ tìm kiếm và người sử dụng.
những thẻ bạn sử dụng ảnh hưởng tới vận tốc tải trang của bạn, điều này với thể ảnh hưởng tới trải nghiệm người sử dụng trên trang web của bạn.
Tất cả những trình duyệt hiện tại đều tư vấn những mã thẻ hình ảnh này, vì vậy ko rất cần thiết bạn hoặc khách truy cập của bạn sử dụng trình duyệt nào. Thẻ hình ảnh dịch sang tất cả những trình duyệt để với trải nghiệm nhất quán.
Bạn sử dụng thẻ hình ảnh lúc hình ảnh là một phần của nội dung – ko phải là một phần của chính thiết kế trang.
Ví dụ: nếu bạn với một mẫu trang bao gồm hình ảnh biểu trưng của bạn hoặc một chiếc gì đó tương tự, thì bạn sẽ ko sử dụng thẻ hình ảnh trong mã. Mẫu với hình ảnh cần phải nhất quán trên trang web của bạn.
Trang web của bạn sẽ tải mẫu bao gồm hình ảnh, sau đó bạn sẽ thêm nội dung của mình vào trang đó.
Thẻ hình ảnh chỉ định cách thức và vị trí hình ảnh sẽ được sử dụng và trình bày trong nội dung.
Công cụ Kiểm tra Trang web với hơn 130 kiểm tra trang web mà nó với thể thực hiện trên trang web của bạn, bao gồm một số kiểm tra đối với thẻ hình ảnh và bất kỳ liên kết liên quan nào. Công cụ Kiểm tra Trang web với thể xem liệu những liên kết với còn chính xác hay ko hay chúng đã bị hỏng.
Việc khắc phục mọi lỗi hình ảnh, sửa chữa những liên kết hình ảnh bị hỏng và cải thiện trải nghiệm người sử dụng trên trang web của bạn trở nên dễ dàng hơn bao giờ hết.
Bạn với thể sử dụng công cụ Kiểm tra trang web tiếp theo với một dự án. Nếu hiện tại bạn chưa thiết lập dự án, bạn sẽ cần phải định cấu hình dự án trước lúc sử dụng công cụ Kiểm tra trang web.
lúc công cụ được mở, bạn sẽ được nhắc định cấu hình phạm vi thu thập thông tin của công cụ:
lúc quá trình kiểm tra hoàn tất, công cụ sẽ trả về danh sách những vấn đề cần xem xét, bao gồm bất kỳ vấn đề nào liên quan tới hình ảnh:
3 vấn đề chính với thể phát sinh liên quan tới hình ảnh là:
- Hình ảnh ko còn được định vị: Bạn sẽ cần tìm hình ảnh hoặc mã của nó và thay đổi URL nguồn của nó.
- Hình ảnh đã bị xóa: Thay thế hình ảnh bằng hình ảnh mới và cập nhật liên kết.
- Hình ảnh ko còn cần thiết nữa: Xóa hình ảnh và mã khỏi trang của bạn.
Bài học rút ra chính
Thẻ hình ảnh là một phần của việc tạo kiểu và tối ưu hóa trang web, trải nghiệm người sử dụng và SEO của bạn.
Bạn với thể điều chỉnh hoặc định vị hình ảnh của mình bằng cách thêm những thuộc tính bổ sung – như “chiều rộng” hoặc “căn chỉnh” – vào thẻ hình ảnh của bạn.
Luôn xem trước trang web của bạn lúc thực hiện thay đổi để đảm bảo bất kỳ thuộc tính nào bạn thêm vào mã hình ảnh ko làm hỏng hình ảnh hoặc trang web của bạn.
Sử dụng công cụ kiểm tra trang web để đảm bảo mã hình ảnh của bạn là chính xác và hình ảnh của bạn với thể được tìm thấy và tìm nguồn gốc.
Nguồn bài viết : % POSTLINK%
source https://phanmemchuyennghiep.net/the-hinh-anh-html-va-cach-chen-hinh-anh-de-lam-phong-phu-trang-cua-ban/
Đăng nhận xét