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 bao gồm các phương pháp hay nhất về hiệu suất và cung cấp giải pháp sẵn sàng để tối ưu hoá hình ảnh.

Leena Sohoni

Kara Erickson

Alex Castle

Hình ảnh là một nguồn nút thắt cổ chai thường gặp về hiệu suất của các ứng dụng web và là trọng tâm chính để tối ưu hoá. Hình ảnh không được tối ưu hoá gây ra tình trạng đầy trang và hiện chiếm hơn 70% tổng trọng lượng trang tính bằng byte ở phân vị thứ 90. Có nhiều cách để tối ưu hoá hình ảnh 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.

Nhóm Aurora đã làm việc với Next.js để tạo 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à chúng tôi cũng đang làm việc với Angular trong việc tối ưu hoá hình ảnh trong các phiên bản sau này. 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 rút ra được trong quá trình thực hiện.

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 khi tối ưu hoá hình ảnh

Hình ảnh không chỉ ảnh hưởng đến hiệu suất mà còn tác động đến doanh nghiệp. Số lượng hình ảnh trên một trang là chỉ số dự đoán lớn thứ hai về số 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ó hình ảnh ít hơn 38% so với những phiên mà họ không chuyển đổi. 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 về trang web trong quá trình kiểm tra các phương pháp hay nhất. 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 không có kích thước ảnh hưởng đến CLS (Điểm số tổng hợp về mức thay đổi bố cục)

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 bố cục 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 được 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 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 kích thước hình ảnh một cách thích ứng mà vẫn ngăn chặn CLS.

Hình ảnh lớn có thể ảnh hưởng đến LCP

Kích thước tệp hình ảnh càng lớn thì càng mất nhiều thời gian để tải xuống. Hình ảnh lớn có thể là hình ảnh "chính" cho trang hoặc là thành phần 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 khả năng nén tốt hơn và sử dụng hình ảnh đáp ứng. Các 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àn hình phù hợp dựa trên kích thước và độ phân giải màn hình.

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. Tính năng nén tốt hơn giúp giảm kích thước tệp từ 25% đến 50% trong một số trường hợp đối với cùng chất lượng hình ảnh. Sự giảm thiểu 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 các đị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ẽ ảnh hưởng đến LCP

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

Thử thách 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ước đó và triển khai các giải pháp theo phương pháp hay nhất để khắc phục chúng. 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 tốc độ web. Nguyên nhân dẫn đến sự khác biệt này có thể là:

Mức độ ưu tiên: Nhà phát triển web thường có xu hướng tập trung vào mã, JavaScript và tối ưu hóa dữ liệu. Do đó, họ có thể không biết 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 nằm ở vị trí cao trong danh sách mức độ ưu tiên.
Giải pháp tích hợp sẵn: Ngay cả khi các nhà phát triển đã nhận thức được những sắc thái của việc tối ưu hoá hình ảnh, 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 yếu tố cản trở họ.
Hình ảnh linh hoạt: Ngoài hình ảnh tĩnh thuộc ứng dụng, hình ảnh linh hoạt còn do người dùng tải lên hoặc lấy từ cơ sở dữ liệu hoặc CMS bên ngoài. Có thể khó xác định kích thước của những hình ảnh như vậy, trong đó nguồn hình ảnh có thể thay đổi.
Quá tải đánh dấu: Các giải pháp để bao gồm kích thước hình ảnh hoặc srcset cho các kích thước khác nhau yêu cầu đánh dấu bổ sung cho mỗi hình ảnh, điều này có thể mất nhiều thời gian. Thuộc tính srcset ra mắt vào năm 2014 nhưng chỉ có 26,5% các trang web hiện nay sử dụng thuộc tính này. 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ể hữu ích nhưng phải được 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 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ợ. 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 đến tất cả các trình duyệt.
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. Việc chọn ra phiên bản phù hợp nhất có thể là một việc không hề dễ dàng. Nhà phát triển cũng có thể không biết được khoảng cách tốt nhất từ "đường gập" để tải hình ảnh bị trì hoãn. Việc có nhiều kích thước khung nhìn trên các thiết bị có thể khiến vấn đề này trở nên phức tạp hơn.
Thay đổi ngang: Khi các trình duyệt bắt đầu hỗ trợ các tính năng mới của HTML hoặc CSS để nâng cao hiệu suất, các nhà phát triển có thể gặp khó khăn khi đánh giá từng tính năng này. Ví dụ: Chrome sắp 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. Có thể dùng để tăng mức độ ưu tiên của những hình ảnh cụ thể trên trang. Nhìn chung, các nhà phát triển sẽ thấy dễ dàng hơn nếu đánh giá và triển khai những cải tiến như vậy ở cấp thành phần.

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

