Bạn có thể đã 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 gồm các máy chủ được phân phối nhưng được kết nối với nhau, giúp phân phối tài sản cho người dùng một cách nhanh chóng và hiệu quả. Khi bạn tải một tệp 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 một tệp, dữ liệu sẽ được gửi từ nút gần người dùng đó nhất về mặt địa lý, giúp giảm độ trễ. Tính 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ất mạng 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.
CDN của hình ảnh có thể cung cấp tất cả những lợi ích này, 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 dùng để truy cập vào hình ảnh.
Người dùng sẽ tải một hình ảnh chính tắc có độ phân giải cao lên nhà cung cấp rồi tạo 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 tối thiểu thì tất cả CDN hình ảnh đều cho phép bạn thay đổi kích thước, chế độ cài đặt mã hoá và nén của hình ảnh nguồn. Ví dụ: Cloudinary sẽ thực hiện đổi kích thước động của hình ảnh đã tải lên thông qua các cú pháp sau: h_ theo sau là chiều cao dạng số tính bằng pixel, w_ sau đó là chiều rộng và giá trị c_ cho phép bạn chỉ định thông tin chi tiết về cách hình ảnh được điều chỉnh theo tỷ lệ hoặc cắt.
Bạn có thể áp dụng số lượng phép biến đổi bất kỳ bằng cách thêm các 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ệp, nghĩa là hình ảnh đã tải lên có thể được xử lý 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 vào URL chứa các phép biến đổi này, hệ thống sẽ tạo và gửi phiên bản mới của hình ảnh được điều chỉnh theo tỷ lệ với chiều rộng 400px (w_400). Sau đó, tệp mới tạo đó sẽ được lưu vào bộ nhớ đệm trên CDN để có thể gửi tệp đến 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ù nhà cung cấp CDN hình ảnh không phổ biến khi cung cấp bộ phát triển phần mềm để hỗ trợ 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, nhưng chỉ riêng mẫu URL có thể dự đoán này cho phép chúng tôi dễ dàng chuyển một tệp được tải lên thành thuộc tính srcset khả thi mà không cần bất kỳ 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ách sử dụng cú pháp quen thuộc: q_, viết tắt của "chất lượng", theo sau là từ viết tắt dạng số cho mức nén:
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
Tuy nhiên, hiếm khi bạn phải đưa thông tin này vào theo cách thủ công. Tuy nhiên, nhờ có một bộ 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) cung cấp: nén hoàn toàn tự động, mã hoá và thương lượng nội dung.
Nén tự động
Các CDN hình ảnh có khả năng tính toán sẵn có nghĩa là họ có thể cung cấp một tính năng cực kỳ 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ác chế độ cài đặt mã hoá lý tưởng, giống như cách bạn hoặc tôi tinh chỉnh quy trình nén theo cách thủ công cho từng hình ảnh.
Các thuật toán này sẽ 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 để biết được các dấu hiệu xuống cấp 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 có nghĩa là giảm đáng kể kích thước tệp so với phương pháp thủ công một cho tất cả các chế độ cài đặt nén.
Quy trình này nghe có vẻ phức tạp đến mức nhưng việc triển khai cũng có thể đơn giản hơn: đối với Cloudinary, việc thêm q_auto vào URL hình ảnh sẽ cho phép 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 thương lượng nội dung và mã hoá
Khi nhận được yêu cầu về hình ảnh, CDN 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 do trình duyệt gửi cùng với yêu cầu về tài sản, cụ thể là tiêu đề Accept. Tiêu đề này cho biết các chế độ mã hoá mà trình duyệt có thể hiểu, sử dụng cùng loại nội dung đa phương tiện mà chúng tôi sử dụng để điền thuộc tính type của <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 URL thành phần sẽ cho Cloudinary biết rõ việc cần cung cấp phương thức 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ủ sẽ tạo một phiên bản hình ảnh bằng 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 có cùng cấp độ hỗ trợ trình duyệt. Phản hồi đó bao gồm một tiêu đề Content-Type để thông báo rõ ràng cho trình duyệt về cách mã hoá tệp, bất kể đuôi tệp là gì. Mặc dù người dùng sử dụng trình duyệt hiện đại sẽ đưa ra yêu cầu về tệp có đuôi .jpg, nhưng yêu cầu đó sẽ đi kèm với một tiêu đề thông báo cho máy chủ rằng AVIF được hỗ trợ và máy chủ sẽ gửi tệp mã hóa AVIF cùng với hướng dẫn rõ ràng để coi tệp đó là AVIF.
Kết quả ròng là một quy trình không chỉ giúp bạn tạo các tệp được mã hoá xen kẽ và tinh chỉnh theo cách thủ công các chế độ cài đặt nén (hoặc duy trì một hệ thống thực hiện những tác vụ này cho bạn), mà còn giúp bạn 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 một cách hiệu quả. 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, chẳng hạn như AVIF, quay lại WebP (hoặc JPEG-2000, dành riêng cho Safari), quay lại sử dụng phương thức mã hoá cũ hợp lý nhất.
Nhược điểm của việc sử dụng CDN hình ảnh đòi hỏi nhiều yếu tố hậu cần hơn so với kỹ thuật, trong số đó chủ yếu là chi phí. Mặc dù CDN hình ảnh thường cung cấp các gói miễn phí mạnh mẽ cho mục đích sử dụng cá nhân, nhưng việc tạo thành phần hình ảnh sẽ đòi hỏi phải có băng thông và không gian lưu trữ để tải lên, xử lý trên máy chủ để biến đổi hình ảnh và thêm không gian cho kết quả biến đổi được lưu vào bộ nhớ đệm. Do đó, 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ể đòi hỏi phải có gói trả phí.