Văn bản trên web sẽ tự động xuống theo cạnh màn hình để không bị tràn. Khác biệt với hình ảnh. Hình ảnh có kích thước nội tại. Nếu hình ảnh rộng hơn màn hình, hình ảnh sẽ bị tràn, làm cho thanh cuộn ngang xuất hiện.
Rất may là bạn có thể áp dụng các biện pháp trong CSS để ngăn chặ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ể khai báo rằng hình ảnh không bao giờ được hiển thị ở kích thước rộng hơn phần tử chứa hình ảnh bằng cách sử dụng max-inline-size.
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 được 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 đó, 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.
Thêm giá trị block-size là auto có nghĩa là tỷ lệ khung hình của hình ảnh sẽ không đổi.
Đôi khi, kích thước của một hình ảnh có thể nằm ngoài tầm kiểm soát của bạn, chẳng hạn như nếu một hình ảnh được thêm thông qua một hệ thống quản lý nội dung. Nếu thiết kế của bạn yêu cầu hình ảnh có tỷ lệ khung hình khác với kích thước thực của hình ảnh, hãy sử dụng thuộc tính aspect-ratio trong CSS.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
}
Tuy nhiên, trình duyệt có thể sẽ bóp méo hoặc kéo giãn hình ảnh để cho vừa với tỷ lệ khung hình mong muốn của bạn.
Để ngăn việc đó xảy ra, 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, ngay cả khi điều đó có nghĩa là để trống không gian bên trên và bên dưới.
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 giữ nguyên tỷ lệ khung hình của hình ảnh, ngay cả khi điều đó có nghĩa là cắt hình ảnh ở trên cùng và dưới cùng.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
}
Nếu vấn đề nằm ở phía trên cùng và dưới cùng bị cắt đồng đều, hãy sử dụng thuộc tính CSS object-position để điều chỉnh tiêu điểm của vùng cắt.
Bạn có thể đảm bảo nội dung hình ảnh quan trọng nhất vẫn hiển thị.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
object-position: top center;
}
Cung cấp 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 ý về kích thước
Nếu biết kích thước của hình ảnh, bạn nên thêm các thuộc tính width và height. Ngay cả khi hình ảnh được hiển thị ở kích thước khác (do quy tắc max-inline-size: 100% của bạn), trình duyệt vẫn biết tỷ lệ chiều rộng/chiều cao và có thể dành đúng khoảng không gian. Thao tác này sẽ ngăn các nội dung khác của bạn hiển thị xung quanh khi hình ảnh tải.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
>
Đang tải gợi ý
Sử dụng thuộc tính loading để cho trình duyệt biết có nên trì hoãn việc tải hình ảnh cho đến khi hình ảnh đó ở trong hoặc gần khung nhìn. Đối với 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ừng phần cho đến khi người dùng cuộn xuống đủ lâu để hình ảnh đó 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, bạn không nên 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 thuộc tính eager (mặc định) để ngăn việc này áp dụng:
<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 những hình ảnh quan trọng như hình ảnh LCP, bạn có thể ưu tiên việc tải hơn nữa thông qua tính năng Tìm nạp mức độ ưu tiên 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 khi hình ảnh thường được tìm nạp.
Tuy nhiên, hãy nhớ rằng: khi bạn yêu cầu trình duyệt ưu tiên tải một tài nguyên xuống (như hình ảnh), trình duyệt sẽ 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 nó thực sự quan trọng.
Gợi ý khi tải trước
Một số hình ảnh có thể không có trong HTML ban đầu nếu chúng được thêm bằng JavaScript hoặc dưới dạng hình nền trong CSS. Bạn cũng có thể sử dụng tính năng tải trước để cho phép tìm nạp trước những hình ảnh quan trọng này. Bạn có thể kết hợp thuộc tính này với thuộc tính fetchpriority đối với những hình ảnh thực sự quan trọng:
<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">
Một lần nữa, bạn nên sử dụng thuộc tính này một cách thận trọng để tránh ghi đè quá nhiều phỏng đoán ưu tiên của trình duyệt, điều này có thể dẫn đến giảm hiệu suất.
Tải trước hình ảnh thích ứng dựa trên srcset (được thảo luận dưới đây) thông qua thuộc tính imagesrcset và imagesizes là nâng cao hơn và được hỗ trợ trong một số trình duyệt, nhưng không phải tất cả:
Bằng cách loại trừ href dự phòng, bạn có thể đảm bảo các trình duyệt không hỗ trợ việc này sẽ không tải trước hình ảnh không chính xác.
Tính năng tải trước dựa trên các định dạng hình ảnh khác nhau dựa trên sự hỗ trợ của trình duyệt cho những hình ảnh đó hiện không được hỗ trợ và có thể dẫn đến việc tải thêm xuống.
Bạn nên tránh tải trước nếu có thể và để hình ảnh có sẵn trong HTML ban đầu, để tránh lặp lại mã và cho phép truy cập vào toàn bộ các tuỳ chọn mà trình duyệt hỗ trợ.
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ộ. Sau đó, trình duyệt có thể ưu tiên xử lý những 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ể dùng giá trị sync nếu 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 sẽ không thay đổi tốc độ giải mã hình ảnh, mà chỉ thay đổi 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 hiển thị nội dung khác hay không.
Trong hầu hết các trường hợp, điều này sẽ ít tác động, tuy nhiên trong một số trường hợp nhất định, việc này có thể cho phép hình ảnh hoặc nội dung hiển thị 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 hình ảnh lớn cần 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, việc đặt async có thể cho phép hiển thị nội dung nhanh hơn mà không cần chờ bộ giải mã hình ảnh.
Tuy nhiên, lựa chọn tốt hơn thường là cố gắng tránh kích thước DOM quá lớn và đảm bảo dùng hình ảnh thích ứng để giảm thời gian giải mã, nghĩa là thuộc tính giải mã sẽ có ít tác dụng.
Hình ảnh thích ứng có srcset
Nhờ việc khai báo max-inline-size: 100% đó, hình ảnh của bạn sẽ không bao giờ thoát ra khỏi vùng chứa. Nhưng ngay cả khi có một hình ảnh lớn được thu nhỏ lại để vừa vặn, thì ảnh sẽ không ổn. Nếu ai đó sử dụng thiết bị màn hình nhỏ trên mạng băng thông thấp, họ sẽ tải các hình ảnh lớn không cần thiết xuống.
Nếu tạo nhiều phiên bản của cùng một hình ảnh ở nhiều kích thước, bạn có thể thông báo cho trình duyệt biết về các hình ảnh đó bằng thuộc tính srcset.
Chỉ số mô tả chiều rộng
Bạn có thể chuyể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ị phải là URL của một hình ảnh, theo sau là một dấu cách, sau đó là một số siêu dữ liệu về hình ảnh đó. Siêu dữ liệu này được gọi là phần 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à 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 không thay thế thuộc tính src. Thay vào đó, thuộc tính srcset sẽ bổ sung cho thuộc tính src. Bạn vẫn cần có thuộc tính src hợp lệ, nhưng giờ đây, trình duyệt có thể thay thế giá trị của thuộc tính đó bằng một trong các lựa chọn được liệt kê trong thuộc tính srcset.
Trình duyệt sẽ không tải hình ảnh lớn hơn xuống trừ khi cần thiết. Điều đó giúp tiết kiệm băng thông.
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. Giá trị này cho trình duyệt biết kích thước hình ảnh mà bạn mong muốn 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 phương tiện.
Thuộc tính sizes nhận danh sách được phân tách bằng dấu phẩy gồm các truy vấn phương tiện và chiều rộng hình ảnh.
<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 đang cho trình duyệt biết rằng phía trên chiều rộng khung nhìn 66em để hiển thị hình ảnh không rộng hơn 1/3 màn hình (ví dụ: bên trong một bố cục ba 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 (bố cục 2 cột).
Đối với các nội dung bên dưới 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 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ẽ dùng hình ảnh vừa với một cột. Hình ảnh đó 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
Có một tình huống khác mà bạn nên cung cấp nhiều phiên bản của cùng một hình ảnh.
Một số thiết bị có màn hình với mật độ điểm ảnh cao. Trên màn hình hiển thị mật độ kép, bạn có thể gói thông tin có giá trị hai pixel vào không gian của một pixel. Việc này giúp hình ảnh luôn sắc nét trên các loại màn hình đó.
Sử dụng chỉ số mô tả mật độ để mô tả mật độ pixel của hình ảnh liên quan đến hình ảnh trong thuộc tính src. Chỉ số mô tả mật độ là một số theo sau là chữ cái x: 1x, 2x, v.v.
<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 có kích thước 600 x 400 pixel, thì medium-image.png có thể có 2x 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 luôn cung cấp thuộc tính alt có nội dung mô tả hình ảnh cho trình đọc màn hình và công cụ tìm kiếm.
Nếu bạn nhúng một hình ảnh chỉ đơn giản là một sự bổ sung về mặt hình ảnh mà không có bất kỳ nội dung có ý nghĩa nào, hãy sử dụng thuộc tính alt trống.
<img
src="flourish.png"
alt=""
width="400"
height="50"
>
Bạn vẫn phải thêm thuộc tính alt. Việc thiếu thuộc tính alt không giống với thuộc tính alt trống. Thuộc tính alt trống sẽ truyền tải đến trình đọc màn hình rằng hình ảnh này chỉ ở dạng trình bày.
Tốt nhất là bạn không nên đưa hình ảnh trình bày hoặc hình ảnh trang trí vào HTML. HTML dành cho cấu trúc. CSS dành cho bản 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 hình ảnh đề xuất 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 thuộc tính srcset trong HTML. Cung cấp danh sách hình ảnh kèm theo chỉ số 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:
Dành đúng khoảng trống 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 ra những hình ảnh phù hợp. Chiến lược hình ảnh kém chất lượng là nguyên nhân gây ra sự thất vọng và khó chịu cho người dùng. Một chiến lược hình ảnh hiệu quả sẽ giúp trang web của bạn trông gọn gàng 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 trong bộ công cụ của bạn để giúp bạn kiểm soát hình ảnh tốt hơn: phần tử picture.
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
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ị áp đặt theo tỷ lệ khung hình không tự nhiên, kiểu nào có thể giúp điều chỉnh hình ảnh 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 khác nhau.
Thuộc tính srcset không _______ thuộc tính src mà là _______ thuộc tính đó.
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 sẽ truyền tải đến trình đọc màn hình rằng hình ảnh này đang hiển thịalt sẽ không báo hiệu gì cho trình đọc màn hình.