Images

Hình ảnh trang trí, chẳng hạn như hiệu ứng chuyển màu nền trên các nút hoặc hình ả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à phải được áp dụng bằng CSS. Khi một hình ảnh thêm bối cảnh vào tài liệu, đó là nội dung và phải được nhúng bằng HTML.

Phương thức chính để đưa hình ảnh vào là thẻ <img> có 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 cung cấp một cách để thêm nhiều nguồn hình ảnh cùng các truy vấn nội dung nghe nhì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át tệp hình ảnh phù hợp nhất dựa trên độ phân giải của thiết bị, khả năng của trình duyệt và kích thước khung hiển thị. 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 hiển thị 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 các 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 thức hình ảnh thích ứng HTML tích hợp sẵn này, HTML cũng cho phép cải thiện hiệu suất kết xuất hình ảnh thông qua nhiều thuộc tính. Thẻ <img> và do đó, các 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 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 đưa hình ảnh SVG vào bằng cách sử dụng trực tiếp <svg>, mặc dù hình ảnh SVG có đuôi .svg (hoặc dưới dạng data-uri) có thể được nhúng bằng phần tử <img>.

Mỗi hình ảnh nền trước phải có ít nhất 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 được dùng để cung cấp URL cho hình ảnh. Sau đó, trình duyệt tìm nạp tài sản và kết xuất tài sản đó vào trang. <img> yêu cầu thuộc tính này. Nếu không có thành phần này, sẽ không có gì để hiển thị.

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 xem được màn hình (hãy nghĩ đến 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), đồng thời 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 bị giới hạn, văn bản alt cũng vô cùng 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 thêm role="img". Điều này là cần thiết do VoiceOver có lỗi.

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

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

Thuộc tính alt 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 trong khi bỏ qua thông tin dư thừa đối với nội dung khác trong tài liệu hoặc thông tin không hữu ích. Khi viết văn bản, giọng điệu phải phản ánh giọ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 nhìn thấy trang đó. Bằng cách sử dụng phần tử ngữ nghĩa <img>, người dùng trình đọc màn hình và các bot sẽ được thông báo rằng phần tử này là một hình ảnh. Không cần thiết phải thêm "Đây là hình ảnh/ảnh chụp màn hình/ảnh về" vào alt. Người dùng không cần biết có hình ảnh, nhưng họ 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 bị nhiễu của một chú chó đang đội mũ đỏ". Thay vào đó, bạn sẽ truyền đạt những gì hình ảnh truyền tải liên quan đến bối cảnh của phần còn lại trong tài liệu. 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 một chú chó được mô tả theo nhiều cách, tuỳ thuộc vào ngữ cảnh. Nếu Fluffy là một 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 bức ảnh là một phần của trang nhận nuôi Fluffy trên trang web của một trại cứu hộ động vật, thì đối tượng mục tiêu là người có ý định nhận nuôi chú chó này. Văn bản này phải mô tả thông tin được truyền tải trong hình ảnh có liên quan đến người dùng và không bị trùng lặp trong văn bản xung quanh. Bạn nên 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ó thể nhận nuôi, vì vậy bạn không cần lặp lại thông tin này trong văn bản thay thế. Nhưng tiểu sử bằng văn bản của chú chó có lẽ không bao gồm độ dài, màu sắc của lông hoặc sở thích về đồ chơi.

Điều quan trọng là chúng tôi không mô tả đầy đủ hình ảnh. Người có ý định nuôi chú chó không cần biết chú chó ở trong nhà hay ngoài trời, hoặc chú chó có vòng cổ màu đỏ và dây xích màu xanh dương.

