Images

Hình ảnh trang trí, chẳng hạn như màu chuyển tiếp 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, mang tính trình bày và cần được áp dụng cùng với CSS. Khi một hình ảnh bổ sung bối cảnh cho tài liệu, thì hình ảnh đó chính là nội dung và nên được được nhúng bằng HTML.

Phương thức chính để thêm hình ảnh là thẻ <img> có 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 cung cấp cách thêm nhiều nguồn hình ảnh có các truy vấn phương tiện được liên kết, mỗi truy vấn có một nguồn hình ảnh dự phòng, cho phép phân phối tệp hình ảnh thích hợp nhất dựa trên độ phân giải, khả 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à kích thước khung nhìn của trình duyệt cùng thuộc tính sizes.

<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 với phần tử <picture> cùng với phần tử con <source>. Phần tử 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 pháp hình ảnh đáp ứng HTML tích hợp sẵn này, HTML cũng cho phép hiển thị hình ảnh hiệu suất kết xuất được cải thiện thông qua nhiều thuộc tính. Thẻ <img> và do đó, các nút gửi dạng đồ hoạ <input type="image">, có thể bao gồm 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 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 bao gồm hình ảnh SVG bằng cách sử dụng trực tiếp <svg>, mặc dù SVG Bạn có thể nhúng hình ảnh có phần mở rộng .svg (hoặc dưới dạng data-uri) bằng phần tử <img>.

