Có thể bạn đã quen thuộc với khái niệm cốt lõi về mạng phân phối nội dung (CDN): một mạng lưới được phân phối nhưng kết nối với nhau phân phối nội dung cho người dùng một cách nhanh chóng và hiệu quả. Khi một tệp được tải lên một nhà cung cấp CDN, một bản sao sẽ được tạo trên các nút khác của mạng CDN trên khắp thế giới. Khi người dùng yêu cầu tệp, dữ liệu sẽ được nút gửi theo khu vực địa lý gần người dùng đó nhất, giúp giảm độ trễ. Bản chất phân tán của CDN cũng cung cấp khả năng dự phòng trong trường hợp mạng bị ngừng dịch vụ hoặc lỗi phần cứng và cân bằng tải để giảm thiểu mức tăng đột biến về lưu lượng truy cập.
Mạng phân phối nội dung (CDN) của hình ảnh có thể mang lại tất cả những lợi ích này, chỉ với một điểm khác biệt chính là khả năng chuyển đổi và tối ưu hoá nội dung của hình ảnh dựa trên chuỗi mà URL được sử dụng để truy cập hình ảnh đó.
Người dùng sẽ tải một hình ảnh chuẩn có độ phân giải cao lên cho nhà cung cấp. Việc này sẽ tạo ra một URL dùng để truy cập vào hình ảnh đó:
https://res.cloudinary.com/demo/image/upload/sample.jpg
Mặc dù cú pháp chính xác được sử dụng sẽ khác nhau giữa các nhà cung cấp, nhưng ở mức tối thiểu, tất cả các CDN hình ảnh đều cho phép bạn thay đổi nguồn
kích thước, mã hoá và nén hình ảnh. Cloudinary, chẳng hạn như
tự động đổi kích thước của một
đã tải hình ảnh lên thông qua các cú pháp sau: h_ theo sau là chiều cao bằng số tính bằng pixel, w_ theo sau là chiều rộng,
và một giá trị c_ cho phép bạn chỉ định thông tin chi tiết về cách điều chỉnh theo tỷ lệ hoặc cắt hình ảnh.
Bạn có thể áp dụng số lượng phép biến đổi bất kỳ bằng cách thêm giá trị được phân tách bằng dấu phẩy vào URL trước tên tệp và đuôi,
tức là bạn có thể chỉnh sửa hình ảnh được tải lên khi cần thông qua src của phần tử img yêu cầu hình ảnh đó.
<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">
Lần đầu tiên người dùng truy cập URL có chứa những biến đổi này, một phiên bản mới của hình ảnh được điều chỉnh theo tỷ lệ
chiều rộng 400 px (w_400) sẽ được tạo và gửi. Sau đó, tệp mới tạo đó sẽ được lưu vào bộ nhớ đệm trên CDN để có thể gửi đi
cho bất kỳ người dùng nào yêu cầu cùng một URL, thay vì tạo lại theo yêu cầu.
Mặc dù không phổ biến khi các nhà cung cấp CDN cung cấp bộ phát triển phần mềm cho hình ảnh
để tạo điều kiện cho việc sử dụng và tích hợp nâng cao với nhiều ngăn xếp công nghệ khác nhau, riêng mẫu URL có thể dự đoán này cũng cho phép chúng tôi dễ dàng
biến một tệp đã tải lên thành một thuộc tính srcset khả thi mà không cần công cụ phát triển nào khác:
<img
src="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w"
srcset="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w,
https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg 800w,
https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg 600w"
alt="…">
Chúng ta có thể chỉ định mức độ nén mong muốn theo cách thủ công bằng cú pháp quen thuộc hiện tại: q_, ngắn
cho "chất lượng", theo sau là chữ số viết tắt cho cấp độ nén:
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
Rất hiếm khi bạn cần đưa thông tin này vào theo cách thủ công. Tuy nhiên, nhờ có một tập hợp các tính năng cực kỳ mạnh mẽ do hầu hết các mạng phân phối nội dung (CDN) hình ảnh cung cấp: nén, mã hoá và thương lượng nội dung hoàn toàn tự động.
Nén tự động
Mạng phân phối nội dung (CDN) có khả năng xử lý hình ảnh có khả năng tính toán đồng nghĩa với việc chúng có thể cung cấp một tính năng vô cùng mạnh mẽ: phân tích nội dung của hình ảnh để xác định bằng thuật toán mức độ nén và cài đặt mã hoá lý tưởng, giống như bạn hoặc tôi tinh chỉnh nén thủ công cho từng hình ảnh của chúng tôi.
Các thuật toán này tự động hoá các quyết định mà bạn có thể đưa ra để cân bằng giữa kích thước tệp và chất lượng cảm nhận, phân tích nội dung hình ảnh cho các dấu hiệu suy giảm có thể đo lường được và tinh chỉnh các chế độ cài đặt nén cho phù hợp. Điều này thường dẫn đến việc giảm đáng kể tệp so với phương pháp thủ công áp dụng cho tất cả các chế độ cài đặt nén.
Quy trình này nghe có vẻ phức tạp nhưng việc triển khai không thể đơn giản hơn nhiều: đối với Cloudinary, việc thêm q_auto trong một
URL hình ảnh bật tính năng này:
<img src="https://res.cloudinary.com/demo/image/upload/w_1400/sample.jpg" alt="…">
<!-- 250 KB-->
<img src="https://res.cloudinary.com/demo/image/upload/w_1400,q_auto/sample.jpg" alt="…">
<!-- 134 KB-->
Tự động mã hoá và thương lượng nội dung
Khi nhận được yêu cầu hình ảnh, CDN của hình ảnh sẽ xác định phương thức mã hoá hiện đại nhất mà trình duyệt hỗ trợ thông qua
Tiêu đề HTTP mà trình duyệt gửi cùng với các yêu cầu về nội dung, cụ thể là
tiêu đề Accept. Tiêu đề này cho biết các kiểu mã hoá mà trình duyệt có thể hiểu được, sử dụng cùng
loại nội dung nghe nhìn mà chúng ta sẽ dùng để điền vào type
thuộc tính <source> của phần tử <picture>.
Ví dụ: việc thêm tham số f_auto vào danh sách các biến đổi hình ảnh trong một URL thành phần sẽ cho Cloudinary biết rõ là
thực hiện mã hoá hiệu quả nhất mà trình duyệt có thể hiểu:
<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…">
Sau đó, máy chủ tạo một phiên bản hình ảnh với phương thức mã hoá đó và lưu kết quả vào bộ nhớ đệm cho tất cả người dùng tiếp theo với cùng một
mức độ hỗ trợ của trình duyệt. Phản hồi đó có tiêu đề Content-Type
để thông báo rõ ràng cho trình duyệt về việc mã hoá tệp, bất kể đuôi tệp là gì. Mặc dù người dùng đang sử dụng một trình duyệt hiện đại sẽ
yêu cầu một tệp kết thúc bằng .jpg, yêu cầu đó sẽ đi kèm với một tiêu đề cho máy chủ biết rằng AVIF được hỗ trợ và máy chủ
sẽ gửi một tệp mã hoá AVIF kèm theo hướng dẫn rõ ràng để coi tệp đó là AVIF.
Kết quả cuối cùng là một quá trình không chỉ giúp bạn tạo các tệp được mã hoá luân phiên và tinh chỉnh thủ công các chế độ cài đặt nén
(hoặc duy trì một hệ thống thực hiện các công việc này cho bạn), nhưng không cần sử dụng <picture> và thuộc tính type để
phân phối các tệp đó cho người dùng. Vì vậy, việc chỉ sử dụng cú pháp srcset và sizes vẫn có thể cung cấp cho người dùng hình ảnh được mã hoá dưới dạng AVIF,
quay lại sử dụng WebP (hoặc JPEG-2000, chỉ riêng Safari), rồi quay lại phương thức mã hoá cũ hợp lý nhất.
Hạn chế của việc sử dụng CDN hình ảnh là cần nhiều hậu cần hơn so với về mặt kỹ thuật, trong đó chủ yếu là chi phí. Mặc dù các CDN hình ảnh thường cung cấp các gói miễn phí và mạnh mẽ về tính năng cho mục đích sử dụng cá nhân, việc tạo thành phần hình ảnh đòi hỏi phải có băng thông và không gian lưu trữ để tải lên, quá trình xử lý đang bật máy chủ để chuyển đổi hình ảnh và không gian bổ sung cho kết quả chuyển đổi được lưu vào bộ nhớ đệm—vì vậy, việc sử dụng nâng cao và các ứng dụng có lưu lượng truy cập cao có thể yêu cầu gói trả phí.