Sử dụng CDN để tối ưu hóa ảnh

Nước xa không cứu được lửa gần, nên đôi khi phải bán anh em xa là vì vậy đấy ạ.

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

Mạng phân tán nội dung ảnh là giải pháp tuyệt vời để tối ưu hóa phân phối ảnh. Chuyển sang sử dụng CDN ảnh có thể đem đến khả năng tiết kiệm từ 40-80% về khía cạnh kích cỡ file ảnh. Trên lý thuyết, điều đó có thể đạt được chỉ cần nhờ vào việc xây dựng mã khéo léo, nhưng nó hiếm khi xảy ra trong thực tế.

CDN ảnh là gì?

CDN ảnh chuyên cho việc chuyển đổi, tối ưu hóa và phân phối ảnh. Bạn cũng có thể nghĩ về nó như dạng APIs cho việc truy cập và thao tác với hình ảnh trên trang của bạn. Với các ảnh được tải từ CDN, URL ảnh không chỉ cho biết cụ thể hình ảnh nào được tải, mà còn có các thông số (parameter) như kích cỡ, định dạng và chất lượng. Điều đó giúp bạn dễ dàng tạo được các biến thể ảnh cho các mục đích sử dụng khác nhau.

CDN cho ảnh
Ví dụ về các biến đổi mà CDN ảnh có thể thực hiện dựa vào các tham số trong URL ảnh. size=small có nghĩa là kích cỡ nhỏ. crop=circle có nghĩa là làm tròn hình. format=webp có nghĩa là sử dụng định dạng webp cho ảnh (thay vì jpg hoặc png)

CDN ảnh khác với các mã tối ưu hóa hình ảnh kiểu build-time, trong đó người ta tạo ra các phiên bản mới của hình ảnh mà họ cần. Hệ quả là CDN nói chung có khả năng phù hợp hơn trong việc tạo ra ảnh cho các nhu cầu tùy biến cao của từng khách hàng cá nhân so với việc xây dựng mã.

Cách CDN ảnh sử dụng URL để biểu thị các tùy chọn tối ưu hóa

URL ảnh sử dụng bởi mạng CDN ảnh truyền đạt thông tin quan trọng về ảnh cũng như các biến đổi và tối ưu hóa mà đã được áp dụng cho nó. Định dạng của URL còn tùy thuộc vào CDN ảnh cụ thể, nhưng ở cấp độ cao, tất cả chúng đều có các tính năng tương tự. Giờ chúng ta cùng tìm hiểu các tính năng phổ biến nhất.

URL của CDN ảnh

Origin / Gốc

Ảnh CDN có thể có dạng thức trên tên miền của bạn (tùy chỉnh) hoặc tên miền của dịch vụ CDN ảnh. Các dịch vụ CDN ảnh của bên thứ ba thường cung cấp tùy chọn cho việc sử dụng tên miền tùy chỉnh (custom domain) có kèm theo tính phí. Sử dụng tên miền của riêng bạn giúp bạn dễ dàng thay đổi dịch vụ nhà cung cấp CDN ảnh sau này vì bạn không cần phải thay đổi URL nữa.

Ví dụ ở trên sử dụng tên miền của dịch vụ CDN ảnh (example-cdn.com) với tên miền phụ được cá nhân hóa, chứ không phải sử dụng tên miền tùy chỉnh.

Image / Ảnh

CDN ảnh thường có thể cấu hình tự động để lấy ảnh từ các vị trí hiện có của chúng khi cần thiết. Khả năng này thường đạt được bằng cách bao gồm URL hoàn chỉnh của ảnh đã tồn tại vào bên trong URL của ảnh được tạo bởi dịch vụ CDN ảnh. Lấy ví dụ, bạn có thể thấy một URL trông giống như thế này: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto. URL này sẽ lấy và tối ưu hóa ảnh ở địa chỉ: https://flowers.com/daisy.jpg

Một ví dụ gần gũi hơn với ai đang dùng WordPress và sử dụng plugin Flying Images: URL CDN ảnh miễn phí của nó có dạng như thế này:

https://cdn.statically.io/img/kiencang.net/wp-content/uploads/2019/12/plugin-lazy-load-anh-moi.jpg

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

Security key / Khóa bảo mật

