Cloudinary là một plugin cực mạnh cho tối ưu, chỉnh sửa ảnh, hỗ trợ ảnh chất lượng tốt nhất cho mọi thiết bị, mọi độ phân giải, thậm chí họ còn có cả CDN từ Việt Nam
Nó rất phù hợp cho mình, 1 trang blog nhỏ, không cần nhiều băng thông, tốc độ load ảnh tại Việt Nam gần như nhanh nhất có thể, được cho FREE 20 GB băng thông hàng tháng, tuy thế nói thật dịch vụ về ảnh thì bạt ngàn, không cần thiết phải thử thèng này làm gì, để tới khi site phát triển lại hết băng thông thì đúng là bách nhục, hãy dùng nó như một dịch vụ sơ cua, phòng khi đứt cáp, ảnh load chậm quá thì có thể chuyển sang 1-2 ngày cho tới khi mạng ổn định lại thì hợp lý hơn
Cloudinary hỗ trợ nhiều chế độ nén, tích hợp với WordPress, chỉnh sửa trực tiếp ảnh ngay trong bài viết, một số tính năng cơ bản có thể liệt kê ra gồm:
- Thay đổi kích thước, cắt xén, xoay hình ảnh.
- Thay đổi định dạng hình ảnh (cả tự động và thủ công).
- Tối ưu hóa hình ảnh để giảm kích thước hình ảnh.
- Nâng cao hình ảnh để làm cho chúng trở nên chuyên nghiệp.
- Thêm một loạt các hiệu ứng như: – Điều chỉnh độ sáng / tương phản / màu sắc, sắc nét, loại bỏ mắt đỏ, làm mờ các khuôn mặt, màu, cartoonify và nhiều hơn nữa.
- Thêm độ mờ và đường viền.
- Xóa hình nền.
- Thêm hiệu ứng phóng to.
- Thêm watermark vào hình ảnh.
Ngoài những tính năng này, bạn còn có thể sử dụng toàn bộ các Add-on miễn phí và trả phí mà bạn có thể sử dụng để nâng cao hình ảnh của bạn, một trong số đó có 1 tính năng khá hài là tự tag người nổi tiếng mà nó tìm thấy trong ảnh 😀
Thiết lập và sử dụng Cloudinary với blog WordPress của bạn
Bước 1: Đăng Kí Tài Khoản
Chọn gói FREE, ta được tổng cộng 300.000 bức ảnh và video, 10 GB space và 20 GB băng thông hàng tháng
Lúc đăng kí, bạn có thể thể ấn vào Edit, chọn nickname đẹp đẹp nếu muốn 😀 thật ra cũng màu mè cho vui thôi, vì chẳng ai rỗi hơi đi ngồi cái link ảnh của bạn nó ra làm sao đâu :]]
Đăng kí xong thì active email thôi, không có gì bàn cả
Đăng kí xong login vào, bạn sẽ thấy phần Add-ons ở góc trên bên phải, ấn vào đó để sử dụng thêm các dịch vụ khác của họ
Nói chung là có nhiêu Add-ons FREE thì cứ ấn hết đi hé, FREE mà 😀
Ấn vào Reveal tại phần API Secret, nó sẽ hiện đủ cái link ở phần Environment variable ra, copy lại để điền vào bước sau
Bước 2: Cài Đặt Và Kích Hoạt Plugin Cloudpress Wordpress
Download plugin Cloudinary cho WordPress về, active như bình thường thôi 😀
Ấn vào Settings của Cloudinary, paste lại cái code lấy ở bước 1 chỗ Environment variable vào CLOUDINARY_URL, xong ấm Update Settings
Lúc này bạn sẽ phần phần Media Library trên WordPress sẽ được đồng bộ với Cloudinary, có thể edit ảnh từ Cloudinary hoặc WordPress đều được, ảnh sẽ được tự đồng bộ
Tùy thuộc bạn chọn tính năng làm sao thì link của Cloudinary sẽ có sự thay đổi theo, từ http, https, php, java … nói chung nó hỗ trợ cho nhiều định dạng, nhiều thứ lắm
res.cloudinary.com/ngoirungdui/image/upload/f_auto,fl_lossy,q_auto:eco,dpr_auto,w_auto/s--poYOFr7D--/q_jpegmini/v1512048026/11-30-2017-8-06-31-PM_j5xptp.png
cl_image_tag("11-30-2017-8-06-31-PM_j5xptp.png", array("quality"=>"jpegmini", "sign_url"=>true))
$.cloudinary.image("11-30-2017-8-06-31-PM_j5xptp.png", {quality: "jpegmini"})
Thật sự là quá nhiều tùy chọn vào tham số cho một dịch vụ upload ảnh 😀
Để tối ưu hóa chất lượng tự động, thì ta chỉ cần chọn Auto ở bức ảnh là được, nó sẽ tự tính toán làm sao ảnh ở chất lượng đẹp nhất và dung lượng nhỏ nhất, link ảnh sẽ được thêm giá trị “q_auto” so với link gốc
res.cloudinary.com/ngoirungdui/image/upload/q_auto/v1512045654/11-30-2017_7-36-19_PM_zlboiq.png
Update 15/12/2017: sau khi dùng một thời gian, mình thấy giá trị q_auto:eco khá tối ưu, ảnh rất nhẹ và chất lượng ảnh tốt, bạn có thể thử sử dụng giá trị này xem thế nào
Một cách khác để tối ưu hóa hình ảnh của Cloudinary là sử dụng lựa chọn định dạng tự động. Tính năng này cho phép yêu cầu định dạng hình ảnh tốt nhất dựa trên trình duyệt của người dùng. Ví dụ: bạn có thể tiết kiệm băng thông bằng cách cung cấp hình ảnh WebP cho người dùng Chrome hoặc JPEG-XR cho người dùng Internet Explorer, bằng cách đặt fetch_format sang tự động, lúc này link sẽ được thêm giá trị “f_auto“
res.cloudinary.com/ngoirungdui/image/upload/f_auto/v1512045654/11-30-2017_7-36-19_PM_zlboiq.png
Cụ thể như cái link ảnh ở trên, nếu bạn dùng Chrome để xem, nó sẽ là đuôi .webp và nặng khoảng 25.6kb, các trình duyệt khác nó sẽ là ảnh .png bình thường, nặng khoảng 31kb, và ảnh gốc của nó là 105kb 😀
Để tối ưu hóa ảnh GIF (ảnh động) thì bạn dùng thêm giá trị “fl_lossy“, nó sẽ tự nén các bức ảnh động
res.cloudinary.com/ngoirungdui/image/upload/fl_lossy/v1512045654/11-30-2017_7-36-19_PM_zlboiq.png
Để giúp ảnh tự phù hợp cho mọi độ phân giải thì ta dùng thêm “dpr_auto,w_auto“, khi bạn dùng giá trị này, thì ở vị trí ảnh có kích thước tối đa chỉ 600 x 600 px, mà bạn upload cái pic 1000 x 1000 px cũng không có bất cứ một tool hay phần mềm nào check là bạn bị lỗi về bố cục ảnh hay để ảnh sai kích thước hết hé 😀
res.cloudinary.com/ngoirungdui/image/upload/dpr_auto,w_auto/v1512045654/11-30-2017_7-36-19_PM_zlboiq.png
Tuy thế cái w_auto nó cũng chỉ tự động được phần nào thôi, nếu người làm theme không code thêm phần set giá trị cụ thể vào thì hiệu quả nó không cao lắm, như tấm ảnh thumbnail khoảng 60 x 60 px, mà mình táng nguyên cái ảnh 1000 x 1000 vào đó, dù Cloudinary tự auto cân đối, dung lượng nó cũng rất to, mình thử ở 1 trang kích thước hiển thị ngang tối đa là 725 px, upload khoảng 12 tấm hình, độ phân giải 2000 x 2000, thì so với việc set giá trị w_725 vào ảnh, tổng dung lượng khoảng 350 kb, còn nếu dùng w_auto nó lên tới 1.1 MB
Nói chung Cloudinary là một công cụ cực mạnh cho ảnh trên web, mình mới coi sơ sơ mà thấy chưa đi hết 1/10 tính năng của nó, từ 1 tấm ảnh gốc, ta có thể dùng ở mọi vị trí trên site cho phù hợp bằng cách thêm vào link các giá trị mới, không phải tạo 1 đống thumbnail từ ảnh gốc như WordPress đang làm hiện nay, và cứ mỗi lần đổi giao diện là ta phải làm lại 1 lần á 😀
Giá trị tối ưu cho website về để tối ưu tốc độ về ảnh:
‘f_auto,fl_lossy,q_auto:eco,dpr_auto,w_auto’
Bạn dùng thêm 5 giá trị này thì gần như sẽ không bao giờ gặp thông báo là cần tối ưu ảnh, kích thước hiển thị không đúng nữa cả 😀
Tips: Bạn có thể sử dụng một mưu hèn kế bẩn để nó tự động thêm “f_auto,fl_lossy,q_auto:eco,dpr_auto,w_auto” vào cho các link ảnh từ cloudinary.com, đỡ phải đi sửa từng tấm
Sử dụng “nginx_substitutions_filter”
subs_filter hxxp://res.cloudinary.com/ngoirungdui/image/upload/ hxxp://res.cloudinary.com/ngoirungdui/image/upload/f_auto,fl_lossy,q_auto:eco,dpr_auto,w_auto/;
Thay ngoirungdui bằng nick của bạn, nếu bạn dùng https thì sửa hxxp thành https, nếu dùng http thì sửa hxxp thành http
Thêm dòng đó vào file .conf, chép bên dưới dòng “server {“ là được
Trong trường hợp nếu câu trên không chạy hãy thử câu bên dưới: (cái này là nhờ support bên Webinoly họ giúp)
sub_filter_once off;
sub_filter_last_modified on;
sub_filter hxxp://res.cloudinary.com/ngoirungdui/image/upload/ hxxp://res.cloudinary.com/ngoirungdui/image/upload/f_auto,fl_lossy,q_auto:eco,dpr_auto,w_auto/;
Điểm vui là giờ post ảnh không cần phải ngồi sửa để thêm cái giá trị nữa, điểm nhục là giờ cái bài này, tất cả link bắt đầu bằng câu đó đều bị đổi :]]
Hi vọng các bạn đọc vẫn hiểu ^_^
Bước 3: Sử Dụng Và Xóa Bỏ
Bước này quan trọng nhất, mà nãy giờ mình quên nói 😀
Lúc viết bài thì cứ upload trực tiếp file lên host là được, đừng upload trực tiếp vào Cloudinary, thứ nhất là nhanh và thứ hai là nếu bạn gỡ bỏ Cloudinary ra nó sẽ mất hết link cũ, thành ra cứ viết bài như bình thường, ảnh nào muốn cho lên Cloudinary thì vào Gallary (Thư Viện) chọn Upload to Cloudinary là được
Nó sẽ tự cập nhập link sang Cloudinary 😀
Còn vì lý do nào đó bạn muốn gỡ bỏ Cloudinary thì trước tiên Gallary (Thư Viện), chọn tác vụ, xong chọn Migrate away from Cloudinary
Xong xuôi hết thì nó sẽ chuyển link về lại link cũ, xong muốn xóa gì thì xóa hé ^_^
Nói chung nó chạy hoàn hảo với điều kiện trang của bạn sử dụng 1 theme được code thật tốt các vấn đề về ảnh, còn không thì rất khó, vì nó chỉ sử dụng đúng 1 tấm ảnh duy nhất, trong trường hợp cụ thể như bạn dùng WordPress, và tấm ảnh đó nó hiện ra ở 3-5 vị trí (trang chủ, thumbnail, ảnh trong bài, ảnh nhỏ của shop …) thì phải sửa rất nhiều, cái này phải xem tay viết cái theme sử lý ra làm sao nữa 🙁 Bạn có thể dùng thử theme GeneratePress, kích thước các ảnh đại diện, thumbnail hiện ra hoàn hảo, nếu bạn set các tham số như ở trên, thì trung bình 1 tấm ảnh đại diện, thumbnail chỉ khoảng 5-10 kb thôi, rất nhẹ
Hiện tại bibica.review đang sử dụng Cloudinary cho các ảnh đại điện của bài post, còn trong bài viết thì sử dụng Jetpack Image CDN
Update 28/12/2017
Hiện tại tôi sử dụng Cloudinary nữa, mặc dù về lý thuyết nó hỗ trợ rất nhiều công nghệ tối ưu ảnh, CDN tại Việt Nam, một tấm ảnh đại diện (chiều ngang tối đa 300 px) được Cloudinary tối ưu chỉ còn ~ 5-10kb nhưng không hiểu sao, bình thường nó load rất ổn nhưng trong một số trường hợp, nó lại load rất chậm khi truy cập tại Việt Nam 🙁 trong khi sử dụng Jetpack Image CDN ảnh với dung lượng cao hơn ~ 30-50kb lại load rất ổn định
Yeb, đành phải dùng hoàn toàn Jetpack Image CDN trên thèng bibica.review vại 😀