Trang này được dịch bởi Cloud Translation API.

Xây dựng thành phần hình ảnh hiệu quả

Thành phần hình ảnh đóng gói các phương pháp hay nhất về hiệu suất và cung cấp giải pháp ngay lập tức để tối ưu hoá hình ảnh.

Leena Sohoni

Kara Erickson

Alex Castle

Hình ảnh là một nguồn thường gặp gây ra nút thắt cổ chai về hiệu suất cho các ứng dụng web và là một lĩnh vực trọng tâm cần tập trung để tối ưu hoá. Hình ảnh chưa được tối ưu hoá góp phần làm tăng kích thước trang và chiếm hơn 70% tổng trọng lượng trang tính bằng byte ở phân vị thứ 90^th. Có nhiều cách để tối ưu hoá hình ảnh, trong đó cần có một "thành phần hình ảnh" thông minh với các giải pháp hiệu suất được tích hợp sẵn theo mặc định.

Nhóm Aurora đã làm việc với Next.js để xây dựng một thành phần như vậy. Mục tiêu là tạo một mẫu hình ảnh được tối ưu hoá mà các nhà phát triển web có thể tuỳ chỉnh thêm. Thành phần này đóng vai trò là một mô hình hiệu quả và đặt ra tiêu chuẩn để xây dựng các thành phần hình ảnh trong các khung, hệ thống quản lý nội dung (CMS) và ngăn xếp công nghệ khác. Chúng tôi đã cộng tác trên một thành phần tương tự cho Nuxt.js và đang hợp tác với Angular để tối ưu hoá hình ảnh trong các phiên bản trong tương lai. Bài đăng này thảo luận cách chúng tôi thiết kế thành phần Hình ảnh Next.js và các bài học trong quá trình này.

Thành phần hình ảnh dưới dạng phần mở rộng của hình ảnh

Các vấn đề và cơ hội tối ưu hoá hình ảnh

Hình ảnh không chỉ ảnh hưởng đến hiệu suất mà còn ảnh hưởng đến hoạt động kinh doanh. Số lượng hình ảnh trên một trang là yếu tố dự đoán lớn nhất thứ hai về lượt chuyển đổi của người dùng truy cập vào trang web. Những phiên mà người dùng chuyển đổi có ít hình ảnh hơn 38% so với những phiên mà họ không chuyển đổi. Trong quy trình kiểm tra theo các phương pháp hay nhất, Lighthouse liệt kê nhiều cơ hội để tối ưu hoá hình ảnh và cải thiện các chỉ số quan trọng của web. Sau đây là một số khía cạnh phổ biến mà hình ảnh có thể ảnh hưởng đến các chỉ số quan trọng về trang web và trải nghiệm người dùng.

Hình ảnh chưa chỉnh kích thước sẽ gây tổn hại đến CLS (Mức thay đổi bố cục tích luỹ)

Hình ảnh được phân phát mà không chỉ định kích thước có thể khiến bố cục không ổn định và góp phần làm tăng Điểm số tổng hợp về mức thay đổi bố cục (CLS). Việc đặt thuộc tính width và height trên các phần tử img có thể giúp ngăn việc bố cục bị thay đổi. Ví dụ:

<img src="flower.jpg" width="360" height="240">

Chiều rộng và chiều cao phải được đặt sao cho tỷ lệ khung hình của hình ảnh kết xuất gần với tỷ lệ khung hình tự nhiên. Sự khác biệt đáng kể về tỷ lệ khung hình có thể khiến hình ảnh trông bị méo. Một thuộc tính tương đối mới cho phép bạn chỉ định tỷ lệ khung hình trong CSS có thể giúp định cỡ hình ảnh một cách thích ứng trong khi ngăn chặn CLS.

Hình ảnh lớn có thể làm giảm LCP

