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. 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:

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

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á:

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:

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

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ả.