Images

Hình ảnh trang trí, chẳng hạn như màu nền chuyển màu trên các nút hoặc hình nền trên các phần nội dung hoặc toàn bộ trang, là hình ảnh trình bày và nên được áp dụng cùng với CSS. Khi một hình ảnh thêm ngữ cảnh vào tài liệu, thì đó là nội dung và phải được nhúng với HTML.

Phương thức chính để thêm hình ảnh là thẻ <img> với thuộc tính src tham chiếu đến một tài nguyên hình ảnh và thuộc tính alt mô tả hình ảnh.

<img src="images/eve.png" alt="Eve">

Cả thuộc tính srcset trên <img> và phần tử <picture> đều đưa ra cách bao gồm nhiều nguồn hình ảnh có các truy vấn nội dung nghe nhìn được liên kết, mỗi nguồn có một nguồn hình ảnh dự phòng, cho phép phân phát tệp hình ảnh thích hợp nhất dựa trên độ phân giải của thiết bị, các chức năng của trình duyệt và kích thước khung nhìn. Thuộc tính srcset cho phép cung cấp nhiều phiên bản hình ảnh dựa trên độ phân giải và cùng với thuộc tính sizes, kích thước khung nhìn của trình duyệt.

<img src="images/eve.png" alt="Eve"
  srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
  sizes="(max-width: 800px) 400px, 800px" />

Bạn cũng có thể thực hiện việc này bằng phần tử <picture> cùng với phần tử con <source>. Phần tử con này sẽ lấy <img> làm nguồn mặc định.

<picture>
  <source src="images/eve.png" media="(max-width: 800px)" />
  <source src="images/eve-xl.jpg" />
  <img src="images/eve.png" alt="Eve" />
</picture>

Ngoài các phương thức hình ảnh thích ứng HTML được tích hợp sẵn này, HTML cũng cho phép cải thiện hiệu suất hiển thị hình ảnh thông qua nhiều thuộc tính. Thẻ <img> và nút gửi đồ hoạ <input type="image"> có thể bao gồm các thuộc tính height và width để đặt tỷ lệ khung hình của hình ảnh nhằm giảm sự thay đổi về bố cục nội dung. Thuộc tính lazy cho phép tải từng phần.

HTML cũng hỗ trợ việc thêm hình ảnh SVG bằng cách sử dụng trực tiếp <svg>, mặc dù hình ảnh SVG có phần mở rộng .svg (hoặc dưới dạng data-uri) có thể được nhúng bằng cách sử dụng phần tử <img>.

Ít nhất, mỗi hình ảnh nền trước phải bao gồm các thuộc tính src và alt.

Tệp src là đường dẫn và tên tệp của hình ảnh được nhúng. Thuộc tính src dùng để cung cấp URL cho hình ảnh. Sau đó, trình duyệt sẽ tìm nạp thành phần và hiển thị nó lên trang. Thuộc tính này được <img> yêu cầu; nếu không, sẽ không có thuộc tính nào để kết xuất.

Thuộc tính alt cung cấp văn bản thay thế cho hình ảnh, cung cấp nội dung mô tả về hình ảnh cho những người không thể nhìn thấy màn hình (ví dụ như các công cụ tìm kiếm và công nghệ hỗ trợ, thậm chí cả Alexa, Siri và Trợ lý Google) và có thể được trình duyệt hiển thị nếu hình ảnh không tải. Ngoài người dùng có mạng chậm hoặc băng thông bị giới hạn, văn bản alt cũng cực kỳ hữu ích trong email HTML, vì nhiều người dùng chặn hình ảnh trong các ứng dụng email của họ.

<img src="path/filename" alt="descriptive text" />

Nếu hình ảnh thuộc loại tệp SVG, hãy bao gồm cả role="img". Điều này là cần thiết do VoiceOver bugs.

<img src="switch.svg" alt="light switch" role="img" />

Viết nội dung mô tả hình ảnh alt sao cho hiệu quả

Mục đích của thuộc tính Alt là ngắn gọn và súc tích, cung cấp tất cả thông tin liên quan mà hình ảnh truyền tải, đồng thời bỏ qua thông tin thừa cho nội dung khác trong tài liệu hoặc không hữu ích. Khi viết văn bản, giọng điệu phải phản ánh tông điệu của trang web.

