Hiệu suất hình ảnh

Hình ảnh thường là tài nguyên nặng nhất và phổ biến nhất trên web. 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á lượng 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 với thiết bị của người dùng.

Bạn có thể thêm hình ảnh vào trang bằng các phần tử <img> hoặc <picture> hoặc thuộc tính background-image của CSS.

Kích thước hình ảnh

Việc tối ưu hoá đầu tiên mà bạn có thể thực hiện khi sử dụng tài nguyên hình ảnh là hiển thị hình ảnh ở kích thước chính xác. Trong trường hợp này, thuật ngữ kích thước đề cập đến phương diện của hình ảnh. Nếu không có biến nào khác, hình ảnh hiển thị trong vùng chứa 500 pixel x 500 pixel sẽ có kích thước tối ưu là 500 pixel x 500 pixel. Ví dụ: việc sử dụng hình ảnh vuông 1.000 pixel có nghĩa là hình ảnh lớn gấp đôi mức 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 khá phức tạp. Năm 2010, khi iPhone 4 được phát hành, độ phân giải màn hình (640x960) gấp đôi so với iPhone 3 (320x480). Tuy nhiên, kích thước vật lý của màn hình iPhone 4 vẫn gần 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à một nửa kích thước trước đó. 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). 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, thì hình ảnh hình vuông 1000 pixel (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 hì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 danh sách các nguồn hình ảnh có thể sử dụng mà trình duyệt có thể sử dụng. Mỗi nguồn hình ảnh được chỉ định phải bao gồm URL hình ảnh và chỉ số mô tả mật độ pixel hoặc chiều rộng.

<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 chỉ số mô tả mật độ pixel để gợi ý trình duyệt sử dụng image-500.png trên các thiết bị có DPR là 1, image-1000.jpg trên các thiết bị có 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 có vẻ đơn giản, nhưng DPR của màn hình không phải là yếu tố duy nhất cần cân nhắc khi chọn hình ảnh tối ưu cho một trang nhất định. Bố cục của trang cũng là một yếu tố cần cân nhắc.

sizes

Giải pháp trước đó chỉ hoạt động nếu bạn hiển thị hình ảnh ở cùng một kích thước pixel CSS trên tất cả các khung nhìn. Trong nhiều trường hợp, bố cục của một trang và kích thước của vùng chứa sẽ thay đổi tuỳ thuộc vào 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 kích thước nguồn, trong đó mỗi kích thước nguồn bao gồm một điều kiện 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 kết hợp với các chỉ số mô tả chiều rộng srcset, 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 danh sách các đề xuất hình ảnh mà trình duyệt có thể chọn, được phân tách bằng dấu phẩy. Mỗi đề xuất 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 là kích thước của hình ảnh đó. Ví dụ: chỉ số mô tả 1000w cho biết chiều rộng nội tại của hình ảnh là 1000 pixel.

Bằng cách sử dụng thông tin này, trình duyệt sẽ đánh giá điều kiện nội dung nghe nhìn trong thuộc tính sizes và trong trường hợp này, sẽ được 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, thì hình ảnh sẽ hiển thị ở chiều rộng 500 pixel. Trên các thiết bị nhỏ hơn, hình ảnh sẽ hiển thị ở 100vw hoặc chiều rộng toàn bộ khung nhìn.

Sau đó, trình duyệt có thể kết hợp thông tin này với danh sách nguồn hình ảnh srcset để 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 có chiều rộng màn hình là 320 pixel với DPR là 3, thì hình ảnh sẽ hiển thị ở 320 CSS pixels x 3 DPR = 960 device pixels. Trong ví dụ này, hình ảnh có kích thước gần nhất 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. 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 giảm kích thước tệp hình ảnh và do đó giảm thời gian tải xuống. Bằng cách phân phát hình ảnh ở các định dạng hiện đại, bạn có thể giảm thời gian tải tài nguyên, nhờ đó có thể giảm Thời gian hiển thị nội dung lớn nhất (LCP).

WebP là một định dạng được hỗ trợ rộng rãi và hoạt động trên tất cả trình duyệt hiện đại. WebP thường nén tốt hơn so với JPEG, PNG hoặc GIF, cung cấp cả tính năng nén có tổn hao và nén không tổn hao. WebP cũng hỗ trợ độ trong suốt của kênh alpha ngay cả khi sử dụng tính nă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à một định dạng hình ảnh mới hơn và mặc dù không được hỗ trợ rộng rãi như WebP, nhưng định dạng này vẫn có khả năng hỗ trợ khá tốt trên các trình duyệt. AVIF hỗ trợ cả tính năng nén có tổn hao và không tổn hao, đồng thời các thử nghiệm đã cho thấy mức tiết kiệm lớn hơn 50% so với JPEG trong một số trường hợp. AVIF cũng cung cấp các tính năng Dải màu rộng (WCG) và Dải động cao (HDR).

Nén

Đối với hình ảnh, có hai loại nén:

1. Nén có tổn hao
2. Nén không mất dữ liệu

Phương thức 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 quá trình lượng tử hoá, đồng thời có thể loại bỏ thông tin màu bổ sung bằng cách sử dụng phép lấy mẫu màu phụ. Phương thức nén có tổn hao hiệu quả nhất trên các hình ảnh có mật độ điểm ảnh cao, 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 ít có khả năng được nhận thấy trong những hình ảnh chi tiết như vậy. Tuy nhiên, phương thức nén có tổn hao có thể kém hiệu quả hơn đối với hình ảnh chứa các cạnh sắc nét như hình vẽ đường nét, các chi tiết tương tự sắc nét hoặc văn bản. 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 làm mất dữ liệu. Phương thức nén không suy hao mô tả một pixel dựa trên sự khác biệt với các pixel lân cận. Tính năng nén không tổn hao được dùng cho các định dạng hình ảnh GIF, PNG, WebP và AVIF.

Bạn có thể nén hình ảnh bằng Squoosh, ImageOptim hoặc một dịch vụ tối ưu hoá hình ảnh. Khi nén, không có chế độ cài đặt chung nào phù hợp với mọi trường hợp. Bạn nên thử nghiệm với nhiều mức độ nén cho đến khi tìm được mức độ phù hợp giữa chất lượng hình ả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ể tự động thực hiện việc này cho bạn, nhưng có thể không phù hợp về mặt tài chính đối với một số 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 tính năng hỗ trợ cho hình ảnh AVIF và WebP, nhưng quay lại các định 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 sẽ chọn phần tử <source> đầu tiên được chỉ định khớp. Nếu có thể hiển thị hình ảnh ở định dạng đó, thì trình chiếu sẽ sử dụng hình ảnh đó. Nếu không, trình duyệt sẽ chuyển sang phần tử <source> được chỉ định tiếp theo. Trong đoạn mã HTML trước, định dạng AVIF được ưu tiên hơn định dạng WebP, quay lại định dạng JPEG nếu không hỗ trợ cả AVIF hoặc WebP.

Phần tử <picture> yêu cầu phần tử <img> được lồng bên trong. Các thuộc tính alt, width và height được xác định trên <img> và được sử dụng bất kể bạn chọn <source> nào.

Phần tử <source> cũng hỗ trợ các thuộc tính media, srcset và sizes. Tương tự như ví dụ về <img> trước đó, các thuộc tính này cho trình duyệt biết nê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 nội dung nghe nhìn. Trong ví dụ trước, DPR của thiết bị được dùng làm điều kiện nội dung nghe nhìn. Mọi thiết bị 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, đề xuất hình ảnh đã chọn sẽ hiển thị ở chiều rộng 500 pixel. Trên các thiết bị nhỏ hơn, thao tác này sẽ chiếm toàn bộ chiều rộng khung nhìn. Bằng cách kết hợp các thuộc tính media và srcset, bạn có thể kiểm soát tốt hơn hình ảnh cần sử dụng.

Điều này được minh hoạ trong bảng sau, trong đó một số chiều rộng khung nhìn và tỷ lệ pixel của thiết bị được đánh giá:

Các thiết bị có DPR là 1 sẽ tải hình ảnh image-500.jpg xuống, bao gồm cả hầu hết người dùng máy tính để bàn – những người xem hình ảnh ở kích thước bên ngoài rộng 500 pixel. Mặt khác, người dùng thiết bị di động có DPR là 3 sẽ tải xuống một image-1500.jpg có thể lớn hơn – cùng một hình ảnh được sử dụng trên các thiết bị máy tính có DPR là 3.

<picture>
  <source
    media="(min-width: 561px) 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 một phần tử <source> để sử dụng nhiều hình ảnh cho các thiết bị rộng có DPR cao:

Với truy vấn bổ sung này, bạn có thể thấy image-1000-sm.jpg và image-1500-sm.jpg 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 nhiều hơn, vì các cấu phần nén không xuất hiện rõ ràng ở kích thước và mật độ đó, đồng thời không làm giảm chất lượng hình ảnh trên các 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: 561px)"
    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 chỉ số mô tả chiều rộng đã bị xoá để thay vào đó là các chỉ số mô tả tỷ lệ pixel của thiết bị. Hình ảnh được phân phát trên thiết bị di động bị giới hạn ở /image-500.jpg hoặc /image-1000.jpg, ngay cả trên các thiết bị có DPR là 3.