Kích thước tệp của hình ảnh càng lớn thì thời gian tải xuống càng lâu. Hình ảnh lớn có thể là hình ảnh "chính" của trang hoặc phần tử quan trọng nhất trong khung nhìn chịu trách nhiệm kích hoạt Thời gian hiển thị nội dung lớn nhất (LCP). Một hình ảnh thuộc nội dung quan trọng và mất nhiều thời gian để tải xuống sẽ làm chậm LCP.

Trong nhiều trường hợp, nhà phát triển có thể giảm kích thước hình ảnh thông qua việc nén hiệu quả hơn và sử dụng hình ảnh thích ứng. Thuộc tính srcset và sizes của phần tử <img> giúp cung cấp các tệp hình ảnh có nhiều kích thước. Sau đó, trình duyệt có thể chọn một trong các phiên bản phù hợp tuỳ thuộc vào kích thước và độ phân giải màn hình.

Việc nén hình ảnh kém có thể ảnh hưởng đến LCP

Các định dạng hình ảnh hiện đại như AVIF hoặc WebP có thể nén tốt hơn so với các định dạng JPEG và PNG thường dùng. Trong một số trường hợp, việc nén tốt hơn sẽ giúp giảm kích thước tệp từ 25% đến 50% mà vẫn giữ nguyên chất lượng hình ảnh. Mức giảm này giúp tải xuống nhanh hơn và tiêu thụ ít dữ liệu hơn. Ứng dụng sẽ phân phát định dạng hình ảnh hiện đại cho các trình duyệt hỗ trợ những định dạng này.

Việc tải hình ảnh không cần thiết sẽ làm giảm LCP

Hình ảnh dưới màn hình đầu tiên hoặc không nằm trong khung nhìn không hiển thị cho người dùng khi trang được tải. Bạn có thể trì hoãn các yêu cầu này để chúng không đóng góp vào LCP và làm chậm chỉ số này. Bạn có thể sử dụng tính năng tải từng phần để tải những hình ảnh như vậy sau khi người dùng cuộn đến.

Thử thách về tối ưu hoá

Các nhóm có thể đánh giá chi phí hiệu suất do các vấn đề nêu trên và triển khai các giải pháp hay nhất để khắc phục những vấn đề đó. Tuy nhiên, điều này thường không xảy ra trong thực tế và hình ảnh không hiệu quả vẫn tiếp tục làm chậm web. Nguyên nhân dẫn đến sự khác biệt này có thể là:

Mục tiêu ưu tiên: Nhà phát triển web thường tập trung vào mã, JavaScript và tối ưu hoá dữ liệu. Do đó, họ có thể không nhận biết được các vấn đề về hình ảnh hoặc cách tối ưu hoá hình ảnh. Hình ảnh do nhà thiết kế tạo hoặc do người dùng tải lên có thể không được ưu tiên cao.
Giải pháp tích hợp sẵn: Ngay cả khi các nhà phát triển đã nắm được các khía cạnh của việc tối ưu hoá hình ảnh, thì việc không có giải pháp tích hợp sẵn cho khung hoặc ngăn xếp công nghệ có thể là một trở ngại.
Hình ảnh linh hoạt: Ngoài hình ảnh tĩnh trong ứng dụng, hình ảnh linh hoạt còn được người dùng tải lên hoặc lấy từ cơ sở dữ liệu bên ngoài hoặc CMS. Bạn có thể gặp khó khăn khi xác định kích thước của những hình ảnh như vậy khi nguồn hình ảnh là động.
Phương thức đánh dấu quá tải: Giải pháp để thêm kích thước hình ảnh hoặc srcset cho các kích thước khác nhau sẽ yêu cầu bạn phải đánh dấu bổ sung cho mỗi hình ảnh, việc này có thể tẻ nhạt. Thuộc tính srcset được ra mắt vào năm 2014 nhưng chỉ có 26,5% trang web sử dụng thuộc tính này hiện nay. Khi sử dụng srcset, nhà phát triển phải tạo hình ảnh ở nhiều kích thước. Các công cụ như just-gimme-an-img có thể giúp ích nhưng bạn phải sử dụng theo cách thủ công cho mọi hình ảnh.
Hỗ trợ trình duyệt: Các định dạng hình ảnh hiện đại như AVIF và WebP tạo ra các tệp hình ảnh nhỏ hơn nhưng cần được xử lý đặc biệt trên các trình duyệt không hỗ trợ các định dạng này. Các nhà phát triển phải sử dụng các chiến lược như thương lượng nội dung hoặc phần tử <picture> để hình ảnh được phân phát cho tất cả trình duyệt.
Các chức năng tải từng phần: Có nhiều kỹ thuật và thư viện để triển khai tính năng tải từng phần cho hình ảnh dưới màn hình đầu tiên. Chọn được video tốt nhất có thể là một thách thức. Nhà phát triển cũng có thể không biết khoảng cách tốt nhất từ "nếp gập" để tải hình ảnh bị trì hoãn. Kích thước khung nhìn khác nhau trên các thiết bị có thể làm phức tạp thêm vấn đề này.
Thay đổi về bối cảnh: Khi các trình duyệt bắt đầu hỗ trợ các tính năng HTML hoặc CSS mới để nâng cao hiệu suất, nhà phát triển có thể khó đánh giá từng tính năng. Ví dụ: Chrome đang ra mắt tính năng Mức độ ưu tiên tìm nạp dưới dạng Bản dùng thử theo nguyên gốc. Bạn có thể dùng tính năng này để tăng mức độ ưu tiên cho các hình ảnh cụ thể trên trang. Nhìn chung, nhà phát triển sẽ dễ dàng hơn nếu các tính năng nâng cao đó được đánh giá và triển khai ở cấp thành phần.

