Mạng phân phối nội dung (CDN) hình ảnh là một công cụ tuyệt vời để tối ưu hoá hình ảnh cho web. Việc chuyển trang web 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, CDN 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 xây 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 các API này là API để truy cập và thao tác với hình ảnh được dùng trên trang web của bạn. Đố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 tham số như kích thước, định dạng và chất lượng. Nhờ đó, bạn có thể tạo các biến thể của một hình ảnh cho nhiều trường hợp sử dụng.
CDN hình ảnh khác với 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 ra các phiên bản hình ảnh mới khi cần. Do đó, CDN thường phù hợp hơn để tạo hình ảnh được tuỳ chỉnh nhiều cho từng ứng dụng khách 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 tùy chọn tối ưu hoá
URL hình ảnh mà CDN hình ảnh sử dụng sẽ truyền tải thông tin quan trọng về hình ảnh cũng như các phép biến đổi và tối ưu hoá cần áp dụng cho hình ảnh đó. Định dạng URL thay đổi tuỳ thuộc vào CDN hình ảnh mà bạn đang sử dụng, nhưng ở cấp độ cao, tất cả đều có các tính năng tương tự. Sau đây là một số tính năng phổ biến nhất.
Điểm gốc
CDN hình ảnh có thể nằm trên miền của riêng bạn hoặc miền của CDN hình ảnh. 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 riêng giúp bạn dễ dàng chuyển đổi CDN hình ảnh sau này vì không cần thay đổi URL.
Ví dụ trước sử dụng miền của CDN hình ảnh ("example-cdn.com") với một miền con được cá nhân hoá, thay vì miền tuỳ chỉnh.
Hình ảnh
CDN hình ảnh thường có thể được định cấu hì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ó thể đạt đượ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 URL của hình ảnh do CDN hình ảnh tạo ra. 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ó tại https://flowers.com/daisy.jpg.
Định dạng tệp được yêu cầu (JPG, trong ví dụ) có thể không giống với định dạng tệp hình ảnh được trả về (WebP, trong ví dụ). Tiêu đề HTTP content-type cho trình duyệt biết định dạng của URL để trình duyệt có thể xử lý URL đó một cách phù hợp. Điều 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, trong khi chương trình đó yêu cầu định dạng phải khớp với đuôi tệp.
Một cách khác được hỗ trợ rộng rãi để tải hình ảnh lên CDN hình ảnh là gửi hình ảnh trong yêu cầu POST HTTP đến API của CDN 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 đều cần có một khoá bảo mật riêng biệ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 của bạn sẽ xử lý các 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 phép biến đổi hình ảnh khác nhau. 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 về việc sử dụng nhiều phép biến đổi cùng một lúc. Đối với hiệu suất web, các phép biến đổi hình ảnh quan trọng nhất là kích thước, mật độ điểm ảnh, định dạng và độ nén. Những phép 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 cho các phép biến đổi hiệu suất, nên một số CDN hình ảnh hỗ trợ chế độ "tự động" cho các phép biến đổi này. Ví dụ: thay vì chỉ định rằng hình ảnh đượ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. CDN hình ảnh có thể xác định cách tốt nhất để biến đổi hình ảnh bằng cách sử dụng các tín hiệu sau, cùng với các tín hiệu khác:
- Client hints (ví dụ: chiều rộng khung nhìn, DPR và chiều rộng hình ảnh)
- Tiêu đề
Save-Data - Tiêu đề yêu cầu User-Agent
- Network Information API
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 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 khi CDN hình ảnh bắt đầu hỗ trợ các công nghệ đó.
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ý
CDN tự quản lý có thể là một lựa chọn phù hợp cho các trang web có đội ngũ kỹ sư có thể tự duy trì cơ sở hạ tầng của riêng họ.
- Thumbor là CDN hình ảnh tự quản lý phổ biến nhất. Đây là một công cụ nguồn mở và miễn phí, nhưng có ít tính năng hơn hầu hết các CDN thương mại và tài liệu của công cụ này có phần hạn chế. Các trang web sử dụng thumbor bao gồm Wikipedia, Square, và 99designs. Hãy xem bài viết Cách cài đặt CDN hình ảnh Thumbor để biết hướng dẫn thiết lập.
- Imaginary
- Imagor
CDN hình ảnh của bên thứ ba
CDN hình ảnh của bên thứ ba cung cấp CDN hình ảnh dưới dạng 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 cung cấp dịch vụ 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 một CDN khá nhanh, mặc dù quá trình di chuyển hoàn toàn cho 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ác cấp sử dụng, trong đó hầu hết 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 dùng thử sản phẩm của họ.
Chọn một CDN hình ảnh
Có nhiều lựa chọn tốt cho CDN hình ảnh. Một số công cụ có nhiều tính năng hơn những công cụ khác, nhưng bất kỳ công cụ nào cũng có thể 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 các nhóm tính năng, các yếu tố khác cần xem xét khi chọn một CDN hình ảnh là chi phí, dịch vụ hỗ trợ, tài liệu và mức độ dễ dàng thiết lập hoặc di chuyển.
Ảnh hưởng đến Nội dung lớn nhất hiển thị (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, vì vậy, hình ảnh là một yếu tố quan trọng trong chỉ số Nội dung lớn nhất hiển thị của trang web. Sau đâ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ủ khác nguồn gốc, điều này 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 hình ảnh làm proxy thông qua nguồn gốc chính để không thêm các nguồn gốc khác cho trình duyệt kết nối. Việc này có tác dụng tương tự như việc tự lưu trữ hình ảnh trên nguồn gốc chính.
- Cân nhắc sử dụng giá trị thuộc tính
fetchprioritycủa"high"trên 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 hình ảnh không thể được phát hiện ngay trong HTML ban đầu, hãy cân nhắc sử dụng gợi ý
rel=preloadcho hình ảnh đề xuất LCP để trình duyệt có thể tải hình ảnh đó trước. - 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 hình ảnh nào cần tải cho đến khi tải trang, hãy thiết lập kết nối với CDN hình ảnh khác 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 các hình ảnh có thể là LCP (Nội dung lớn nhất hiển thị).