Khi sử dụng hình ảnh cho biểu tượng, vì thuộc tính alt cung cấp tên có thể truy cập, 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ó home làm văn bản thay thế. Nội dung mô tả về biểu tượng đĩa mềm 5 inch là save. Nếu có 2 biểu tượng Fluffy được dùng để biểu thị các phương pháp hay nhất và các mẫu chống đối, thì chú cún mỉm cười đội mũ nồi màu xanh lục có thể được đặt là alt="good", trong khi chú cún gầm gừ đội mũ nồi màu đỏ có thể được đặt là alt="bad". Tuy nhiên, bạn chỉ nên sử dụng hệ thống biểu tượng tiêu chuẩn. Nếu bạn sử dụng các biểu tượng không tiêu chuẩn (chẳng hạn như biểu tượng Fluffy tốt và Fluffy xấu), hãy thêm chú thích để đảm bảo rằng biểu tượng không phải là cách duy nhất để giải mã ý nghĩa của các phần tử 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ì bạn học được từ hình ảnh đó thay vì mô tả hình thức. Mặc dù một hình ảnh chắc chắn có thể đáng giá cả ngàn lời nói, nhưng nội dung mô tả phải truyền tải một cách ngắn gọn mọi thông tin đã 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 trong nội dung. Ví dụ: nếu bạn đang ở trên một trang hướng dẫn về cách thay đổi chế độ cài đặt trình duyệt và trang đó nói về việc 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 cho chủ đề đang thảo luận: cách thay đổi chế độ cài đặt.

Câu 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 "machinelearningworkshop" 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 nhà văn kỹ thuật đang lướt web ở đâu khi viết hướng dẫn. Nội dung mô tả hình ảnh dựa trên bối cảnh lý do hình ảnh được đưa vào.

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

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

MachineLearningWorkshop.com có 7 hình ảnh nền trước, do đó có 7 hình ảnh có thuộc tính alt: một công tắc đèn quả trứng Phục Sinh, một biểu tượng hướng dẫn sử dụng, 2 bức ảnh tiểu sử của Hal và Eve, cùng 3 hình đại diện của một máy xay sinh tố, một máy hút bụi và một lò 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 chỉ mang tính chất trang trí. Trang này cũng có 2 hình nền. Những hình ảnh này mang tính trang trí và được thêm bằng CSS, do đó, người dùng không thể truy cập vào các hình ảnh này.

Tạp chí này chỉ mang tính chất trang trí nên có thuộc tính alt trống và role là none vì hình ảnh này chỉ là một SVG trình bày. Nếu có ý nghĩa, hình ảnh SVG phải có role="img".

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

Có 3 bài đánh giá ở cuối trang, mỗi bài đều 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 hài hước, bạn nên truyền tải những nội dung có thể không rõ ràng đối với người dùng khiếm thị để họ không bỏ lỡ sự hài hước. Chúng ta sử dụng chức năng ban đầu của máy 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 mà còn là ảnh tiểu sử, do đó, ảnh sẽ có nội dung mô tả chi tiết hơn.

Nếu đây là một trang web thực, bạn sẽ cung cấp nội dung mô tả tối thiểu về ngoại hình của giáo viên để học viên tiềm năng có thể nhận ra họ 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à một trang web hài hước, hãy cung cấp thông tin phù hợp trong bối cảnh hài hước:

<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 này cho một người bạn qua điện thoại, họ sẽ không quan tâm đến hình dạng của dấu chấm màu đỏ. Trong trường hợp này, nhật ký tham chiếu phim có vai trò quan trọng.

Khi viết văn bản mô tả, hãy cân nhắc những thông tin quan trọng và phù hợp mà hình ảnh truyền tải cho người dùng, rồi đưa thông tin đó vào. Xin lưu ý rằng nội dung của thuộc tính alt cho một hình ảnh sẽ khác nhau tuỳ theo bối cảnh. Bạn chỉ cần truyền tải tất cả thông tin trong 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; không cần truyền tải thêm thông tin nào khác. Hãy viết ngắn gọn, chính xác và hữu ích.