Thành phần hình ảnh dưới dạng giải pháp

Các cơ hội để tối ưu hoá hình ảnh và những thách thức trong việc triển khai riêng lẻ cho từng ứng dụng đã đưa chúng tôi đến ý tưởng về thành phần hình ảnh. Thành phần hình ảnh có thể đóng gói và thực thi các phương pháp hay nhất. Bằng cách thay thế phần tử <img> bằng một thành phần hình ảnh, nhà phát triển có thể giải quyết tốt hơn các vấn đề về hiệu suất hình ảnh.

Trong năm qua, chúng tôi đã làm việc với khung Next.js để thiết kế và triển khai thành phần Hình ảnh của họ. Bạn có thể dùng hàm này để thay thế cho các phần tử <img> hiện có trong các ứng dụng Next.js như sau.

// Before with <img> element:
function Logo() {
  return <img src="/logo.jpg" alt="logo" height="200" width="100" />
}

// After with image component:
import Image from 'next/image'

function Logo() {
  return <Image src="/logo.jpg" alt="logo" height="200" width="100" />
}

Thành phần này cố gắng giải quyết các vấn đề liên quan đến hình ảnh một cách chung chung thông qua một bộ tính năng và nguyên tắc phong phú. Thư viện này cũng có các tuỳ chọn cho phép nhà phát triển tuỳ chỉnh theo nhiều yêu cầu về hình ảnh.

Bảo vệ khỏi các thay đổi về bố cục

Như đã thảo luận trước đó, hình ảnh không có kích thước sẽ gây ra sự thay đổi về bố cục và góp phần làm tăng CLS. Khi sử dụng thành phần Hình ảnh Next.js, nhà phát triển phải cung cấp kích thước hình ảnh bằng cách sử dụng các thuộc tính width và height để ngăn mọi thay đổi về bố cục. Nếu không biết kích thước, nhà phát triển phải chỉ định layout=fill để phân phát hình ảnh không có kích thước nằm bên trong vùng chứa có kích thước. Ngoài ra, bạn có thể sử dụng tính năng nhập hình ảnh tĩnh để truy xuất kích thước của hình ảnh thực tế trên ổ đĩa cứng tại thời điểm tạo bản dựng và đưa kích thước đó vào hình ảnh.

// Image component with width and height specified
<Image src="/logo.jpg" alt="logo" height="200" width="100" />