Để viết văn bản thay thế hiệu quả, hãy tưởng tượng rằng bạn đang đọc toàn bộ trang cho một người không xem được nội dung đó. Bằng cách sử dụng phần tử <img> ngữ nghĩa, người dùng và bot trình đọc màn hình sẽ nhận được thông báo rằng phần tử đó là một hình ảnh. Bạn không cần đưa nội dung "Đây là một hình ảnh/ảnh chụp màn hình/ảnh của" vào alt. Người dùng không cần biết có hình ảnh nhưng họ cần biết hình ảnh đó truyền tải thông tin gì.

Thông thường, bạn sẽ không nói "Đây là hình ảnh sần sùi của một chú chó đội mũ màu đỏ". Thay vào đó, bạn sẽ chuyển tiếp những gì hình ảnh đang truyền tải đến ngữ cảnh của phần còn lại của tài liệu; và những gì bạn truyền tải sẽ thay đổi tuỳ thuộc vào ngữ cảnh và nội dung của văn bản xung quanh.

Ví dụ: ảnh của một chú chó sẽ được mô tả theo nhiều cách, tuỳ thuộc vào bối cảnh. Nếu Fluffy là hình đại diện bên cạnh bài đánh giá về thức ăn cho chó Yuckymeat, thì alt="Fluffy" là đủ.

Nếu ảnh là một phần của trang nhận nuôi của Fluffy trên một trang web của trung tâm nhận nuôi động vật, thì đối tượng mục tiêu là cha mẹ của chú chó tương lai. Văn bản phải mô tả thông tin được truyền tải trong hình ảnh có liên quan đến người sử dụng và thông tin đó không bị trùng lặp với văn bản xung quanh. Mô tả dài hơn, chẳng hạn như alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth" là phù hợp. Văn bản của trang nhận nuôi thường bao gồm các loài, giống, tuổi và giới tính của thú cưng được nhận nuôi, vì vậy, bạn không cần lặp lại điều này trong văn bản thay thế. Tuy nhiên, tiểu sử viết về chú chó có thể không bao gồm độ dài tóc, màu sắc hay sở thích đồ chơi. Xin lưu ý rằng chúng tôi không mô tả hình ảnh này: người tương lai của chú chó không cần biết chú chó ở trong nhà hay ngoài trời, hay chú chó có cổ áo màu đỏ và dây xích màu xanh dương.

Khi dùng hình ảnh cho biểu tượng, vì thuộc tính alt cung cấp tên thành phần hỗ trợ tiếp cận, hãy truyền tải ý nghĩa của biểu tượng chứ không phải nội dung mô tả hình ảnh. Ví dụ: thuộc tính alt của biểu tượng kính lúp là search. Biểu tượng trông giống như một ngôi nhà có văn bản thay thế là home. Mô tả của biểu tượng đĩa mềm 5 inch là save. Nếu có hai biểu tượng Fluffy dùng để biểu thị các phương pháp hay nhất và mẫu chống lặp lại, thì chú chó tươi cười đội mũ nồi màu xanh lục có thể đặt alt="good", trong khi chú chó gầm rú đội mũ nồi màu đỏ có thể đọc alt="bad". Tuy nhiên, chỉ sử dụng biểu tượng chuẩn. Nếu bạn sử dụng các biểu tượng không theo chuẩn như Fluffy tốt và xấu, hãy thêm chú giải và đảm bảo rằng các biểu tượng không phải là cách duy nhất để giải nghĩa ý nghĩa của các thành phần trên giao diện người dùng,

Nếu hình ảnh là ảnh chụp màn hình hoặc đồ thị, hãy viết những gì học được từ hình ảnh thay vì mô tả hình thức. Tuy một hình ảnh có thể đáng giá hàng nghìn từ ngữ nhưng nội dung mô tả phải truyền tải ngắn gọn mọi kiến thức học được.