Cách quản lý độ phức tạp

Khi làm việc với hình ảnh thích ứng, bạn có thể thấy nhiều biến thể kích thước và định dạng khác nhau cho mỗi hình ảnh. Trong ví dụ trước, các biến thể cho mỗi kích thước được sử dụng, nhưng loại trừ AVIF và WebP. Bạn nên có bao nhiêu biến thể? Giống như nhiều vấn đề kỹ thuật, câu trả lời thường là "tuỳ thuộc".

Mặc dù bạn có thể muốn có nhiều biến thể để phân phối hình ảnh phù hợp nhất, nhưng mỗi biến thể hình ảnh bổ sung đều có chi phí và sử dụng bộ nhớ đệm của trình duyệt kém hiệu quả hơn. Khi chỉ có một biến thể, mọi người dùng đều nhận được cùng một hình ảnh, nên hình ảnh đó 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ể, thì mỗi biến thể sẽ yêu cầu một mục nhập bộ nhớ đệm khác. Chi phí máy chủ có thể tăng lên và hiệu suất có thể giảm nếu mục nhập 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 của tài liệu HTML sẽ tăng lên theo từng biến thể. Bạn có thể thấy mình đang vận chuyển nhiều kilobyte HTML cho mỗi hình ảnh.

Phân phát hình ảnh dựa trên tiêu đề yêu cầu Accept

