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

Jeremy Wagner
Katie Hempenius
Katie Hempenius
X
Barry Pollard

Tại sao bạn nên sử dụng CDN hình ảnh?

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. Việc chuyển sang CDN hình ảnh có thể giúp tiết kiệm 40–80% kích thước tệp hình ảnh. Trên lý thuyết, bạn có thể đạt được kết quả tương tự chỉ bằng cách sử dụng tập lệnh bản dựng, nhưng trong thực tế thì trường hợp này hiếm khi xảy ra.

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 hình ảnh được dùng trên trang web của mình. Đố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 giúp bạn dễ dàng 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 xây dựng ở chỗ chúng tạo các phiên bản hình ảnh mới khi cần thiết. Do đó, CDN thường phù hợp hơn để tạo hình ảnh được tuỳ chỉnh nhiều cho từng khách hàng riêng lẻ 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 đó. Định dạng URL sẽ khác nhau tuỳ thuộc vào CDN của hình ảnh, nhưng ở cấp độ cao, tất cả chúng đều có các tính năng tương tự nhau. Hãy cùng tìm hiểu 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.

Đ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. CDN hình ảnh của bên thứ ba thường cung cấp lựa chọn sử dụng miền tuỳ chỉnh có tính phí. Việc sử dụng miền của riêng bạn giúp việc chuyển đổi CDN hình ảnh sau này trở nên dễ dàng hơn vì bạn không cần thay đổi URL.

Ví dụ ở trên sử dụng miền của CDN hình ảnh ("example-CDN2.com") với một miền con được cá nhân hoá thay vì một 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ừ vị trí hiện tại khi cần. Bạn thường có được khả năng này bằng cách thêm 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.

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 qua 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. Nếu bạn bật tính năng này, thì 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ệ, họ sẽ không thể tạo phiên bản mới. CDN hình ảnh của bạn sẽ xử lý thông tin chi tiết về 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 cách chuyển đổi hình ảnh. Những quy tắc chuyển đổi này được chỉ định thông qua chuỗi URL và không có quy định hạn chế nào đối với việc sử dụng nhiều quy tắc chuyển đổi cùng một lúc. Khi xét đến hiệu suất web, những chuyển đổi quan trọng nhất về kích thước, mật độ pixel, định dạng và độ nén là những thay đổi quan trọng nhất đối với hình ảnh. Những sự biến đổi này là lý do tại sao việc chuyển sang CDN hình ảnh thường làm giảm đáng kể kích thước hình ảnh.

Thường thì có một chế độ cài đặt tốt nhất về mặt khách quan cho việc chuyển đổi hiệu suất. Vì vậy, một số CDN hình ảnh hỗ trợ chế độ "tự động" cho những hoạt động chuyể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ể cho phép CDN tự động chọn và phân phát định dạng tối ưu. Các tín hiệu mà CDN hình ảnh có thể sử dụng để xác định cách tốt nhất để chuyển đổi hình ảnh bao gồm:

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 rất phổ biến vì chúng cho phép bạn tận dụng kiến thức chuyên môn quan trọng 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ông nghệ mới sau khi được CDN hình ảnh hỗ trợ.

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

CDN hình ảnh có thể được chia thành hai loại: 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à một 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ự quản lý 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ụ. Giống như việ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ì các CDN hình ảnh của bên thứ ba duy trì công nghệ cơ bản, nên việc bắt đầu khá đơn giản và thường có thể hoàn thành trong vòng 10 đến 15 phút, mặc dù việc di chuyển toàn bộ một trang web lớn có thể mất nhiều thời gian hơn. 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 cung cấp cấp miễn phí hoặc ưu đãi dùng thử miễn phí để bạn có cơ hội 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 sẽ có nhiều tính năng hơn các tính năng khác, nhưng tất cả các tính năng này có thể sẽ giúp bạn tiết kiệm byte trên hình ảnh và do đó tải trang nhanh hơn. Bên cạnh bộ tính năng, các yếu tố khác cần xem xét 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.

Hãy tự mình dùng thử các tính năng đó trước khi ra quyết định cũng có thể giúp ích cho bạn. Ở bên dưới, bạn có thể tìm thấy các lớp học lập trình kèm theo hướng dẫn về cách bắt đầu nhanh với một số CDN hình ảnh.

Ả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 quan trọng trong trải nghiệm người dùng trên nhiều trang web. Do đó, hình ảnh cũng ảnh hưởng đến hiệu quả hoạt động của các trang web đối với Thời gian hiển thị nội dung lớn nhất. 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:

  1. Hình ảnh được phân phát từ các mạng phân phối nội dung (CDN) có thể đến từ một máy chủ nhiều nguồn gốc, điều này làm tăng thời gian thiết lập kết nối. Khi có thể, hãy cố gắng sử dụng CDN hình ảnh phân phối 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.
  2. Hãy cân nhắc sử dụng giá trị thuộc tính fetchpriority là "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.
  3. Nếu không 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 đó.
  4. Nếu không thể proxy thông qua nguồn gốc của bạn và hình ảnh chính xác cần tải sẽ không được xác định cho đến sau này trong khi tải trang, bạn nên 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 của những gì có thể là hình ảnh đề xuất LCP cho trang của bạn.

CDN hình ảnh là công cụ không thể thiếu giúp loại bỏ các công việc tối ưu hoá hình ảnh theo cách thủ công và nên được cân nhắc. Tuy nhiên, như thường lệ, bạn cần cân nhắc một số yếu tố đánh đổi và cần chú ý đến hình ảnh đề xuất LCP trên trang web của mình, đồng thời thêm gợi ý khi thích hợp có thể giúp giảm thiểu độ trễ đối với các yêu cầu chính đó.