Bỏ qua thông tin mà người dùng đã biết trong ngữ cảnh và được thông báo khác trong nội dung. Ví dụ: nếu bạn đang ở trang hướng dẫn về cách thay đổi các chế độ cài đặt của trình duyệt và trang đó nói về cách nhấp vào các biểu tượng trong trình duyệt Chrome, thì URL của trang trong ảnh chụp màn hình sẽ không quan trọng. Giới hạn alt trong chủ đề có liên quan: cách thay đổi chế độ cài đặt. alt có thể là "Biểu tượng cài đặt nằm trên thanh điều hướng bên dưới trường tìm kiếm". Đừng thêm "ảnh chụp màn hình" hoặc "máy học máy" vì người dùng không cần biết đó là ảnh chụp màn hình và không cần biết người viết kỹ thuật đang lướt web ở đâu khi viết hướng dẫn. Mô tả hình ảnh dựa trên bối cảnh tại sao hình ảnh được đưa vào vị trí đầu tiên.

Nếu ảnh chụp màn hình cho thấy cách tìm số phiên bản của trình duyệt bằng cách truy cập vào chrome://version/, hãy đưa URL vào nội dung của trang ở dạng hướng dẫn và cung cấp một chuỗi trống làm thuộc tính alt vì hình ảnh không cung cấp thông tin không có trong văn bản xung quanh.

Nếu hình ảnh không cung cấp thêm thông tin nào hoặc chỉ đơn thuần mang tính chất trang trí, thì thuộc tính vẫn phải ở đó dưới dạng một chuỗi trống.

<img src="svg/magazine.svg" alt="" role="none" />

Máy học hội thảo.com có 7 hình ảnh nền trước, do đó 7 hình ảnh có các thuộc tính alt: một công tắc đèn trứng phục sinh, một biểu tượng thủ công, 2 ảnh tiểu sử của Hal và Eve, 3 hình đại diện máy xay sinh tố, máy hút bụi và máy nướng bánh mì. Hình ảnh nền trước trông giống như một tạp chí là hình ảnh duy nhất mang tính chất trang trí. Trang cũng có hai hình nền. Các hình nền này cũng dùng để trang trí và được thêm vào CSS nên không thể truy cập được.

Tạp chí (chỉ mang tính chất trang trí) có thuộc tính alt trống và role của none vì hình ảnh chỉ là một tệp SVG (Đồ hoạ vectơ có thể trình bày). Nếu có ý nghĩa, hình ảnh SVG phải bao gồm role="img".

<img src="svg/magazine.svg" alt="" role="none" />

Có ba bài đánh giá ở cuối trang, mỗi bài đánh giá có hình ảnh của áp phích. Thông thường, văn bản alt là tên của người trong ảnh.

<img src="images/blender.svg" alt="Blendan Smooth" role="img" />

Thay vào đó, vì đây là một trang truyện cười, nên bạn nên truyền tải những nội dung có thể không rõ ràng cho người dùng có thị lực kém để họ không bỏ lỡ yếu tố hài hước. Chúng tôi sử dụng chức năng máy nguyên bản làm alt thay vì sử dụng tên của nhân vật:

<img src="images/blender.svg" alt="blender" role="img" />

Ảnh của người hướng dẫn không chỉ là hình đại diện: đó là hình ảnh tiểu sử và vì vậy sẽ có nội dung mô tả chi tiết hơn.

Nếu đây là trang web thực tế, thì bạn sẽ cung cấp nội dung mô tả tối thiểu về diện mạo của giáo viên đó để học sinh tương lai có thể nhận ra khi vào lớp học.

<img src="svg/hal.svg" role="img"
  alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />

Vì đây là trang web gây cười nên hãy cung cấp thông tin có liên quan đến bối cảnh nói đùa:

<img src="svg/hal.svg" role="img"
  alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />

Nếu bạn đang đọc trang đó cho bạn bè qua điện thoại, họ sẽ không quan tâm đến chấm đỏ trông như thế nào. Trong trường hợp này, nhật ký tham chiếu phim rất quan trọng.

Khi viết văn bản mô tả, hãy cân nhắc xem hình ảnh truyền tải thông tin quan trọng và phù hợp với người dùng và đưa vào đó thông tin nào. Hãy nhớ rằng nội dung của thuộc tính alt cho một hình ảnh sẽ khác nhau tuỳ theo ngữ cảnh. Tất cả thông tin được truyền tải trong một hình ảnh mà người dùng sáng mắt có thể truy cập và phù hợp với bối cảnh mới là điều cần được truyền tải. Hãy tạo tên ngắn gọn, chính xác và hữu ích.