// Image component with layout specified
<Image src="/hero.jpg" layout="fill" objectFit="cover" alt="hero" />

// Image component with image import
import Image from 'next/image'
import logo from './logo.png'

function Logo() {
  return <Image src={logo} alt="logo" />
}

Vì nhà phát triển không thể sử dụng thành phần Hình ảnh không có kích thước, nên thiết kế này đảm bảo rằng họ sẽ dành thời gian để xem xét kích thước hình ảnh và ngăn việc bố cục bị dịch chuyển.

Tăng khả năng thích ứng

Để hình ảnh thích ứng trên các thiết bị, nhà phát triển phải đặt thuộc tính srcset và sizes trong phần tử <img>. Chúng tôi muốn giảm bớt công sức này bằng thành phần Hình ảnh. Chúng tôi đã thiết kế thành phần Hình ảnh Next.js để chỉ đặt giá trị thuộc tính một lần cho mỗi ứng dụng. Chúng ta áp dụng các thuộc tính này cho tất cả các thực thể của thành phần Hình ảnh dựa trên chế độ bố cục. Chúng tôi đã đưa ra một giải pháp gồm 3 phần:

Thuộc tính deviceSizes: Bạn có thể dùng thuộc tính này để định cấu hình các điểm ngắt một lần dựa trên các thiết bị phổ biến đối với cơ sở người dùng ứng dụng. Giá trị mặc định cho các điểm ngắt có trong tệp cấu hình.
Thuộc tính imageSizes: Đây cũng là một thuộc tính có thể định cấu hình dùng để lấy kích thước hình ảnh tương ứng với các điểm ngắt kích thước thiết bị.
Thuộc tính layout trong mỗi hình ảnh: Thuộc tính này dùng để cho biết cách sử dụng thuộc tính deviceSizes và imageSizes cho mỗi hình ảnh. Các giá trị được hỗ trợ cho chế độ bố cục là fixed, fill, intrinsic và responsive

Khi một hình ảnh được yêu cầu với chế độ bố cục thích ứng hoặc lấp đầy, Next.js sẽ xác định hình ảnh cần phân phát dựa trên kích thước của thiết bị yêu cầu trang và đặt srcset và sizes trong hình ảnh một cách phù hợp.

Bản so sánh sau đây cho thấy cách sử dụng chế độ bố cục để kiểm soát kích thước hình ảnh trên các màn hình khác nhau. Chúng tôi đã sử dụng một hình ảnh minh hoạ được chia sẻ trong tài liệu về Next.js, xem trên điện thoại và máy tính xách tay tiêu chuẩn.

Hình ảnh được kết xuất cho nhiều bố cục
Màn hình máy tính xách tay	Màn hình điện thoại
Bố cục = Nội tại: Thu nhỏ để vừa với chiều rộng của vùng chứa trên khung nhìn nhỏ hơn. Đừng mở rộng quá kích thước nội tại của hình ảnh trên khung nhìn lớn hơn. Chiều rộng vùng chứa là 100%

Bố cục = Cố định: Hình ảnh không thích ứng. Chiều rộng và chiều cao là cố định, tương tự như phần tử "", bất kể thiết bị mà phần tử hiển thị là gì.

Bố cục = Thích ứng: Thu nhỏ hoặc tăng tỷ lệ tuỳ thuộc vào chiều rộng của vùng chứa trên các khung nhìn khác nhau, nhằm duy trì tỷ lệ khung hình.

Bố cục = Lấp đầy: Chiều rộng và chiều cao được kéo giãn để lấp đầy vùng chứa mẹ. (Chiều rộng `<div>` mẹ được đặt thành 300*500 trong ví dụ này)

Cung cấp tính năng tải từng phần tích hợp sẵn

Thành phần Hình ảnh cung cấp giải pháp tải từng phần tích hợp sẵn, hiệu quả theo mặc định. Khi sử dụng phần tử <img>, có một số tuỳ chọn để tải lười, nhưng tất cả đều có những hạn chế khiến việc sử dụng trở nên khó khăn. Nhà phát triển có thể áp dụng một trong các phương pháp tải từng phần sau đây:

Chỉ định thuộc tính loading: Thuộc tính này được hỗ trợ trên tất cả trình duyệt hiện đại.
Sử dụng Intersection Observer API: Việc xây dựng một giải pháp tải lười tuỳ chỉnh đòi hỏi bạn phải nỗ lực, thiết kế và triển khai một cách cẩn thận. Không phải lúc nào nhà phát triển cũng có thời gian để làm việc này.
Nhập thư viện bên thứ ba để tải từng phần hình ảnh: Bạn có thể phải nỗ lực thêm để đánh giá và tích hợp một thư viện bên thứ ba phù hợp để tải từng phần.

Trong thành phần Hình ảnh Next.js, quá trình tải được đặt thành "lazy" theo mặc định. Tính năng tải từng phần được triển khai bằng Intersection Observer, có trên hầu hết các trình duyệt hiện đại. Nhà phát triển không cần làm gì thêm để bật tính năng này, nhưng có thể tắt tính năng này khi cần.

Tải trước hình ảnh quan trọng

Thông thường, các phần tử LCP là hình ảnh và hình ảnh lớn có thể làm chậm LCP. Bạn nên tải trước các hình ảnh quan trọng để trình duyệt có thể khám phá hình ảnh đó sớm hơn. Khi sử dụng phần tử <img>, bạn có thể đưa gợi ý tải trước vào phần đầu HTML như sau.

<link rel="preload" as="image" href="important.png">

Một thành phần hình ảnh được thiết kế tốt phải cung cấp cách điều chỉnh trình tự tải hình ảnh, bất kể khung được sử dụng. Trong trường hợp thành phần Hình ảnh Next.js, nhà phát triển có thể chỉ định một hình ảnh phù hợp để tải trước bằng cách sử dụng thuộc tính priority của thành phần hình ảnh.

<Image src="/hero.jpg" alt="hero" height="400" width="200" priority />

Việc thêm thuộc tính priority giúp đơn giản hoá mã đánh dấu và thuận tiện hơn khi sử dụng. Nhà phát triển thành phần hình ảnh cũng có thể khám phá các tuỳ chọn để áp dụng phương pháp phỏng đoán nhằm tự động tải trước hình ảnh ở đầu trang trên những trang đáp ứng các tiêu chí cụ thể.

Khuyến khích sử dụng dịch vụ lưu trữ hình ảnh có hiệu suất cao

Bạn nên sử dụng CDN hình ảnh để tự động tối ưu hoá hình ảnh. CDN hình ảnh cũng hỗ trợ các định dạng hình ảnh hiện đại như WebP và AVIF. Theo mặc định, thành phần Hình ảnh Next.js sử dụng CDN hình ảnh bằng cấu trúc trình tải. Ví dụ sau đây cho thấy trình tải cho phép định cấu hình CDN trong tệp cấu hình Next.js.

module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://ImgApp/imgix.net',
  },
}

Với cấu hình này, nhà phát triển có thể sử dụng URL tương đối trong nguồn hình ảnh và khung sẽ liên kết URL tương đối với đường dẫn CDN để tạo URL tuyệt đối. Hệ thống hỗ trợ các CDN hình ảnh phổ biến như Imgix, Cloudinary và Akamai. Cấu trúc này hỗ trợ việc sử dụng nhà cung cấp dịch vụ đám mây tuỳ chỉnh bằng cách triển khai hàm loader tuỳ chỉnh cho ứng dụng.

Hỗ trợ hình ảnh tự lưu trữ

Có thể có trường hợp trang web không thể sử dụng CDN hình ảnh. Trong những trường hợp như vậy, thành phần hình ảnh phải hỗ trợ hình ảnh tự lưu trữ. Thành phần Hình ảnh Next.js sử dụng một trình tối ưu hoá hình ảnh làm máy chủ hình ảnh tích hợp sẵn, cung cấp một API giống như CDN. Trình tối ưu hoá sử dụng Sharp để chuyển đổi hình ảnh sản xuất nếu được cài đặt trên máy chủ. Thư viện này là một lựa chọn phù hợp cho những ai muốn xây dựng quy trình tối ưu hoá hình ảnh của riêng mình.

