Thuộc tính thẻ IMG

Sử dụng thẻ HTML IMG cho hình ảnh và đối tượng

Thẻ HTML IMG điều chỉnh việc chèn hình ảnh và các đối tượng đồ họa tĩnh khác trong một trang web. Thẻ phổ biến này hỗ trợ một số thuộc tính bắt buộc và tùy chọn bổ sung thêm sự phong phú cho khả năng thiết kế trang web tập trung vào hình ảnh hấp dẫn của bạn.

Một ví dụ về thẻ HTML IMG hoàn toàn được hình thành giống như sau:

Thuộc tính thẻ IMG bắt buộc

SRC. Thuộc tính duy nhất bạn cần để có được một hình ảnh để hiển thị trên một trang web là thuộc tính SRC. Thuộc tính này xác định tên và vị trí của tệp hình ảnh sẽ được hiển thị.

ALT. Để viết XHTML và HTML4 hợp lệ, thuộc tính ALT cũng được yêu cầu. Thuộc tính này được sử dụng để cung cấp các trình duyệt không có nội dung với văn bản mô tả hình ảnh. Trình duyệt hiển thị văn bản thay thế theo các cách khác nhau. Một số hiển thị nó như là một cửa sổ pop-up khi bạn đưa chuột lên ảnh, những người khác hiển thị nó trong các thuộc tính khi bạn nhấp chuột phải vào hình ảnh, và một số không hiển thị nó ở tất cả.

Sử dụng văn bản thay thế để cung cấp thêm chi tiết về hình ảnh không liên quan hoặc quan trọng đối với văn bản của trang Web. Nhưng hãy nhớ rằng trong trình đọc màn hình và các trình duyệt văn bản khác, văn bản sẽ được đọc nội tuyến với phần còn lại của văn bản trên trang. Để tránh nhầm lẫn, hãy sử dụng văn bản thay thế mô tả cho biết (ví dụ), “Giới thiệu về thiết kế web và HTML” thay vì chỉ “biểu trưng”.

Trong HTML5, thuộc tính ALT không phải lúc nào cũng được yêu cầu, bởi vì bạn có thể sử dụng chú thích để thêm mô tả cho nó. Bạn cũng có thể sử dụng thuộc tính ARIA-DESCRIBEDBY để biểu thị ID chứa mô tả đầy đủ.

Văn bản thay thế cũng không bắt buộc nếu hình ảnh được trang trí hoàn toàn, chẳng hạn như hình ảnh ở đầu trang web hoặc biểu tượng. Nhưng nếu bạn không chắc chắn, hãy bao gồm văn bản thay thế chỉ trong trường hợp.

Các thuộc tính IMG được đề xuất

WIDTHHEIGHT . Bạn nên đi vào thói quen luôn sử dụng các thuộc tính WIDTH và HEIGHT. Và bạn nên luôn sử dụng kích thước thật và không thay đổi kích thước hình ảnh của mình bằng trình duyệt.

Các thuộc tính này tăng tốc độ hiển thị trang vì trình duyệt có thể phân bổ không gian trong thiết kế cho hình ảnh và sau đó tiếp tục tải xuống phần còn lại của nội dung, thay vì đợi toàn bộ hình ảnh tải xuống.

Thuộc tính IMG hữu ích khác

TITLE . Thuộc tính là một thuộc tính tổng thể có thể được áp dụng cho bất kỳ phần tử HTML nào. Hơn nữa, thuộc tính TITLE cho phép bạn thêm thông tin bổ sung về hình ảnh.

Hầu hết các trình duyệt đều hỗ trợ thuộc tính TITLE, nhưng chúng hoạt động theo nhiều cách khác nhau. Một số hiển thị văn bản dưới dạng cửa sổ bật lên trong khi một số khác hiển thị văn bản trong màn hình thông tin khi người dùng nhấp chuột phải vào hình ảnh. Bạn có thể sử dụng thuộc tính TITLE để viết thông tin bổ sung về hình ảnh nhưng không được tính vào thông tin này bị ẩn hoặc hiển thị. Bạn nhất định không nên sử dụng điều này để ẩn từ khóa cho công cụ tìm kiếm. Thực tế này hiện bị phạt bởi hầu hết các công cụ tìm kiếm.

