Hình ảnh thường là tài nguyên nặng nhất và phổ biến nhất trên web. Là một Do đó, việc tối ưu hoá hình ảnh có thể cải thiện đáng kể hiệu suất trên trang web của bạn. Trong hầu hết các trường hợp, việc tối ưu hoá hình ảnh có nghĩa là giảm thời gian mạng bằng cách gửi ít byte hơn, nhưng bạn cũng có thể tối ưu hoá số byte được gửi đến người dùng bằng cách phân phát hình ảnh có kích thước phù hợp cho thiết bị của người dùng.
Bạn có thể thêm hình ảnh vào một trang bằng phần tử <img>
hoặc <picture>
, hoặc
thuộc tính background-image
CSS.
Kích thước hình ảnh
Cách tối ưu hoá đầu tiên mà bạn có thể thực hiện đối với việc sử dụng tài nguyên hình ảnh là hiển thị hình ảnh ở đúng kích thước. Trong trường hợp này, thuật ngữ kích thước đề cập đến kích thước của một hình ảnh. Khi không có biến số nào khác, hãy hiện một hình ảnh trong vùng chứa 500 pixel x 500 pixel có kích thước tối ưu ở mức 500 pixel bằng cách 500 pixel. Ví dụ: sử dụng hình ảnh vuông có kích thước 1000 pixel có nghĩa là hình ảnh đó lớn gấp đôi khi cần thiết.
Tuy nhiên, có nhiều biến liên quan đến việc chọn kích thước hình ảnh phù hợp, khiến việc chọn kích thước hình ảnh phù hợp trong mọi trường hợp trở nên phức tạp. Năm 2010, khi chiếc iPhone 4 được ra mắt, độ phân giải màn hình (640x960) cao gấp đôi so với iPhone 3 (320x480). Tuy nhiên, kích thước thực Màn hình của iPhone 4 gần như giống với iPhone 3.
Việc hiển thị mọi thứ ở độ phân giải cao hơn sẽ làm cho văn bản và hình ảnh nhỏ hơn đáng kể—chính xác là bằng một nửa kích thước trước đây của chúng. Thay vào đó, 1 pixel trở thành 2 pixel thiết bị. Đây được gọi là tỷ lệ pixel của thiết bị (DPR). Chiến lược phát hành đĩa đơn iPhone 4 và nhiều mẫu iPhone được phát hành sau đó có DPR là 2.
Xem lại ví dụ trước, nếu thiết bị có DPR là 2 và hình ảnh được hiển thị trong vùng chứa 500 pixel x 500 pixel, sau đó là hình ảnh vuông 1000 pixel (còn gọi là kích thước nội tại) hiện là kích thước tối ưu. Tương tự, nếu thiết bị có DPR là 3, thì hình ảnh vuông 1500 pixel sẽ là kích thước tối ưu.
srcset
Phần tử <img>
hỗ trợ thuộc tính srcset
, cho phép bạn chỉ định một
danh sách nguồn ảnh mà trình duyệt có thể sử dụng. Đã chỉ định nguồn hình ảnh
phải bao gồm URL hình ảnh và mã mô tả chiều rộng hoặc mật độ pixel.
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>
Đoạn mã HTML trước đó sử dụng mã mô tả mật độ pixel để gợi ý cho trình duyệt
để sử dụng image-500.png
trên thiết bị có DPR là 1, image-1000.jpg
trên các thiết bị
với DPR là 2 và image-1500.jpg
trên các thiết bị có DPR là 3.
Mặc dù tất cả những điều này nghe có vẻ đơn giản nhưng DPR của màn hình không phải là duy nhất khi cân nhắc việc chọn hình ảnh tối ưu cho một trang nhất định. layout là một yếu tố khác cần cân nhắc.
sizes
Giải pháp trước đó chỉ hiệu quả nếu bạn hiển thị hình ảnh tại cùng một pixel CSS kích thước trên tất cả các khung nhìn. Trong nhiều trường hợp, bố cục của trang—và vùng chứa kích thước của nó—thay đổi tùy theo thiết bị của người dùng.
Thuộc tính sizes
cho phép bạn chỉ định một tập hợp các kích thước nguồn, trong đó mỗi kích thước
kích thước nguồn bao gồm điều kiện về nội dung nghe nhìn và một giá trị. Thuộc tính sizes
mô tả kích thước hiển thị dự kiến của hình ảnh tính bằng pixel CSS. Khi được kết hợp
với srcset
mã mô tả chiều rộng, trình duyệt có thể chọn nguồn hình ảnh
phù hợp nhất với thiết bị của người dùng.
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
Trong đoạn mã HTML trước đó, thuộc tính srcset
chỉ định một danh sách hình ảnh
các đề xuất mà trình duyệt có thể chọn, được phân tách bằng dấu phẩy. Mỗi ứng cử viên trong
danh sách bao gồm URL của hình ảnh, theo sau là cú pháp biểu thị
chiều rộng nội tại của hình ảnh. Kích thước nội tại của hình ảnh chính là kích thước của hình ảnh đó. Cho
Ví dụ: phần mô tả 1000w
biểu thị rằng chiều rộng nội tại của hình ảnh là
rộng 1000 pixel.
Bằng thông tin này, trình duyệt sẽ đánh giá điều kiện của nội dung nghe nhìn trong sizes
và trong trường hợp này là hướng dẫn rằng nếu chiều rộng khung nhìn của thiết bị
vượt quá 768 pixel, hình ảnh được hiển thị ở độ rộng 500 pixel. Nhỏ hơn
thiết bị, hình ảnh sẽ hiển thị ở 100vw
(hoặc toàn bộ chiều rộng của khung nhìn).
Sau đó, trình duyệt có thể kết hợp thông tin này với danh sách srcset
hình ảnh
để tìm hình ảnh tối ưu. Ví dụ: nếu người dùng đang sử dụng thiết bị di động
thiết bị có chiều rộng màn hình là 320 pixel với DPR là 3, hình ảnh được hiển thị
lúc 320 CSS pixels x 3 DPR = 960 device pixels
. Trong ví dụ này, giá trị gần nhất
hình ảnh có kích thước sẽ là image-1000.jpg
có chiều rộng nội tại là 1000
pixel (1000w
).
Định dạng tệp
Trình duyệt hỗ trợ nhiều định dạng tệp hình ảnh khác nhau. Các định dạng hình ảnh hiện đại như WebP và AVIF có thể nén tốt hơn so với PNG hoặc JPEG, giúp nhỏ hơn và do đó mất ít thời gian tải xuống hơn. Phân phát hình ảnh ở định dạng hiện đại, bạn có thể giảm thời gian tải của tài nguyên, nhờ đó có thể dẫn đến Thời gian hiển thị nội dung lớn nhất (LCP) thấp hơn.
WebP là định dạng được hỗ trợ rộng rãi và hoạt động trên tất cả các trình duyệt hiện đại. WebP thường có khả năng nén tốt hơn so với JPEG, PNG hoặc GIF, cung cấp cả hình ảnh r mất và nén mất dữ liệu. WebP cũng hỗ trợ tính minh bạch của kênh alpha ngay cả khi sử dụng nén có tổn hao—một tính năng mà bộ mã hoá và giải mã JPEG không cung cấp.
AVIF là định dạng hình ảnh mới hơn và không được hỗ trợ rộng rãi như WebP, nhưng đều được hỗ trợ hợp lý trên các trình duyệt. AVIF hỗ trợ cả dữ liệu có tổn hao và nén không tổn hao, và kiểm thử đã cho thấy kết quả tiết kiệm hơn 50% khi so với JPEG trong một số trường hợp. AVIF cũng cung cấp Gam màu rộng (WCG) và Các tính năng Dải động cao (HDR).
Nén
Đối với hình ảnh, có hai kiểu nén:
Nén có tổn hao hoạt động bằng cách giảm độ chính xác của hình ảnh thông qua lượng tử hoá, và thông tin màu bổ sung có thể bị loại bỏ bằng cách sử dụng phương pháp lấy mẫu phụ sắc độ. Nén có tổn hao hiệu quả nhất đối với hình ảnh có mật độ điểm ảnh cao và có nhiều nhiễu và màu sắc—thường là ảnh hoặc hình ảnh có nội dung tương tự. Điều này là do các cấu phần phần mềm do quá trình nén có tổn hao tạo ra sẽ ít có khả năng được chú ý hơn trong những hình ảnh chi tiết như vậy. Tuy nhiên, nén có tổn hao có thể kém hiệu quả hơn với hình ảnh có cạnh sắc nét như nghệ thuật vẽ đường nét, các chi tiết rõ ràng tương tự nhau, hoặc . Bạn có thể áp dụng tính năng nén có tổn hao cho hình ảnh JPEG, WebP và AVIF.
Tính năng nén không tổn hao giúp giảm kích thước tệp bằng cách nén hình ảnh mà không có dữ liệu tổn thất. Nén không tổn hao mô tả một pixel dựa trên sự khác biệt so với các pixel lân cận. Tính năng nén không tổn hao được dùng cho GIF, PNG, WebP và Định dạng hình ảnh AVIF.
Bạn có thể nén hình ảnh bằng công cụ Squoosh, ImageOptim hoặc hình ảnh Google Cloud. Khi nén, không có chế độ cài đặt chung nào phù hợp cho mọi trường hợp. Phương pháp tiếp cận được đề xuất là thử nghiệm với những nén cho đến khi bạn tìm thấy sự cân bằng giữa chất lượng ảnh và kích thước tệp. Một số dịch vụ tối ưu hoá hình ảnh nâng cao có thể làm việc này cho bạn tự động, nhưng có thể không mang lại hiệu quả về tài chính cho tất cả người dùng.
Phần tử <picture>
Phần tử <picture>
giúp bạn linh hoạt hơn trong việc chỉ định nhiều
đề xuất hình ảnh:
<picture>
<source type="image/avif" srcset="image.avif">
<source type="image/webp" srcset="image.webp">
<img
alt="An image"
width="500"
height="500"
src="/image.jpg"
>
</picture>
Khi sử dụng(các) phần tử <source>
trong phần tử <picture>
, bạn có thể thêm
hỗ trợ hình ảnh AVIF và WebP, nhưng sẽ quay lại dùng hình ảnh cũ tương thích hơn
nếu trình duyệt không hỗ trợ các định dạng hiện đại. Với phương pháp này,
trình duyệt chọn phần tử <source>
đầu tiên được chỉ định phù hợp. Nếu có thể
hiển thị hình ảnh ở định dạng đó, trình phân bổ sẽ sử dụng hình ảnh đó. Nếu không, trình duyệt
chuyển đến phần tử <source>
được chỉ định tiếp theo. Trong HTML trước
thì định dạng AVIF được ưu tiên hơn định dạng WebP, nên quay lại sử dụng
định dạng JPEG nếu cả AVIF hoặc WebP không được hỗ trợ.
Phần tử <picture>
cần có phần tử <img>
lồng bên trong. Chiến lược phát hành đĩa đơn
Các thuộc tính alt
, width
và height
được xác định trên <img>
và được dùng
bất kể <source>
nào được chọn.
Phần tử <source>
cũng hỗ trợ media
, srcset
và sizes
. Tương tự như ví dụ về <img>
trước đó, các giá trị này biểu thị cho
trình duyệt cần chọn hình ảnh nào trên các khung nhìn khác nhau.
<picture>
<source
media="(min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
Thuộc tính media
nhận một điều kiện về nội dung nghe nhìn. Trong ví dụ trước, phương thức
DPR của thiết bị được dùng làm điều kiện cho nội dung đa phương tiện. Bất kỳ thiết bị nào có DPR lớn hơn
hoặc bằng 1,5 sẽ sử dụng phần tử <source>
đầu tiên. Phần tử <source>
cho trình duyệt biết rằng trên các thiết bị có khung nhìn rộng hơn 768 pixel,
hình ảnh đề xuất đã chọn hiển thị ở chiều rộng 500 pixel. Trên các thiết bị nhỏ hơn,
hình ảnh này chiếm toàn bộ chiều rộng của khung nhìn. Bằng cách kết hợp media
và srcset
, bạn có thể kiểm soát tốt hơn hình ảnh nào cần sử dụng.
Điều này được minh hoạ trong bảng sau, trong đó có một số chiều rộng và chiều rộng của khung nhìn tỷ lệ pixel của thiết bị được đánh giá:
Chiều rộng khung nhìn (pixel) | 1 DPR | 1.5 DPR | 2 DPR | 3 DPR |
---|---|---|---|---|
320 | 500.jpg | 500.jpg | 500.jpg | 1000.jpg |
480 | 500.jpg | 500.jpg | 1000.jpg | 1500.jpg |
560 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
1920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
Các thiết bị có DPR là 1 sẽ tải hình ảnh image-500.jpg
xuống, bao gồm hầu hết
người dùng máy tính – những người xem hình ảnh ở kích thước bên ngoài rộng 500 pixel. Bật
mặt khác, người dùng thiết bị di động có DPR là 3 tải xuống ứng dụng có khả năng
image-1500.jpg
— chính hình ảnh được dùng trên các thiết bị máy tính có DPR là 3.
<picture>
<source
media="(min-width: 560px) and (min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<source
media="(max-width: 560px) and (min-resolution: 1.5x)"
srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
Trong ví dụ này, phần tử <picture>
được điều chỉnh để thêm phần tử
Phần tử <source>
để sử dụng các hình ảnh khác nhau cho các thiết bị rộng có DPR cao:
Chiều rộng khung nhìn (pixel) | 1 DPR | 1.5 DPR | 2 DPR | 3 DPR |
---|---|---|---|---|
320 | 500.jpg | 500.jpg | 500.jpg | 1000-sm.jpg |
480 | 500.jpg | 500.jpg | 1000-sm.jpg | 1500-sm.jpg |
560 | 500.jpg | 1000-sm.jpg | 1000-sm.jpg | 1500-sm.jpg |
1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
1920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
Với truy vấn bổ sung này, bạn có thể thấy image-1000-sm.jpg
và
image-1500-sm.jpg
được hiển thị trên các khung nhìn nhỏ. Thông tin bổ sung này
cho phép bạn nén hình ảnh hơn nữa vì cấu phần phần mềm nén không
hiển thị ở kích thước và mật độ đó mà vẫn không làm ảnh hưởng đến chất lượng ảnh
trên thiết bị máy tính.
Ngoài ra, bằng cách điều chỉnh các thuộc tính srcset
và media
, bạn có thể tránh
phân phát hình ảnh lớn trên khung nhìn nhỏ:
<picture>
<source
media="(min-width: 560px)"
srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x"
>
<source
media="(max-width: 560px)"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
Trong đoạn mã HTML trước đó, các phần mô tả chiều rộng đã bị xoá để thay thế
của bộ mô tả tỷ lệ pixel của thiết bị. Hình ảnh được phân phối trên thiết bị di động bị giới hạn
lên /image-500.jpg
hoặc /image-1000.jpg
, ngay cả trên các thiết bị có DPR là 3.
Cách xử lý sự phức tạp
Khi sử dụng hình ảnh thích ứng, bạn có thể thấy nhiều các biến thể kích thước và định dạng cho mỗi hình ảnh. Trong ví dụ trước, biến thể cho từng kích thước được sử dụng, nhưng không bao gồm AVIF và WebP. Bạn nên dùng bao nhiêu biến thể có? Giống như nhiều vấn đề kỹ thuật, câu trả lời thường là "phụ thuộc".
Mặc dù bạn có thể muốn có nhiều biến thể để mang lại kết quả phù hợp nhất, mọi biến thể hình ảnh bổ sung đều phải tốn chi phí và khiến việc sử dụng kém hiệu quả bộ nhớ đệm của trình duyệt. Chỉ với một biến thể, mọi người dùng sẽ nhận được cùng một hình ảnh, để dữ liệu có thể được lưu vào bộ nhớ đệm rất hiệu quả.
Mặt khác, nếu có nhiều biến thể, mỗi biến thể yêu cầu một mục nhập bộ nhớ đệm. Chi phí máy chủ có thể tăng và có thể làm giảm hiệu suất nếu mục nhập trong bộ nhớ đệm của biến thể đã hết hạn và hình ảnh cần được tìm nạp lại từ máy chủ gốc.
Ngoài ra, kích thước tài liệu HTML của bạn sẽ tăng theo mỗi biến thể. Bạn bạn có thể tự mình gửi nhiều kilobyte HTML cho mỗi hình ảnh.
Phân phát hình ảnh dựa trên tiêu đề của yêu cầu Accept
Tiêu đề của yêu cầu HTTP Accept
thông báo cho máy chủ biết loại nội dung nào
mà trình duyệt của người dùng hiểu. Thông tin này có thể được máy chủ của bạn sử dụng để phân phát
định dạng hình ảnh tối ưu mà không cần bổ sung thêm byte vào phản hồi HTML của bạn.
if (request.headers.accept) {
if (request.headers.accept.includes('image/avif')) {
return reply.from('image.avif');
} else if (request.headers.accept.includes('image/webp')) {
return reply.from('image.webp');
}
}
return reply.from('image.jpg');
Đoạn mã HTML trước đó là phiên bản đơn giản của mã mà bạn có thể thêm vào
chương trình phụ trợ JavaScript của máy chủ của bạn để chọn và phân phát định dạng hình ảnh tối ưu.
Nếu tiêu đề Accept
của yêu cầu bao gồm image/avif
, thì hình ảnh AVIF sẽ
phân phát. Ngược lại, nếu tiêu đề Accept
bao gồm image/webp
, thì hình ảnh WebP
được phân phát. Nếu không có điều kiện nào trong số này đúng, thì hình ảnh JPEG sẽ
phân phát.
Bạn có thể sửa đổi phản hồi dựa trên nội dung của tiêu đề yêu cầu Accept
trong hầu hết các loại máy chủ web—ví dụ: bạn có thể ghi lại yêu cầu hình ảnh
trên máy chủ Apache dựa trên tiêu đề Accept
sử dụng mod_rewrite
.
Đây là hành vi bạn sẽ thấy trên Mạng phân phối nội dung hình ảnh (CDN). CDN hình ảnh là giải pháp hiệu quả để tối ưu hoá hình ảnh và gửi định dạng tối ưu dựa trên thiết bị và trình duyệt của người dùng.
Điều quan trọng là phải tìm được sự cân bằng, tạo ra số lượng hình ảnh hợp lý, và đo lường tác động đến trải nghiệm người dùng. Các hình ảnh khác nhau có thể mang lại kết quả khác nhau và các biện pháp tối ưu hoá được áp dụng cho mỗi hình ảnh sẽ phụ thuộc vào kích thước trong trang và các thiết bị mà người dùng đang sử dụng. Ví dụ: một Hình ảnh chính có chiều rộng đầy đủ có thể cần nhiều biến thể hơn so với hình thu nhỏ trên trang thông tin sản phẩm thương mại điện tử.
Tải từng phần
Có thể yêu cầu trình duyệt tải từng phần hình ảnh khi chúng xuất hiện trong
khung nhìn bằng thuộc tính loading
. Giá trị thuộc tính của lazy
cho biết
trình duyệt không tải xuống hình ảnh cho đến khi hình ảnh nằm trong (hoặc gần) khung nhìn. Chiến dịch này
tiết kiệm băng thông, cho phép trình duyệt ưu tiên các tài nguyên cần thiết
hiển thị nội dung quan trọng đã có trong khung nhìn.
decoding
Thuộc tính decoding
cho trình duyệt biết cách giải mã hình ảnh. Đáp
giá trị của async
cho trình duyệt biết rằng hình ảnh có thể được giải mã không đồng bộ,
có thể giúp cải thiện thời gian kết xuất nội dung khác. Giá trị của sync
cho biết
trình duyệt mà hình ảnh sẽ được hiển thị cùng lúc với nội dung khác.
Giá trị mặc định của auto
cho phép trình duyệt quyết định quảng cáo nào phù hợp nhất với
người dùng.
Bản minh hoạ hình ảnh
Kiểm tra kiến thức của bạn
Những định dạng hình ảnh nào hỗ trợ nén không mất dữ liệu?
Những định dạng hình ảnh nào hỗ trợ nén giữ nguyên?
Bộ mô tả chiều rộng (ví dụ: 1000w
) cho biết điều gì
trình duyệt về một hình ảnh đề xuất được chỉ định trong srcset
không?
Thuộc tính sizes
cho trình duyệt biết điều gì về một
Phần tử <img>
được áp dụng giá trị này?
srcset
của phần tử <img>
,
dựa trên kích thước khung nhìn hiện tại của người dùng.
srcset
của phần tử <img>
.
Tiếp theo: Hiệu suất video
Mặc dù hình ảnh là loại nội dung nghe nhìn phổ biến nhất được sử dụng trên web, nhưng chúng từ phương thức duy nhất mà bạn cần lưu ý về hiệu suất. Video dài là một loại phương tiện phổ biến khác được sử dụng trên web và đi kèm với hiệu suất. Trong học phần tiếp theo của khoá học này, hãy khám phá một số về cách tối ưu hoá video và cách tải video hiệu quả.