Khóa bảo mật (security key) ngăn không cho người khác tạo các phiên bản mới của hình ảnh. Nếu tính năng này được bật, từng phiên bản mới của ảnh yêu cầu một khóa bảo mật duy nhất (unique). Nếu ai đó cố gắng thay đổi các thông số của URL ảnh nhưng lại không cung cấp khóa bảo mật hợp lệ, họ không có khả năng tạo ra một phiên bản mới. Dịch vụ CDN ảnh của bạn sẽ để ý các chi tiết của việc tạo và theo dõi khóa bảo mật cho bạn.

Transformations / Các biến đổi

Các dịch vụ CDN ảnh cung cấp hàng chục, và trong một số trường hợp là hàng trăm các biến đổi hình ảnh khác nhau. Các biến đổi này được chỉ định thông qua chuỗi URL, và không có hạn chế trong việc sử dụng nhiều chuyển đổi vào cùng một thời điểm. Dưới góc nhìn về hiệu suất và tốc độ website, các chuyển đổi ảnh quan trọng nhất bao gồm kích cỡ, mật độ điểm ảnh, định dạng nén. Các chuyển đổi này là lý do giải thích vì sao chuyển sang dùng CDN ảnh thường giúp bạn có được kích cỡ ảnh giảm đáng kể.

Có một xu hướng khách quan trong vấn đề lựa chọn cài đặt tốt nhất cho hiệu suất chuyển đổi, vì thế một số CDN ảnh hỗ trợ chế độ “auto / tự động” cho các chuyển đổi này. Lấy ví dụ, thay vì phải chỉ định ảnh được chuyển sang định dạng WebP, bạn có thể cho phép CDN lựa chọn tự động và phục vụ định dạng tối ưu. Các tín hiệu mà CDN ảnh có thể sử dụng để phát hiện cách tốt nhất cho mục tiêu chuyển đổi ảnh bao gồm:

Lấy ví dụ, CDN ảnh có thể phục vụ JPEG XR cho trình duyệt Edge, WebP cho trình duyệt Chrome, và JPEG cho trình duyệt cũ. Các thiết lập mặc định là phổ biến bởi vì chúng cho phép bạn có được lợi thế chuyên môn quan trọng của dịch vụ CDN ảnh trong việc tối ưu hóa hình ảnh mà không cần thay đổi mã để áp dụng các công nghệ mới một khi chúng được hỗ trợ bởi dịch vụ CDN ảnh đang dùng.

Một số kiểu CDN ảnh

CDN ảnh có thể được chia thành hai nhóm: tự quản trị (self-managed) và bên thứ ba quản trị (third party managed).

CDN ảnh tự quản trị

CDN tự quản trị có thể là lựa chọn tốt cho các trang có nhân viên kỹ thuật – người có khả năng duy trì cơ sở hạ tầng của riêng họ.

Thumbor hiện là sản phẩm CDN ảnh tự quản trị duy nhất hiện có tính đến thời điểm này. Nó là dạng nguồn mở và cho phép sử dụng miễn phí, nhìn chung Thumbor có ít tính năng hơn phần lớn các dịch vụ CDN thương mại (trả phí), và tài liệu hướng dẫn của nó có phần hạn chế.

Wikipedia, Square và 99designs là ba trang lớn hiện đang dùng Thumbor. Bạn có thể tìm kiếm trên mạng cách cài đặt CDN ảnh Thumbor để biết hướng dẫn thiết lập nó (có thể tôi sẽ dịch sau).

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

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

Một số dịch vụ CDN ảnh chất lượng mà Kiến càng biết:

Trong đó hai cái đầu có gói miễn phí trọn đời với dung lượng CDN khoảng 20 GB / tháng.

Lựa chọn dịch vụ CDN ảnh

Có nhiều tùy chọn tốt cho việc sử dụng CDN ảnh. Một số có nhiều tính năng hơn cái khác, nhưng tất cả đều có khả năng giúp bạn tiết kiệm byte ảnh và vì thế giúp trang của bạn tải 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 lựa chọn CDN ảnh là chi phí, khả năng hỗ trợ, tài liệu hướng dẫn, và việc cài đặt, chuyển đổi sang dịch vụ mới (migration) dễ dàng.

Thử sử dụng dịch vụ trước khi quyết định dùng hay không cũng có thể có ích. Khu vực bên dưới bạn có thể tìm thấy codelab (phần này tôi chưa dịch) với các hướng dẫn để nhanh chóng để bắt đầu thiết lập một số dịch vụ CDN ảnh.

(Dịch từ bài viết Use image CDNs to optimize images, tác giả: Katie Hempenius, trang: web[.]dev)

Leave a Comment