Những cơ hội hiện có để tối ưu hoá hình ảnh và những thách thức khi triển khai riêng từng hình ảnh cho mọi ứng dụng đã giúp chúng tôi nghĩ ra ý 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 vấn đề về hiệu suất hình ảnh một cách hiệu quả hơn.

Trong năm qua, chúng tôi đã làm việc với khung Next.js để thiết kế và implement thành phần hình ảnh của khung. Bạn có thể dùng thành phần 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 nói chung thông qua một tập hợp phong phú các tính năng và nguyên tắc. API này cũng bao gồm các lựa chọn cho phép nhà phát triển tuỳ chỉnh mẫu quảng cáo theo nhiều yêu cầu về hình ảnh.

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

Như đã thảo luận trước đó, hình ảnh không có kích thước sẽ làm thay đổi bố cục và góp phần vào 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 để tránh thay đổi bố cục. Nếu không xác định kích thước, nhà phát triển phải chỉ định layout=fill để phân phát hình ảnh chưa xác định kích thước nằm 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 xây dựng và đưa hình ảnh đó 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 chưa xác định kích thước, nên thiết kế đảm bảo rằng họ sẽ dành thời gian để xem xét việc định kích thước hình ảnh và tránh thay đổi bố cục.

Hỗ trợ khả năng phản hồi

Để hình ảnh thích ứng trên nhiều 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 ta muốn giảm 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 để đặt các giá trị thuộc tính chỉ một lần cho mỗi ứng dụng. Chúng tôi áp dụng các mẫu này cho mọi phiên bản của thành phần Hình ảnh dựa trên chế độ bố cục. Chúng tôi đã đưa ra giải pháp gồm 3 phần:

Thuộc tính deviceSizes: Thuộc tính này có thể dùng để định cấu hình các điểm ngắt một lần dựa trên những thiết bị phổ biến cho cơ sở người dùng ứng dụng. Giá trị mặc định cho các điểm ngắt được đưa vào tệp cấu hình.
Thuộc tính imageSizes: Đây cũng là 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. 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 đáp ứng hoặc điền, 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 thích hợp.

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 hình ảnh minh hoạ được chia sẻ trong tài liệu về Next.js. Hình ảnh này được xem trên điện thoại và máy tính xách tay tiêu chuẩn.

