Văn bản trên web sẽ tự động bao bọc theo cạnh màn hình để không bị tràn. Mặt khác, hình ảnh có kích thước riêng biệt. Nếu hình ảnh rộng hơn màn hình, hình ảnh sẽ bị tràn và người dùng phải cuộn theo chiều ngang để xem toàn bộ.
May mắn là CSS cung cấp cho bạn các công cụ để ngăn điều này xảy ra.
Cố định hình ảnh của bạn
Trong biểu định kiểu, bạn có thể sử dụng max-inline-size để khai báo rằng hình ảnh không thể hiển thị ở kích thước rộng hơn phần tử chứa hình ảnh.
img {
max-inline-size: 100%;
block-size: auto;
}
Bạn cũng có thể áp dụng cùng một quy tắc cho các loại nội dung nhúng khác, như video và iframe.
img,
video,
iframe {
max-inline-size: 100%;
block-size: auto;
}
Khi áp dụng quy tắc này, các trình duyệt sẽ tự động giảm kích thước hình ảnh cho vừa với màn hình.
Việc thêm giá trị block-size của auto có nghĩa là trình duyệt sẽ giữ nguyên tỷ lệ khung hình của hình ảnh khi đổi kích thước.
Đôi khi, kích thước của hình ảnh do một hệ thống quản lý nội dung (CMS) hoặc hệ thống phân phối nội dung khác đặt ra. Nếu thiết kế của bạn yêu cầu tỷ lệ khung hình khác với tỷ lệ mặc định của CMS, thì bạn có thể sử dụng thuộc tính aspect-ratio để giữ nguyên thiết kế của trang web:
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
}
Thật không may, điều này thường có nghĩa là trình duyệt phải nén hoặc kéo giãn hình ảnh để hình ảnh vừa với không gian.
Để tránh tình trạng ép và kéo giãn, hãy sử dụng thuộc tính object-fit.
Giá trị object-fit của contain yêu cầu trình duyệt duy trì tỷ lệ khung hình của hình ảnh, để trống không gian xung quanh hình ảnh nếu cần.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: contain;
}
Giá trị object-fit của cover yêu cầu trình duyệt duy trì tỷ lệ khung hình của hình ảnh, cắt hình ảnh nếu cần.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
}
Bạn có thể thay đổi vị trí cắt hình ảnh bằng cách sử dụng thuộc tính object-position. Việc này sẽ điều chỉnh tiêu điểm của vùng cắt để bạn có thể đảm bảo phần quan trọng nhất của hình ảnh vẫn xuất hiện.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
object-position: top center;
}
object-position để chỉ cắt một bên của hình ảnh.Phân phối hình ảnh
Các quy tắc CSS đó cho trình duyệt biết cách bạn muốn hiển thị hình ảnh. Bạn cũng có thể đưa ra gợi ý trong HTML về cách trình duyệt sẽ xử lý những hình ảnh đó.
Gợi ý định cỡ
Nếu bạn biết kích thước của hình ảnh, hãy luôn thêm các thuộc tính width và height. Ngay cả khi hình ảnh được hiển thị ở một kích thước khác do quy tắc max-inline-size của bạn, trình duyệt vẫn biết tỷ lệ giữa chiều rộng và chiều cao và có thể dành khoảng không gian phù hợp. Thao tác này ngăn nội dung khác của bạn nhảy xung quanh khi hình ảnh tải.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
>
Gợi ý để tải
Sử dụng thuộc tính loading để cho trình duyệt biết liệu có trì hoãn việc tải hình ảnh cho đến khi hình ảnh nằm trong hoặc gần khung nhìn hay không. Đối với các hình ảnh dưới màn hình đầu tiên, hãy sử dụng giá trị lazy. Trình duyệt sẽ không tải hình ảnh tải từng phần cho đến khi người dùng cuộn xuống đủ lâu để hình ảnh sắp xuất hiện. Nếu người dùng không bao giờ cuộn, hình ảnh sẽ không bao giờ tải.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
>
Đối với hình ảnh chính trong màn hình đầu tiên, đừng sử dụng loading. Nếu trang web của bạn tự động áp dụng thuộc tính loading="lazy", thì thông thường, bạn có thể đặt loading thành giá trị mặc định là eager để ngăn hình ảnh tải từng phần:
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
>
Mức độ ưu tiên tìm nạp
Đối với các hình ảnh quan trọng (chẳng hạn như hình ảnh LCP), bạn có thể ưu tiên tải hơn bằng cách dùng Mức độ ưu tiên tìm nạp bằng cách đặt thuộc tính fetchpriority thành high:
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
fetchpriority="high"
>
Thao tác này sẽ yêu cầu trình duyệt tìm nạp hình ảnh ngay lập tức và ở mức độ ưu tiên cao, thay vì đợi cho đến khi trình duyệt hoàn tất bố cục và sẽ tìm nạp hình ảnh như bình thường.
Tuy nhiên, khi bạn yêu cầu trình duyệt ưu tiên tải một tài nguyên xuống (chẳng hạn như hình ảnh), thì trình duyệt phải giảm mức độ ưu tiên của một tài nguyên khác, chẳng hạn như tập lệnh hoặc tệp phông chữ. Chỉ đặt fetchpriority="high" trên hình ảnh nếu hình ảnh đó thực sự quan trọng.
Gợi ý tải trước
Tốt nhất là bạn nên tránh tải trước bất cứ khi nào có thể bằng cách đưa tất cả hình ảnh vào tệp HTML ban đầu. Tuy nhiên, một số hình ảnh có thể không có sẵn, chẳng hạn như hình ảnh do JavaScript hoặc hình nền CSS thêm vào.
Bạn có thể sử dụng tính năng tải trước để trình duyệt tìm nạp trước những hình ảnh quan trọng này. Đối với những hình ảnh thực sự quan trọng, bạn có thể kết hợp phương thức tải trước này với thuộc tính fetchpriority:
<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">
Xin nhắc lại, hãy dùng các thuộc tính này một cách hạn chế để tránh việc ghi đè các thông tin phỏng đoán về mức độ ưu tiên của trình duyệt quá thường xuyên. Việc lạm dụng những thuộc tính này có thể gây suy giảm hiệu suất.
Một số trình duyệt hỗ trợ tải trước hình ảnh thích ứng dựa trên srcset, bằng cách sử dụng các thuộc tính imagesrcset và imagesizes.
Ví dụ:
<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">
Bằng cách loại trừ tính năng dự phòng href, bạn có thể đảm bảo các trình duyệt không hỗ trợ srcset vẫn tải trước đúng hình ảnh.
Bạn không thể tải trước hình ảnh ở các định dạng khác nhau dựa trên sự hỗ trợ của trình duyệt cho một số định dạng nhất định. Việc này có thể dẫn đến việc tải thêm dữ liệu xuống, gây lãng phí dữ liệu của người dùng.
Giải mã hình ảnh
Bạn cũng có thể thêm thuộc tính decoding vào các phần tử img. Bạn có thể cho trình duyệt biết rằng hình ảnh có thể được giải mã không đồng bộ, vì vậy, trình duyệt có thể ưu tiên xử lý nội dung khác.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
>
Bạn có thể sử dụng giá trị sync nếu bản thân hình ảnh là phần nội dung quan trọng nhất cần ưu tiên.
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
decoding="sync"
>
Thuộc tính decoding không thay đổi tốc độ giải mã hình ảnh. Trạng thái này chỉ ảnh hưởng đến việc trình duyệt có chờ quá trình giải mã hình ảnh này xảy ra trước khi kết xuất nội dung khác hay không.
Trong hầu hết các trường hợp, điều này không có nhiều tác động, nhưng đôi khi có thể cho phép trình duyệt hiển thị hình ảnh hoặc nội dung khác của bạn nhanh hơn một chút. Ví dụ: đối với một tài liệu lớn có nhiều phần tử cần thời gian để hiển thị, và với những hình ảnh lớn mất nhiều thời gian để giải mã, việc đặt sync trên các hình ảnh quan trọng sẽ yêu cầu trình duyệt đợi hình ảnh và hiển thị cả hai cùng một lúc. Ngoài ra, bạn có thể đặt async để cho phép trình duyệt hiển thị nội dung nhanh hơn mà không cần chờ giải mã hình ảnh.
Tuy nhiên, bạn nên cố gắng tránh có quá nhiều kích thước DOM và sử dụng hình ảnh thích ứng để giảm thời gian giải mã, thay vì sử dụng decoding.
Hình ảnh thích ứng với srcset
Nhờ việc khai báo max-inline-size: 100% đó, hình ảnh của bạn không thể thoát ra khỏi vùng chứa của chúng. Tuy nhiên, nếu người dùng có màn hình nhỏ và mạng băng thông thấp, việc này sẽ khiến họ tải hình ảnh có cùng kích thước xuống như người dùng có màn hình lớn sẽ gây lãng phí dữ liệu.
Để khắc phục vấn đề này, hãy thêm nhiều phiên bản của cùng một hình ảnh ở nhiều kích thước và sử dụng thuộc tính srcset để cho trình duyệt biết các kích thước đó tồn tại và thời điểm sử dụng.
Chỉ số mô tả chiều rộng
Bạn có thể xác định srcset bằng cách sử dụng danh sách các giá trị được phân tách bằng dấu phẩy. Mỗi giá trị là URL của một hình ảnh, theo sau là dấu cách, tiếp theo là một số siêu dữ liệu về hình ảnh đó, được gọi là mã mô tả.
Trong ví dụ này, siêu dữ liệu mô tả chiều rộng của mỗi hình ảnh bằng cách sử dụng đơn vị w. Một w là chiều rộng của một pixel.
<img
src="small-image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
srcset="small-image.png 300w,
medium-image.png 600w,
large-image.png 1200w"
>
Thuộc tính srcset bổ sung thay vì thay thế thuộc tính src.
Bạn vẫn cần có thuộc tính src hợp lệ, nhưng trình duyệt có thể thay thế giá trị của thuộc tính này bằng một trong các tuỳ chọn được liệt kê trong srcset. Để tiết kiệm băng thông, trình duyệt chỉ tải hình ảnh lớn hơn xuống nếu cần.
Kích thước
Nếu đang sử dụng chỉ số mô tả chiều rộng, bạn cũng phải sử dụng thuộc tính sizes để cung cấp thêm thông tin cho trình duyệt. Thuộc tính này cho trình duyệt biết kích thước bạn mong muốn hình ảnh hiển thị trong các điều kiện khác nhau. Các điều kiện đó được chỉ định trong một truy vấn nội dung nghe nhìn.
Thuộc tính sizes nhận danh sách các truy vấn nội dung đa phương tiện và chiều rộng hình ảnh được phân tách bằng dấu phẩy.
<img
src="small-image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
srcset="small-image.png 300w,
medium-image.png 600w,
large-image.png 1200w"
sizes="(min-width: 66em) 33vw,
(min-width: 44em) 50vw,
100vw"
>
Trong ví dụ này, bạn thông báo cho trình duyệt biết rằng trong một khung nhìn có chiều rộng trên 66em, trình duyệt sẽ hiển thị hình ảnh không rộng hơn 1/3 màn hình (ví dụ: bên trong bố cục 3 cột).
Đối với chiều rộng khung nhìn từ 44em đến 66em, hãy hiển thị hình ảnh bằng một nửa chiều rộng của màn hình (như trong bố cục 2 cột).
Đối với mọi kích thước hẹp hơn 44em, hãy hiển thị hình ảnh trên toàn bộ chiều rộng của màn hình.
Điều này có nghĩa là không nhất thiết phải dùng hình ảnh lớn nhất cho màn hình rộng nhất. Cửa sổ trình duyệt rộng có thể hiển thị bố cục nhiều cột sẽ sử dụng hình ảnh vừa với một cột, có thể nhỏ hơn hình ảnh dùng cho bố cục một cột trên màn hình hẹp hơn.
Bộ mô tả mật độ pixel
Bạn cũng có thể sử dụng bộ mô tả để cung cấp một phiên bản hình ảnh thay thế để hiển thị trên màn hình có mật độ điểm ảnh cao, nhằm giữ cho hình ảnh luôn sắc nét ở độ phân giải cao hơn mà chúng cung cấp.
Sử dụng chỉ số mô tả mật độ để mô tả mật độ pixel của hình ảnh có liên quan đến hình ảnh trong thuộc tính src. Mã mô tả mật độ là một số theo sau là chữ cái x, như trong 1x hoặc 2x.
<img
src="small-image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
srcset="small-image.png 1x,
medium-image.png 2x,
large-image.png 3x"
>
Nếu small-image.png có kích thước 300 x 200 pixel và medium-image.png là 600 x 400 pixel, thì medium-image.png có thể có 2x nằm sau nó trong danh sách srcset.
Bạn không cần phải sử dụng số nguyên. Nếu một phiên bản khác của hình ảnh có kích thước 450 x 300 pixel, bạn có thể mô tả hình ảnh đó bằng 1.5x.
Hình ảnh trình bày
Hình ảnh trong HTML là nội dung. Đó là lý do bạn đưa thuộc tính alt kèm theo nội dung mô tả về hình ảnh cho trình đọc màn hình và công cụ tìm kiếm.
Nếu nhúng một hình ảnh chỉ mang tính chất trang trí mà không có nội dung có ý nghĩa nào, thì bạn có thể sử dụng thuộc tính alt trống.
<img
src="flourish.png"
alt=""
width="400"
height="50"
>
Bạn phải luôn thêm thuộc tính alt, ngay cả khi trống.
Thuộc tính alt trống cho trình đọc màn hình biết rằng hình ảnh đó chỉ mang tính chất trình bày. Thuộc tính alt bị thiếu sẽ không cung cấp thông tin đó.
Tốt nhất là bạn nên đưa hình ảnh trình bày hoặc hình ảnh trang trí vào CSS thay vì HTML. HTML dành cho cấu trúc. CSS dùng để trình bày.
Hình nền
Sử dụng thuộc tính background-image trong CSS để tải hình ảnh trình bày.
element {
background-image: url(flourish.png);
}
Bạn có thể chỉ định nhiều đề xuất hình ảnh bằng cách sử dụng hàm image-set cho background-image.
Hàm image-set trong CSS hoạt động rất giống với thuộc tính srcset trong HTML.
Cung cấp danh sách hình ảnh kèm theo mã mô tả mật độ pixel cho từng hình ảnh.
element {
background-image: image-set(
small-image.png 1x,
medium-image.png 2x,
large-image.png 3x
);
}
Trình duyệt sẽ chọn hình ảnh phù hợp nhất với mật độ pixel của thiết bị.
Có nhiều yếu tố cần xem xét khi bạn thêm hình ảnh vào trang web, bao gồm:
- Dành đúng không gian cho mỗi hình ảnh.
- Xác định số lượng kích thước bạn cần.
- Quyết định xem hình ảnh mang tính nội dung hay trang trí.
Bạn nên dành thời gian để chọn hình ảnh phù hợp. Chiến lược hình ảnh kém có thể gây khó chịu và thất vọng cho người dùng của bạn. Chiến lược hình ảnh phù hợp sẽ tạo cảm giác trang web nhanh và sắc nét, bất kể thiết bị hoặc kết nối mạng của người dùng.
Có thêm một phần tử HTML khác trong bộ công cụ của bạn để giúp bạn có nhiều quyền kiểm soát hơn đối với hình ảnh của mình: phần tử picture.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về hình ảnh.
Bạn phải thêm kiểu cho hình ảnh để vừa với khung nhìn.
Khi chiều cao và chiều rộng của hình ảnh bị buộc phải ở tỷ lệ khung hình bất thường, kiểu nào có thể giúp điều chỉnh hình ảnh sao cho vừa với những tỷ lệ này?
object-fitcontain và cover.image-fitfit-imageaspect-ratioViệc đặt height và width vào hình ảnh sẽ khiến CSS không thể tạo kiểu theo cách khác.
Thuộc tính srcset không _______ thuộc tính src mà là _______ nó.
srcset chắc chắn không thay thế thuộc tính src.Việc thiếu alt trên một hình ảnh cũng giống như một alt trống.
alt trống cho trình đọc màn hình biết rằng hình ảnh này đang hiển thị.alt sẽ không báo hiệu cho trình đọc màn hình.