Sử dụng CDN hình ảnh để tối ưu hoá hình ảnh

Jeremy Wagner
Katie Hempenius
Katie Hempenius
X
Barry Pollard

Mạng phân phối nội dung hình ảnh (CDN) rất hiệu quả trong việc tối ưu hoá hình ảnh cho web. Việc chuyển trang web của bạn sang CDN hình ảnh có thể giúp bạn tiết kiệm 40 – 80% kích thước tệp hình ảnh và trong hầu hết các trường hợp, hình ảnh có thể tối ưu hoá hình ảnh hiệu quả hơn so với tập lệnh tối ưu hoá hình ảnh tại thời điểm tạo bản dựng.

CDN hình ảnh là gì?

CDN hình ảnh chuyên chuyển đổi, tối ưu hoá và phân phối hình ảnh. Bạn cũng có thể coi chúng là các API để truy cập và chỉnh sửa các hình ảnh dùng trên trang web. Đối với hình ảnh được tải từ CDN hình ảnh, URL hình ảnh không chỉ cho biết hình ảnh nào cần tải, mà còn cho biết các thông số như kích thước, định dạng và chất lượng. Điều này cho phép bạn tạo các biến thể của một hình ảnh cho các trường hợp sử dụng khác nhau.

Cho biết luồng yêu cầu/phản hồi giữa CDN của hình ảnh và ứng dụng. Các thông số như kích thước và định dạng được dùng để yêu cầu biến thể của cùng một hình ảnh.
Ví dụ về chuyển đổi CDN hình ảnh có thể hoạt động dựa trên các tham số trong URL hình ảnh.

CDN hình ảnh khác với các tập lệnh tối ưu hoá hình ảnh tại thời điểm tạo ở chỗ chúng tạo các phiên bản hình ảnh mới khi cần thiết. Do đó, thường thì CDN phù hợp hơn để tạo hình ảnh được tuỳ chỉnh nhiều cho từng khách hàng so với tập lệnh bản dựng.

Cách CDN hình ảnh sử dụng URL để cho biết các lựa chọn tối ưu hoá

URL hình ảnh mà CDN hình ảnh sử dụng truyền tải thông tin quan trọng về hình ảnh, cũng như các hành động chuyển đổi và tối ưu hoá cần áp dụng cho hình ảnh đó. Các định dạng URL khác nhau tuỳ thuộc vào CDN của hình ảnh mà bạn đang sử dụng, nhưng nhìn chung, tất cả đều có các tính năng tương tự nhau. Sau đây là một số tính năng phổ biến nhất.

URL hình ảnh thường bao gồm các thành phần sau: nguồn gốc, hình ảnh, khoá bảo mật và các phép biến đổi.
Các phần cơ bản của URL hình ảnh trong CDN hình ảnh.

Điểm gốc

CDN hình ảnh có thể hoạt động trên miền của riêng bạn hoặc miền của CDN hình ảnh của bạn. Các CDN hình ảnh của bên thứ ba thường cung cấp lựa chọn sử dụng một miền tuỳ chỉnh có tính phí. Việc sử dụng miền của riêng bạn giúp bạn dễ dàng chuyển đổi các CDN hình ảnh sau này vì bạn không cần thay đổi URL.

Ví dụ trước sử dụng miền của CDN hình ảnh ("example-choice.com") với một miền con được cá nhân hoá thay vì miền tuỳ chỉnh.

Bài đăng có hình ảnh

Bạn thường có thể định cấu hình CDN hình ảnh để tự động truy xuất hình ảnh từ các vị trí hiện có khi cần. Bạn thường có được khả năng này bằng cách đưa URL hoàn chỉnh của hình ảnh hiện có vào trong URL cho hình ảnh do CDN hình ảnh tạo. Ví dụ: bạn có thể thấy một URL có dạng như sau: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto. URL này sẽ truy xuất và tối ưu hoá hình ảnh có trong https://flowers.com/daisy.jpg.

Định dạng tệp yêu cầu (trong ví dụ là JPG) có thể không giống với định dạng tệp hình ảnh được trả về (trong ví dụ là WebP). Tiêu đề HTTP content-type cho trình duyệt biết định dạng của URL để có thể xử lý URL một cách phù hợp. Việc này có thể gây nhầm lẫn nếu tệp được lưu vào ổ đĩa và được một chương trình khác sử dụng với mong muốn định dạng phải khớp với đuôi tệp.

Một cách được hỗ trợ rộng rãi khác để tải hình ảnh lên CDN hình ảnh là gửi hình ảnh trong yêu cầu POST qua HTTP đến API của CDN của hình ảnh.

Khoá bảo mật

Khoá bảo mật ngăn người khác tạo phiên bản mới cho hình ảnh của bạn. Khi bật tính năng này, mỗi phiên bản mới của hình ảnh sẽ yêu cầu một khoá bảo mật duy nhất.

Nếu ai đó cố gắng thay đổi các tham số của URL hình ảnh nhưng không cung cấp khoá bảo mật hợp lệ, thì họ sẽ không thể tạo phiên bản mới. CDN hình ảnh sẽ xử lý chi tiết việc tạo và theo dõi khoá bảo mật cho bạn.

Phép biến đổi