Hình ảnh kết xuất cho các bố cục khác nhau
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. Không mở rộng ra ngoài 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 = Đã sửa: Hình ảnh không thích ứng. Chiều rộng và chiều cao được cố định tương tự như phần tử "", bất kể phần tử đó được kết xuất trên thiết bị nào.

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, 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ẹ. (Cha mẹ ` ` chiều rộng được đặt là 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ả làm giải pháp mặc định. Khi sử dụng phần tử <img>, có một số tuỳ chọn gốc cho việc tải từng phần, nhưng tất cả đều có những hạn chế khiến người dùng khó sử dụng. 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 dễ triển khai nhưng hiện không được hỗ trợ trên một số trình duyệt.
Sử dụng Intersection Observer API: Việc xây dựng giải pháp tải từng phần tuỳ chỉnh đòi hỏi công sức cũng như quá trình thiết kế và triển khai tỉ mỉ. 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 của bên thứ ba vào hình ảnh tải từng phần: Bạn có thể cần thêm nỗ lực để đá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 bắt buộc phải làm gì thêm để bật tính năng này nhưng có thể tắt khi cần.

Tải trước cá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ể trì hoãn LCP. Bạn nên tải trước các hình ảnh quan trọng để trình duyệt có thể phát hiện 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">

Thành phần hình ảnh được thiết kế hợp lý 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ỉ ra một hình ảnh nên 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 lựa chọn để áp dụng thông tin phỏng đoán để tự động tải trước cho những hình ảnh trong màn hình đầu tiên trên trang đáp ứng các tiêu chí cụ thể.

Khuyến khích 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 và chúng cũng hỗ trợ các định dạng hình ảnh hiện đại như WebP và AVIF. Thành phần Hình ảnh Next.js sử dụng CDN hình ảnh theo mặc định bằng cách sử dụ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ẽ nối 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 một nhà cung cấp dịch vụ đám mây tuỳ chỉnh bằng cách triển khai một hàm loader tuỳ chỉnh cho ứng dụng.

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

Có thể có những trường hợp mà 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 trình tối ưu hóa hình ảnh làm máy chủ hình ảnh tích hợp sẵn cung cấp API giống CDN. Trình tối ưu hoá sử dụng Sharp để chuyển đổi hình ảnh chính thức nếu được cài đặt trên máy chủ. Thư viện này là một lựa chọn hiệu quả 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ải liên tục

Tải liên tục là một kỹ thuật dùng để duy trì sự quan tâm của 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ế tải. Điều này giúp cải thiện hiệu suất cảm nhận được và nâng cao trải nghiệm người dùng. Bạn có thể sử dụng công cụ này kết hợp với tính năng tải từng phần cho hình ảnh dưới màn hình đầu tiên hoặc hình ảnh trong màn hình đầu tiên.

Thành phần Hình ảnh Next.js hỗ trợ tải dần cho hình ảnh thông qua thuộc tính placeholder. Bạn có thể dùng tính năng 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 hình ảnh bị mờ trong khi tải hình ảnh thực tế.

Mức độ tác động

Với tất cả các tính năng tối ưu hoá ở trên được kết hợp, chúng tôi đã đạt được thành công với thành phần Hình ảnh Next.js trong phiên bản chính thức 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 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 nội dung tiếp theo/hình ảnh, LCP đã giảm từ 2,4 giây xuống 1,7 giây. Tổng số byte hình ảnh được tải xuống cho trang đã tăng từ 663kB lên 326kB (với ~ 100kB byte hình ảnh tải từng phần).

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, chúng tôi đã rút ra một số bài học có thể hữu ích cho bạn sau đây.

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

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 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 nghĩ điều này là cần thiết trong những 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 khuyến nghị thuộc tính unsized trong các vấn đề về GitHub như một giải pháp tổng hợp cho các vấn đề liên quan đến yêu cầu về kích thước, ngay cả khi họ có thể giải quyết vấn đề theo cách không làm giảm CLS (Điểm số tổng hợp về mức thay đổi bố cục). Sau đó, chúng tôi đã ngừng sử dụng và xoá thuộc tính unsized.

Tách biệt phiền hà hữu ích khỏi phiền toái vô nghĩa

Yêu cầu về kích thước hình ảnh là một ví dụ về "sự phiền hà hữu ích". Phương thức này hạn chế việc sử dụng thành phần, nhưng đổi lại, nó mang lại những lợi ích về hiệu suất vượt trội. Người dùng sẽ sẵn sàng chấp nhận quy tắc ràng buộc nếu họ hiểu rõ về những lợi ích tiềm năng của hiệu suất. Do đó, chúng tôi cầ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 giải pháp cho những phiền toái 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 khiếu nại rằng việc tra cứu kích thước cho các hình ảnh được lưu trữ cục bộ gây khó chịu. 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 nhờ tự động truy xuất kích thước cho hình ảnh cục bộ tại thời điểm xây dựng bằng trình bổ trợ CameraX.

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

Nếu thành phần hình ảnh của bạn không có chức năng gì khác ngoài việc gây "nhiệt độ hữu ích" cho người dùng, nhà phát triển có xu hướng không muốn sử dụng thành phần đó. Chúng tôi nhận thấy 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ự động tải từng phần và phần 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 để tăng tỷ lệ 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ể bị cuốn hút vào việc thiết kế một thứ gì đó hoạt động tốt cho 75% người dùng và sau đó nói với 25% người còn lại rằng "trong những trường hợp này, thành phần này không phù hợp với bạn".

Trong thực tế, chiến lược này hoá ra xung đột với mục tiêu của bạn với tư cách là một nhà thiết kế thành phần. Bạn muốn nhà phát triển áp 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ị tách khỏi cuộc trò chuyện. Trẻ có nhiều khả năng sẽ thể hiện sự thất vọng, từ đó có những nhận thức tiêu cực làm ảnh hưởng đến việc áp dụng.

Bạn nên có lộ trình cho thành phần của mình bao gồm tất cả 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õ trong tài liệu về những nội dung không được hỗ trợ và lý do để đưa ra kỳ vọng về các vấn đề mà thành phần này 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 cân bằng giữa hiệu suất và chất lượng của hình ảnh, trong khi vẫn đảm bảo người dùng có được trải nghiệm tuyệt vời. Điều này khiến việc tối ưu hoá hình ảnh trở thành một công việc tốn nhiều chi phí và có tác động lớn.

Thay vì mỗi lần ứng dụng lại phải đổi mới, chúng tôi đã tạo ra một mẫu các phương pháp hay nhất mà nhà phát triển, khung ứng dụng và các nhóm công nghệ khác có thể tham khảo cho cách triển khai của riêng họ. Trải nghiệm này thực sự sẽ hữu ích khi chúng tôi hỗ trợ các khung khác trên 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 kết quả 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 tuyệt vời, sẽ hoạt động hiệu quả trong hệ sinh thái rộng lớn hơn và chúng tôi muốn nghe ý kiến của các nhà phát triển muốn áp dụng mô hình này trong các dự án của họ.