Hỗ trợ tính năng tải dần

Tải tiến bộ là một kỹ thuật dùng để giữ chân người dùng bằng cách hiển thị hình ảnh phần giữ chỗ thường có chất lượng thấp hơn đáng kể trong khi hình ảnh thực tế đang tải. Điều này giúp cải thiện hiệu suất được nhận thấy và nâng cao trải nghiệm người dùng. Bạn có thể sử dụng tính năng này kết hợp với tính năng tải lười cho hình ảnh ở dưới cùng hoặc ở trên cùng.

Thành phần Hình ảnh Next.js hỗ trợ tính năng tải dần cho hình ảnh thông qua thuộc tính placeholder (phần giữ chỗ). Bạn có thể sử dụng thuộc tính này làm LQIP (Phần giữ chỗ hình ảnh chất lượng thấp) để hiển thị hình ảnh chất lượng thấp hoặc bị mờ trong khi hình ảnh thực tế đang tải.

Tác động

Với tất cả các biện pháp tối ưu hoá này, chúng tôi đã gặt hái được thành công với thành phần Hình ảnh Next.js trong quá trình phát hành công khai và cũng đang làm việc với các ngăn xếp công nghệ khác trên các thành phần hình ảnh tương tự.

Khi Leboncoin di chuyển giao diện người dùng JavaScript cũ sang Next.js, họ cũng đã nâng cấp quy trình xử lý hình ảnh để sử dụng thành phần Hình ảnh Next.js. Trên một trang đã di chuyển từ <img> sang next/image, LCP giảm từ 2,4 giây xuống còn 1,7 giây. Tổng số byte hình ảnh được tải xuống cho trang đã giảm từ 663 kB xuống còn 326 kB (với khoảng 100 kB byte hình ảnh tải lười).

Bài học rút ra

Bất kỳ ai tạo ứng dụng Next.js đều có thể hưởng lợi từ việc sử dụng thành phần Hình ảnh Next.js để tối ưu hoá. Tuy nhiên, nếu bạn muốn xây dựng các bản tóm tắt hiệu suất tương tự cho một khung hoặc CMS khác, sau đây là một số bài học mà chúng tôi đã học được trong quá trình xây dựng có thể hữu ích cho bạn.

Van an toàn có thể gây hại nhiều hơn lợi

Trong bản phát hành sớm của thành phần Hình ảnh Next.js, chúng tôi đã cung cấp thuộc tính unsized cho phép các nhà phát triển bỏ qua yêu cầu về kích thước và sử dụng hình ảnh có kích thước không xác định. Chúng tôi cho rằng điều này là cần thiết trong trường hợp không thể biết trước chiều cao hoặc chiều rộng của hình ảnh. Tuy nhiên, chúng tôi nhận thấy người dùng đề xuất thuộc tính unsized trong các vấn đề về GitHub như một giải pháp toàn diện cho các vấn đề liên quan đến yêu cầu về kích thước, ngay cả trong những trường hợp họ có thể giải quyết vấn đề theo cách không làm giảm CLS. Sau đó, chúng tôi không dùng nữa và xoá thuộc tính unsized.

Tách biệt sự phiền toái vô nghĩa với sự phiền toái hữu ích

Yêu cầu về việc định cỡ hình ảnh là một ví dụ về "mức độ khó chịu hữu ích". Phương pháp này hạn chế việc sử dụng thành phần này, nhưng đổi lại mang lại các lợi ích vượt trội về hiệu suất. Người dùng sẽ sẵn sàng chấp nhận quy tắc ràng buộc này nếu họ hiểu rõ những lợi ích tiềm năng về hiệu suất. Do đó, bạn nên giải thích sự đánh đổi này trong tài liệu và các tài liệu đã xuất bản khác về thành phần.