CDN hình ảnh cung cấp hàng chục và trong một số trường hợp là hàng trăm lần biến đổi hình ảnh. Các phép biến đổi này được chỉ định trong chuỗi URL và không có quy định hạn chế nào đối với việc sử dụng nhiều phép biến đổi cùng lúc. Đối với hiệu suất trên web, những yếu tố chuyển đổi quan trọng nhất đối với hình ảnh là kích thước, mật độ pixel, định dạng và độ nén. Những sự biến đổi này là lý do khiến việc chuyển sang CDN hình ảnh thường làm cho tệp hình ảnh trên trang web của bạn nhỏ hơn.

Vì thường có một chế độ cài đặt tốt nhất về mặt khách quan cho các hoạt động chuyển đổi hiệu suất, nên một số CDN hình ảnh hỗ trợ chế độ "tự động" cho các hoạt động biến đổi này. Ví dụ: thay vì chỉ định rằng hình ảnh phải được chuyển đổi sang định dạng WebP, bạn có thể để CDN tự động chọn và phân phát định dạng tối ưu. CDN hình ảnh có thể xác định cách tốt nhất để chuyển đổi hình ảnh bằng cách sử dụng các tín hiệu sau đây, cùng với các tín hiệu khác:

Ví dụ: CDN hình ảnh có thể phân phát AVIF cho trình duyệt Chrome, WebP cho trình duyệt Edge và JPEG cho một trình duyệt rất cũ. Chế độ cài đặt tự động phổ biến vì chúng cho phép bạn tận dụng kiến thức chuyên môn của CDN hình ảnh trong việc tối ưu hoá hình ảnh mà không cần thay đổi mã để áp dụng các công nghệ mới khi CDN hình ảnh bắt đầu hỗ trợ các chế độ đó.

Các loại CDN hình ảnh

Có hai loại CDN hình ảnh chính: tự quản lý và do bên thứ ba quản lý.

CDN hình ảnh tự quản lý

Các CDN tự quản lý có thể là lựa chọn phù hợp cho những trang web có nhân viên kỹ thuật có thể thoải mái tự duy trì cơ sở hạ tầng của riêng mình.

CDN hình ảnh của bên thứ ba

Các CDN hình ảnh của bên thứ ba cung cấp CDN hình ảnh dưới dạng một dịch vụ. Tương tự như cách các nhà cung cấp dịch vụ đám mây cung cấp máy chủ và cơ sở hạ tầng khác có tính phí, CDN hình ảnh cũng cung cấp tính năng tối ưu hoá và phân phối hình ảnh có tính phí. Vì CDN hình ảnh của bên thứ ba duy trì công nghệ cơ bản, nên bạn thường có thể bắt đầu sử dụng công nghệ này khá nhanh, mặc dù quá trình di chuyển toàn bộ cho một trang web lớn có thể mất nhiều thời gian hơn. Các CDN hình ảnh của bên thứ ba thường được định giá dựa trên cấp sử dụng, trong đó hầu hết các CDN hình ảnh đều cung cấp cấp miễn phí hoặc bản dùng thử miễn phí để bạn có thể dùng thử sản phẩm của họ.

Chọn CDN hình ảnh

Có nhiều lựa chọn tốt cho CDN hình ảnh. Một số tính năng có nhiều tính năng hơn các tính năng khác, nhưng bất kỳ tính năng nào trong số đó cũng có thể giúp bạn tiết kiệm byte trên hình ảnh và nhờ đó tải trang nhanh hơn. Bên cạnh các bộ tính năng, những yếu tố khác cần cân nhắc khi chọn CDN hình ảnh là chi phí, khả năng hỗ trợ, tài liệu và khả năng thiết lập hoặc di chuyển dễ dàng.

Ảnh hưởng đối với thời gian hiển thị nội dung lớn nhất (LCP)

Hình ảnh là một phần thiết yếu trong trải nghiệm người dùng trên nhiều trang web, vì vậy, hình ảnh là yếu tố quan trọng trong Thời gian hiển thị nội dung lớn nhất của trang web. Dưới đây là một vài điều cần lưu ý nếu bạn quyết định sử dụng CDN hình ảnh:

  • Hình ảnh được phân phát từ CDN có thể đến từ một máy chủ nhiều nguồn gốc, nhờ đó có thể làm tăng thời gian thiết lập kết nối của trang web. Khi có thể, hãy cố gắng sử dụng CDN của hình ảnh proxy thông qua nguồn gốc chính để bạn không thêm nguồn gốc khác để trình duyệt kết nối. Điều này có tác dụng tương tự như hình ảnh tự lưu trữ trên nguồn gốc chính.
  • Hãy cân nhắc sử dụng giá trị thuộc tính fetchpriority của "high" cho phần tử hình ảnh LCP để trình duyệt có thể bắt đầu tải hình ảnh đó càng sớm càng tốt.
  • Nếu không thể tìm thấy một hình ảnh ngay lập tức trong HTML ban đầu, hãy cân nhắc sử dụng gợi ý rel=preload cho hình ảnh đề xuất LCP của bạn để trình duyệt có thể tải trước hình ảnh đó.
  • Nếu bạn không thể proxy thông qua nguồn gốc của mình và trình duyệt sẽ không biết cần tải hình ảnh nào cho đến sau này khi tải trang, hãy thiết lập kết nối với CDN hình ảnh trên nhiều nguồn gốc càng sớm càng tốt để rút ngắn giai đoạn tải tài nguyên cho hình ảnh đề xuất LCP tiềm năng.