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.
Hình ảnh nền trước phải luôn có 2 thuộc tính nào?
alt
size
src