Tiêu đề yêu cầu HTTP Accept cho máy chủ biết trình duyệt của người dùng hiểu được loại nội dung nào. Máy chủ của bạn có thể sử dụng thông tin này để phân phát định dạng hình ảnh tối ưu mà không cần thêm byte vào các phản hồi HTML.

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ên là phiên bản đơn giản của mã bạn có thể thêm vào phần phụ trợ JavaScript của máy chủ để 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ẽ được phân phát. Nếu không, nếu tiêu đề Accept bao gồm image/webp, thì hình ảnh WebP sẽ được phân phát. Nếu không có điều kiện nào trong số này là đúng, thì hình ảnh JPEG sẽ được 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 mọi loại máy chủ web. Ví dụ: bạn có thể viết lại các yêu cầu hình ảnh trên máy chủ Apache dựa trên tiêu đề Accept bằng cách sử dụng mod_rewrite.

Hành vi này không khác gì hành vi bạn 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 tuyệt vời để 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 một số lượng hình ảnh đề xuất 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à hoạt động tối ưu hoá áp dụng cho từng hình ảnh phụ thuộc vào kích thước của hình ảnh đó trong trang và thiết bị mà người dùng đang sử dụng. Ví dụ: hình ảnh chính toàn chiều rộng có thể yêu cầu 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

Bạn có thể yêu cầu trình duyệt tải hình ảnh theo kiểu tải lười khi hình ảnh xuất hiện trong khung nhìn bằng cách sử dụng thuộc tính loading. Giá trị thuộc tính lazy cho trình duyệt biết không tải hình ảnh xuống cho đến khi hình ảnh đó nằm trong (hoặc gần) khung nhìn. Điều này giúp 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. Giá trị 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ể cải thiện thời gian kết xuất nội dung khác. Giá trị sync cho trình duyệt biết rằng hình ảnh phải đượ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 phương thức 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

Nội dung tiếp theo: Hiệu suất video

Mặc dù hình ảnh có thể là loại nội dung đa phương tiện phổ biến nhất được sử dụng trên web, nhưng đây không phải là loại nội dung duy nhất bạn cần lưu ý khi nói đến hiệu suất. Video là một loại nội dung đa phương tiện phổ biến khác được sử dụng trên web, đồng thời có những điểm cần cân nhắc riêng về 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ố kỹ thuật về cách tối ưu hoá video và cách tải video hiệu quả.