Các thuộc tính src và alt là các yêu cầu tối thiểu đối với hình ảnh nhúng. Có một vài thuộc tính khác mà chúng ta cần thảo luận.

Hình ảnh thích ứng

Có vô số kích thước khung nhìn. Ngoài ra còn có nhiều độ phân giải màn hình khác nhau. Bạn không muốn lãng phí băng thông của người dùng thiết bị di động bằng cách phân phát cho họ một hình ảnh đủ rộng cho màn hình màn hình lớn. Tuy nhiên, bạn có thể muốn phân phát hình ảnh có độ phân giải cao hơn cho các thiết bị nhỏ có độ phân giải màn hình thông thường. Có một số cách để phân phát nhiều hình ảnh dựa trên kích thước khung nhìn và độ phân giải màn hình.

<img> srcset thuộc tính

Thuộc tính srcset cho phép đề xuất nhiều tệp hình ảnh, trong đó trình duyệt chọn hình ảnh cần yêu cầu dựa trên nhiều truy vấn nội dung nghe nhìn, bao gồm cả kích thước khung nhìn và độ phân giải màn hình.

Mỗi phần tử <img> có thể có một thuộc tính srcset, nhưng srcset đó có thể liên kết đến nhiều hình ảnh. Thuộc tính srcset chấp nhận một danh sách các giá trị được phân tách bằng dấu phẩy, mỗi giá trị chứa URL của thành phần, theo sau là dấu cách, theo sau là phần mô tả cho lựa chọn hình ảnh đó. Nếu sử dụng chỉ số mô tả chiều rộng, bạn cũng phải thêm thuộc tính sizes với truy vấn nội dung nghe nhìn hoặc kích thước nguồn cho mỗi lựa chọn srcset ngoài lựa chọn cuối cùng. Bạn nên đọc các phần Tìm hiểu về hình ảnh thích ứng có srcset và cú pháp mô tả.

Hình ảnh srcset sẽ được ưu tiên hơn hình ảnh src nếu có kết quả trùng khớp.

<picture> và <source>

Một phương pháp khác để cung cấp nhiều tài nguyên và cho phép trình duyệt hiển thị thành phần phù hợp nhất là sử dụng phần tử <picture>. Phần tử <picture> là một phần tử vùng chứa cho nhiều tuỳ chọn hình ảnh, được liệt kê trong số lượng phần tử <source> không giới hạn và một phần tử <img> bắt buộc.

Các thuộc tính <source> bao gồm srcset, sizes, media, width và height. Thuộc tính srcset phổ biến đối với img, source và link, nhưng thường được triển khai hơi khác trên nguồn vì các truy vấn nội dung đa phương tiện có thể được liệt kê trong thuộc tính đa phương tiện của <srcset>. <source> cũng hỗ trợ các định dạng hình ảnh được xác định trong thuộc tính type.

Trình duyệt sẽ xem xét từng phần tử con <source> và chọn ra phần tử phù hợp nhất trong số đó. Nếu không tìm thấy kết quả trùng khớp, hệ thống sẽ chọn URL thuộc tính src của phần tử <img>. Tên thành phần hỗ trợ tiếp cận được lấy từ thuộc tính alt của <img> được lồng. Bạn cũng nên đọc các phần Tìm hiểu bao gồm phần tử <picture> và cú pháp quy tắc.

Các tính năng bổ sung về hiệu suất

Tải từng phần

Thuộc tính loading cho trình duyệt hỗ trợ JS biết cách tải hình ảnh. Giá trị eager mặc định có nghĩa là hình ảnh sẽ được tải ngay khi HTML được phân tích cú pháp, ngay cả khi hình ảnh nằm ngoài khung nhìn hiển thị. Khi bạn đặt loading="lazy", quá trình tải hình ảnh sẽ được trì hoãn cho đến khi hình ảnh có thể vào khung nhìn. "Có thể" được trình duyệt xác định dựa trên khoảng cách từ hình ảnh đến khung nhìn. Mã này sẽ được cập nhật khi người dùng cuộn. Tính năng Tải từng phần giúp tiết kiệm băng thông và CPU, cải thiện hiệu suất cho hầu hết người dùng. Vì lý do bảo mật, nếu JavaScript bị tắt, tất cả hình ảnh sẽ được mặc định là eager.