Thuộc tính src và alt là các 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 thêm về 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 và độ phân giải màn hình. 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 lớn, nhưng 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 gấp 4 lần độ phân giải màn hình thông thường. Có một số cách để phân phát các hình ảnh khác nhau 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 sẽ 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 cả 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 cho mỗi phần tử <img>, 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, sau đó là các giá trị mô tả cho lựa chọn hình ảnh đó. Nếu sử dụng một bộ mô tả chiều rộng, bạn cũng phải thêm thuộc tính sizes có truy vấn nội dung nghe nhìn hoặc kích thước nguồn cho từng lựa chọn srcset, ngoại trừ 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ó hình ảnh trùng khớp.

<picture> và <source>

Một phương thức khác để cung cấp nhiều tài nguyên và cho phép trình duyệt hiển thị tài sả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 lựa chọn về 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 duy nhất.

Các thuộc tính <source> bao gồm srcset, sizes, media, width và height. Thuộc tính srcset thường gặp ở img, source và link, nhưng thường được triển khai hơi khác một chút trên nguồn vì các truy vấn về phương tiện có thể được liệt kê trong thuộc tính 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ử <source> con và chọn kết quả phù hợp nhất trong số đó. Nếu không tìm thấy thông tin nào khớp, URL của thuộc tính src trong phần tử <img> sẽ được chọn. Tên có thể truy cập được lấy từ thuộc tính alt của <img> lồng nhau. Bạn cũng nên đọc các phần Tìm hiểu về phần tử <picture> và cú pháp mang tính quy tắc.

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

Có một số tính năng bổ sung về hình ảnh có thể cải thiện hiệu suất của trang web.

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 được tải ngay khi HTML được phân tích cú pháp, ngay cả khi hình ảnh nằm ngoài chế độ xem hiển thị. Bằng cách đặt loading="lazy", quá trình tải hình ảnh sẽ bị hoãn lại cho đến khi hình ảnh có khả năng xuất hiện trong khung nhìn. "Có khả năng" được trình duyệt xác định dựa trên khoảng cách từ hình ảnh đến khung hiển thị. Giá trị 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, đồng thời cải thiện hiệu suất cho 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ẽ 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 nhận được, đưa ra yêu cầu về các thành phầ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à thực hiện yêu cầu. Và hình ảnh có thể mất một lúc để tải. Theo mặc định, các trình duyệt không dành riêng 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ị. Những thuộc tính này không còn được dùng nữa và thay vào đó là 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ì CSS thường có trong <head>, nên CSS 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ì khoảng trống được dành riêng là chiều cao (hoặc chiều rộng) của văn bản alt.

Khi nhà phát triển chỉ khai báo chiều rộng, biên nhận và việc hiển thị hình ảnh sẽ dẫn đến hiện tượng sự thay đổi bố cục tích luỹ, gây ảnh hưởng đến 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 thêm các thuộc tính height và width vào <img> sẽ đóng vai trò là 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 dành sẵn một lượng không gian phù hợp để hiển thị hình ảnh sau cùng. Khi 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 duy trì tỷ lệ khung hình chiều rộng trên chiều cao.

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

Hình ảnh của bạn sẽ thích ứng nếu bạn thiết lập CSS đúng cách để hình ảnh thích ứng. Có, các giá trị height và width không có đơn vị được đưa vào sẽ bị CSS ghi đè. 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 vẫn mất khoảng thời gian tương đương để tải, nhưng giao diện người dùng sẽ không bị giật khi hình ảnh được vẽ lên màn hình.

Các tính năng khác về 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 Blink. Hiếm khi được dùng, nếu hình ảnh là một phần của bản đồ phía máy chủ, hãy thêm thuộc tính boolean ismap và lồng <img> trong một đường liên kết cho người dùng không có thiết bị trỏ.

Thuộc tính ismap là 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í 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 đầu vào (nếu có). Ví dụ: một 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 nội dung đó. 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 mức độ hiểu biết của bạn

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