USEMAPISMAP . Hai thuộc tính này đặt hình ảnh phía máy khách () và phía máy chủ (ISMAP) thành các ảnh của bạn.

LONGDESC . Thuộc tính hỗ trợ URL cho mô tả dài hơn của hình ảnh. Tính năng này giúp hình ảnh của bạn dễ truy cập hơn.

Các thuộc tính IMG không được chấp nhận và lỗi thời

Một số thuộc tính hiện đã lỗi thời trong HTML5 hoặc không được chấp nhận trong HTML4. Để có HTML tốt nhất, bạn nên tìm các giải pháp khác thay vì sử dụng các thuộc tính này.

BORDER . Thuộc tính xác định chiều rộng tính bằng pixel của bất kỳ đường viền nào xung quanh hình ảnh. Nó đã bị phản đối vì lợi ích của CSS trong HTML4 và đã lỗi thời trong HTML5.

ALIGN . Thuộc tính này cho phép bạn đặt một hình ảnh bên trong văn bản và có dòng văn bản xung quanh nó. Bạn có thể căn chỉnh hình ảnh sang phải hoặc trái. Nó đã bị phản đối vì lợi ích của thuộc tính CSS float trong HTML4 và đã lỗi thời trong HTML5.

HSPACEVSPACE . HSPACE và thuộc tính VSPACE thêm khoảng trắng theo chiều ngang (HSPACE) và theo chiều dọc (VSPACE). Không gian trắng sẽ được thêm vào cả hai mặt của hình ảnh (trên cùng và dưới cùng hoặc bên trái và bên phải), vì vậy nếu bạn chỉ cần không gian trên một mặt, bạn nên sử dụng CSS. Các thuộc tính này đã không được chấp nhận trong HTML4 có lợi cho thuộc tính CSS lề và chúng đã lỗi thời trong HTML5.

LOWSRC . Thuộc tính LOWSRC cung cấp một hình ảnh thay thế khi nguồn hình ảnh của bạn quá lớn mà nó tải xuống rất chậm. Ví dụ, bạn có thể có một hình ảnh là 500KB mà bạn muốn hiển thị trên trang web của bạn, nhưng 500KB sẽ mất một thời gian dài để tải xuống. Vì vậy, bạn tạo một bản sao nhỏ hơn nhiều của hình ảnh, có lẽ màu đen và trắng hoặc cực kỳ được tối ưu hóa và đặt nó vào thuộc tính LOWSRC. Hình ảnh nhỏ hơn sẽ tải xuống và hiển thị đầu tiên, sau đó khi hình ảnh lớn hơn xuất hiện, nó sẽ thay thế hình ảnh nguồn thấp.

Thuộc tính LOWSRC đã được thêm vào Netscape Navigator 2.0 vào thẻ IMG. Nó là một phần của DOM cấp 1 nhưng sau đó đã được gỡ bỏ khỏi mức DOM 2. Hỗ trợ trình duyệt đã được phác thảo cho thuộc tính này, mặc dù nhiều trang web cho rằng nó được hỗ trợ bởi tất cả các trình duyệt hiện đại. Nó không được chấp nhận trong HTML4 hoặc lỗi thời trong HTML5 vì nó không bao giờ là một phần chính thức của một trong hai đặc điểm kỹ thuật.

Tránh sử dụng thuộc tính này và thay vào đó hãy tối ưu hóa hình ảnh của bạn để chúng tải nhanh. Tốc độ tải trang là một phần quan trọng trong thiết kế web tốt và hình ảnh lớn làm chậm trang xuống rất nhiều — ngay cả khi bạn sử dụng thuộc tính LOWSRC.