<img src="switch.svg" alt="light switch" loading="lazy" />

Tỷ lệ khung hình

Trình duyệt bắt đầu hiển thị HTML khi được nhận và yêu cầu tài sản khi gặp phải. Điều này có nghĩa là trình duyệt đã hiển thị HTML khi gặp thẻ <img> và đưa ra yêu cầu. Và hình ảnh có thể mất một chút thời gian để tải. Theo mặc định, các trình duyệt không đặt trước không gian cho hình ảnh ngoài kích thước cần thiết để hiển thị văn bản alt.

Phần tử <img> luôn hỗ trợ các thuộc tính height và width không có đơn vị. Các thuộc tính này không còn được sử dụng để thay thế bằng CSS. CSS có thể xác định kích thước hình ảnh, thường đặt một kích thước duy nhất như max-width: 100%; để đảm bảo tỷ lệ khung hình được giữ nguyên. Vì thường có trong <head>, nên CSS này sẽ được phân tích cú pháp trước khi gặp bất kỳ <img> nào. Tuy nhiên, nếu không liệt kê rõ ràng height hoặc tỷ lệ khung hình, thì không gian dành riêng sẽ là chiều cao (hoặc chiều rộng) của văn bản alt. Vì hầu hết các nhà phát triển chỉ khai báo chiều rộng, nên việc nhận và hiển thị hình ảnh sẽ dẫn đến sự thay đổi tích luỹ về bố cục, gây hại cho các chỉ số quan trọng của trang web. Để giải quyết vấn đề này, các trình duyệt hỗ trợ tỷ lệ khung hình của hình ảnh. Việc đưa các thuộc tính height và width vào <img> đóng vai trò như gợi ý điều chỉnh kích thước, thông báo cho trình duyệt về tỷ lệ khung hình, cho phép khoảng không gian phù hợp được dành riêng cho việc kết xuất hình ảnh sau cùng. Bằng cách đưa giá trị chiều cao và chiều rộng vào một hình ảnh, trình duyệt sẽ biết tỷ lệ khung hình của hình ảnh đó. Khi trình duyệt gặp một kích thước duy nhất, chẳng hạn như ví dụ 50% của chúng tôi, trình duyệt sẽ giúp tiết kiệm không gian cho hình ảnh tuân thủ kích thước CSS và với kích thước còn lại duy trì tỷ lệ khung hình của chiều rộng so với chiều cao.

<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />

Hình ảnh của bạn sẽ vẫn có khả năng thích ứng nếu CSS được thiết lập đúng cách để có thể thích ứng. Có, các giá trị height và width không có đơn vị đi kèm sẽ được ghi đè bằng CSS. Mục đích của việc thêm các thuộc tính này là để đặt trước không gian ở tỷ lệ khung hình phù hợp, cải thiện hiệu suất bằng cách giảm sự thay đổi bố cục. Trang sẽ vẫn mất khoảng thời gian tải tương đương, nhưng giao diện người dùng sẽ không nhảy khi hình ảnh được vẽ lên màn hình.

Các đặc điểm khác của hình ảnh

Phần tử <img> cũng hỗ trợ các thuộc tính crossorigin, decoding, referrerpolicy và fetchpriority trong các trình duyệt dựa trên Đường liên kết. Hiếm khi được sử dụng, nếu hình ảnh nằm trong bản đồ phía máy chủ, hãy bao gồm thuộc tính boolean ismap và lồng <img> trong một đường liên kết cho người dùng mà không cần trỏ thiết bị.

Thuộc tính ismap không cần thiết hoặc thậm chí không được hỗ trợ trên <input type="image" name="imageSubmitName"> vì toạ độ x và y của vị trí lượt nhấp được gửi trong quá trình gửi biểu mẫu, sẽ thêm các giá trị vào tên dữ liệu đầu vào (nếu có). Ví dụ: nội dung như &imageSubmitName.x=169&imageSubmitName.y=66 sẽ được gửi cùng với biểu mẫu khi người dùng nhấp vào hình ảnh rồi gửi hình ảnh đó. Nếu hình ảnh không có thuộc tính name thì x và y sẽ được gửi: &x=169&y=66.

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về hình ảnh.