Tối thiểu, mỗi hình ảnh nền trước phải bao gồm 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à kết xuất thành phần đó lên trang. Thuộc tính này là bắt buộc theo <img>; nếu không có thì sẽ chẳng có gì để 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ả hình ảnh cho những người không xem được màn hình (chẳng hạn như các công cụ tìm kiếm và công nghệ hỗ trợ, cũng như 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 những người dùng có mạng chậm hoặc băng thông giới hạn, văn bản alt cực kỳ hữu ích trong HTML email, 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, bạn cũng nên bao gồm role="img". do lỗi VoiceOver do lỗi.

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

Đang viết nội dung mô tả hình ảnh alt hiệu quả

Thuộc tính thay thế cần phải 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 dù 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 nên 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. Bằng cách sử dụng phần tử <img> ngữ nghĩa, người dùng và bot của trình đọc màn hình sẽ được thông báo phần tử đó là một hình ảnh. Không cần phải thêm dòng chữ "Đây là hình ảnh/ảnh chụp màn hình/ảnh chụp" trong alt. Người dùng không cần biết có hình ảnh, nhưng họ lại cần biết thông tin mà hình ảnh truyền tải.

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 thông tin về hình ảnh truyền đạt theo ngữ cảnh của phần còn lại của tài liệu; và nội dung bạn truyền tải sẽ thay đổi tuỳ theo bối cảnh và nội dung của văn bản xung quanh.

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

Nếu bức ảnh là một phần trang nhận nuôi của Fluffy trên một trang web của một trung tâm cứu trợ động vật, thì đối tượng mục tiêu là chú chó tương lai cha mẹ. Văn bản phải mô tả thông tin được truyền tải trong ảnh phù hợp với người sử dụng và không bị trùng lặp trong văn bản xung quanh. Bạn nên sử dụng nội dung 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". Văn bản của trang nhận nuôi thường bao gồm loài, giống, tuổi và giới tính của thú cưng được nhận nuôi, nên bạn không cần lặp lại điều này trong văn bản thay thế. Nhưng tiểu sử được viết của chú chó có thể không bao gồm chiều dài tóc, màu sắc hoặc sở thích về đồ chơi. Xin lưu ý rằng chúng tôi không mô tả hình ảnh này: người nuôi chó tương lai không cần biết liệu chú chó có phải trong nhà hoặc ngoài trời hoặc có vòng cổ màu đỏ và dây xích màu xanh dương.

Khi sử dụng hình ảnh cho hình tượng học, 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, không phải 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 chẳng hạn như một ngôi nhà có home làm văn bản thay thế. Nội dung mô tả của biểu tượng đĩa mềm 5 inch là save. Nếu có hai biểu tượng Fluffy được sử dụng để biểu thị các phương pháp hay nhất và các hoạ tiết phản cảm, chú chó đội mũ nồi màu xanh lục có thể mỉm cười, còn chú chó gầm gừ đang mặc alt="good" trên chiếc mũ nồi màu đỏ có thể đọc là alt="bad". Điều đó có nghĩa là chỉ sử dụng biểu tượng chuẩn và nếu bạn sử dụng các biểu tượng không chuẩn, chẳng hạn như Fluffy tốt và không tốt, hãy thêm chú thích và đảm bảo rằng các biểu tượng không phải là cách duy nhất để giải mã ý 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 biểu đồ, hãy viết những gì học được từ hình ảnh thay vì mô tả hình dáng. Mặc dù một hình ảnh chắc chắn đáng giá cả nghìn từ nhưng phần mô tả phải truyền tải súc tích mọi kiến thức học được.

Bỏ qua thông tin mà người dùng đã biết từ bối cảnh và được cung cấp thông tin khác trong nội dung. Ví dụ: nếu bạn đang xem trang hướng dẫn về cách thay đổi chế độ cài đặt trình duyệt và trang này hướng dẫn 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 không quan trọng. Giới hạn alt ở chủ đề có sẵn: cách thay đổi chế độ cài đặt. alt có thể là "Biểu tượng cài đặt nằm trong 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 kỹ thuật viên đang lướt web ở đâu khi họ viết các hướng dẫn. Nội dung mô tả hình ảnh dựa trên ngữ cảnh của lý do hình ảnh đó được đưa vào địa điểm đầu tiên.

Nếu ảnh chụp màn hình hiển thị cách tìm số phiên bản trình duyệt bằng cách truy cập vào chrome://version/, hãy thêm URL vào nội dung của trang làm 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 hoặc chỉ mang tính chất trang trí, thì thuộc tính vẫn nên ở đó, chỉ dưới dạng một chuỗi trống.

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

Machine LearningShop.com có 7 hình ảnh nền trước, do đó, 7 hình ảnh có thuộc tính alt: công tắc đèn trứng phục sinh, một biểu tượng thủ công, hai ảnh tiểu sử của Hal và Eve cùng ba hình đại diện của một máy xay, một máy hút bụi và một máy nướng bánh mì. Chiến lược phát hành đĩa đơn hình ảnh nền trước trông giống như một tạp chí là hình ảnh duy nhất chỉ mang tính chất trang trí. Trang này cũng có hai hình nền; những hình ảnh này cũng mang tính chất trang trí và không thể truy cập được khi được thêm bằng CSS.

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ỉ mang tính chất trang trí SVG trình chiếu. 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ó một 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" />

Do đây là trang đùa nên bạn nên truyền tải những gì có thể không rõ ràng đối với người dùng có thị lực kém để họ không bỏ lỡ hài hước; chúng tôi sẽ sử dụng hàm máy gốc làm alt thay vì sử dụng tên của ký tự:

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

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

Nếu đây là một trang web có thật, bạn sẽ chỉ cung cấp nội dung mô tả tối thiểu về diện mạo của giáo viên để một học sinh tương lai có thể nhận ra các em khi bước 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 chuyện cười, hãy cung cấp thông tin có liên quan trong ngữ cảnh trò đù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 chấm màu đỏ trông như thế nào. Trong trường hợp này, lịch sử tham chiếu phim cũng 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 nào là quan trọng và phù hợp với người dùng và bao gồm yếu tố đó. Hãy nhớ rằng nội dung của thuộc tính alt cho một hình ảnh khác nhau tuỳ theo bối cảnh. Mọi thông tin được truyền tải trong một hình ảnh mà người dùng nhìn thấy có thể truy cập và phù hợp với bối cảnh là điều cần được truyền tải; không gì khác. Đảm bảo sự ngắn gọn, chính xác và hữu ích.

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

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. Bạn không muốn lãng phí thời gian bằng cách phân phối hình ảnh đủ rộng cho màn hình màn hình lớn, nhưng bạn có thể muốn phân phối độ phân giải cao hơn hình ảnh cho các thiết bị nhỏ có độ phân giải màn hình gấp bốn lần bình 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 phương tiện, bao gồm kích thước khung nhìn và độ phân giải màn hình.

Có thể có một thuộc tính srcset duy nhất cho mỗi phần tử <img>, nhưng srcset đó có thể liên kết đến nhiều hình ảnh. srcset chấp nhận 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 nội dung, theo sau là một dấu cách 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 cùng với nội dung nghe nhìn truy vấn hoặc kích thước nguồn cho mỗi tuỳ chọn srcset khác với tuỳ 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 vùng chứa phần tử cho nhiều tuỳ chọn hình ảnh được liệt kê với số lượng không giới hạn <source> 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 chung cho img, source và link, nhưng thường được triển khai hơi khác trên nguồn vì truy vấn đ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 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, URL thuộc tính src của phần tử <img> được chọn. 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 những phần Tìm hiểu về phần tử <picture> và cú pháp quy định.

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

Tải từng phần

Thuộc tính loading cho trình duyệt đã bật JS biết cách tải hình ảnh. Giá trị eager mặc định có nghĩa là hình ảnh này đượ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ị. Bằng cách đặt loading="lazy" thì việc tải hình ảnh sẽ bị trì hoãn cho đến khi hình ảnh có khả năng xuất hiện trong khung nhìn. "Có thể" được xác định bởi trình duyệt dựa trên khoảng cách hình ảnh được lấy từ khung nhìn. Nội dung này đượ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, từ đó cải thiện hiệu suất của hầu hết người dùng. Nếu JavaScript bị tắt, vì lý do bảo mật, tất cả hình ảnh sẽ được đặt mặc định thành 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 nhận được và yêu cầu nội dung khi gặp HTML. Điều này có nghĩa là trình duyệt đã kết xuất HTML khi gặp thẻ <img> và đưa ra yêu cầu. Ngoài ra, việc tải hình ảnh có thể mất chút thời gian. Theo mặc định, các trình duyệt không dành riêng dung lượng 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 đơn vị. Các tài sản này không được sử dụng nữa của CSS. CSS có thể xác định kích thước hình ảnh và 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ì CSS thường có trong <head>, nên CSS đượ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, không gian dành riêng là chiều cao (hoặc chiều rộng) của văn bản alt. Hầu hết các nhà phát triển chỉ khai báo chiều rộng, việc nhận và hiển thị hình ảnh dẫn đến sự thay đổi bố cục tích lũy, 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 ý về kích thước, thông báo cho trình duyệt về tỷ lệ khung hình, cho phép lượng không gian được dành riêng để hiển thị hình ảnh sau cùng. Bằng cách bao gồm giá trị chiều cao và chiều rộng vào hình ảnh, trình duyệt 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ẽ 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 thì duy trì tỷ lệ khung hình giữa chiều rộng và 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 thích ứng nếu CSS được thiết lập đúng cách để chúng thích ứng. Có, tệp không có đơn vị đi kèm CSS sẽ ghi đè các giá trị height và width. Mục đích của việc thêm các thuộc tính này là để đặt chỗ tại 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 chiếm số tiền gần như tương tự 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 tính năng khác của hình ảnh

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

Thuộc tính ismap là không cần thiết, thậm chí không được hỗ trợ, trên <input type="image" name="imageSubmitName"> dưới dạng x và y toạ độ của vị trí nhấp được gửi trong quá trình gửi biểu mẫu, nối các giá trị vào tên mục nhập (nếu có). Ví dụ: nội dung nào đó 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, gửi bản dịch đó. 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.