Tuy nhiên, bạn có thể tìm thấy các giải pháp cho những vấn đề như vậy mà không làm giảm hiệu suất. Ví dụ: trong quá trình phát triển thành phần Hình ảnh Next.js, chúng tôi nhận được các khiếu nại về việc khó tra cứu kích thước cho hình ảnh được lưu trữ cục bộ. Chúng tôi đã thêm tính năng nhập hình ảnh tĩnh, giúp đơn giản hoá quy trình này bằng cách tự động truy xuất kích thước của hình ảnh trên máy tại thời điểm xây dựng bằng trình bổ trợ adb.

Cân bằng giữa các tính năng tiện lợi và tối ưu hoá hiệu suất

Nếu thành phần hình ảnh của bạn không làm gì ngoài việc gây ra "mức độ khó chịu hữu ích" cho người dùng, thì các nhà phát triển sẽ có xu hướng không muốn sử dụng thành phần đó. Chúng tôi nhận thấy rằng mặc dù các tính năng về hiệu suất như định cỡ hình ảnh và tự động tạo giá trị srcset là quan trọng nhất. Các tính năng tiện lợi dành cho nhà phát triển như tính năng tải từng phần tự động và trình giữ chỗ mờ tích hợp sẵn cũng thúc đẩy sự quan tâm đến thành phần Hình ảnh Next.js.

Thiết lập lộ trình cho các tính năng để thúc đẩy việc sử dụng

Rất khó để xây dựng một giải pháp hoạt động hoàn hảo cho mọi tình huống. Bạn có thể muốn thiết kế một thành phần phù hợp với 75% người dùng, sau đó nói với 25% còn lại rằng "trong những trường hợp này, thành phần này không dành cho bạn".

Trong thực tế, chiến lược này không phù hợp với mục tiêu của bạn với tư cách là nhà thiết kế thành phần. Bạn muốn nhà phát triển sử dụng thành phần của bạn để hưởng lợi từ các lợi ích về hiệu suất của thành phần đó. Điều này khó thực hiện nếu có một nhóm người dùng không thể di chuyển và cảm thấy bị bỏ lại phía sau trong cuộc trò chuyện. Họ có thể bày tỏ sự thất vọng, dẫn đến những nhận thức tiêu cực ảnh hưởng đến việc sử dụng.

Bạn nên có một lộ trình cho thành phần của mình sao cho bao gồm mọi trường hợp sử dụng hợp lý về lâu dài. Điều này cũng giúp nêu rõ ràng trong tài liệu về những gì không được hỗ trợ và lý do tại sao để đặt kỳ vọng về các vấn đề mà thành phần dự định giải quyết.

Kết luận

Việc sử dụng và tối ưu hoá hình ảnh rất phức tạp. Nhà phát triển phải tìm được sự cân bằng giữa hiệu suất và chất lượng hình ảnh, đồng thời đảm bảo mang lại trải nghiệm chất lượng cao cho người dùng. Điều này khiến việc tối ưu hoá hình ảnh trở thành giải pháp có chi phí cao và có tác động lớn.

Thay vì mỗi ứng dụng phải tự phát minh lại mỗi lần, chúng tôi đã tạo một mẫu các phương pháp hay nhất mà nhà phát triển, khung và các ngăn xếp công nghệ khác có thể sử dụng làm tài liệu tham khảo cho việc triển khai của riêng họ. Trải nghiệm này thực sự sẽ có giá trị khi chúng tôi hỗ trợ các khung hình khác trên các thành phần hình ảnh của chúng.

Thành phần Hình ảnh Next.js đã cải thiện thành công hiệu suất trong các ứng dụng Next.js, nhờ đó nâng cao trải nghiệm người dùng. Chúng tôi tin rằng đây là một mô hình hiệu quả và phù hợp với hệ sinh thái rộng lớn hơn. Chúng tôi rất mong nhận được ý kiến của những nhà phát triển muốn áp dụng mô hình này trong dự án của họ.