Hình ảnh là một trong những yếu tố quan trọng nhưng cũng thường chiếm nhiều tài nguyên nhất trên website. Tối ưu hóa hình ảnh không chỉ giúp tăng tốc độ tải trang mà còn cải thiện trải nghiệm người dùng và SEO. Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng Cloudflare Images và các phương pháp khác để tối ưu hóa hình ảnh hiệu quả.


1. Tại Sao Tối Ưu Hóa Hình Ảnh Lại Quan Trọng?

Hình ảnh thường chiếm 50%-70% kích thước của một trang web. Những lợi ích của việc tối ưu hóa bao gồm:

  • Tăng tốc độ tải trang: Hình ảnh nhẹ hơn giúp giảm thời gian tải.
  • Cải thiện SEO: Google ưu tiên các trang web tải nhanh.
  • Tiết kiệm băng thông: Hình ảnh tối ưu giúp giảm chi phí hosting.
  • Trải nghiệm người dùng tốt hơn: Người dùng không phải chờ lâu để xem nội dung.

2. Sử Dụng Cloudflare Images

Cloudflare Images là một công cụ mạnh mẽ giúp quản lý, tối ưu hóa và phân phối hình ảnh nhanh chóng thông qua cơ sở hạ tầng của Cloudflare. Dưới đây là các tính năng chính và cách sử dụng:

Đăng nhập vào tại khoản CloudFlare của bạn chọn > Images > Transformations > chọn tên miền muốn sử dụng > Enable

huong-dan-tang-toc-website-voi-cloudflare-images-1

 

Sau khi bật cho tên miền bạn có thể kiểm tra bằng cách truy cập vào đường dẫn của ảnh trên website của mình ví dụ:

  • Đường dẫn mặc định: /huong-dan-tang-toc-website-voi-cloudflare-images-1.jpg – 101KB
  • Đường dẫn ảnh được xử lý bởi CloudFlare: cdn-cgi/image/quality=75,format=webp/wp-content /uploads/huong-dan-tang-toc-website-voi-cloudflare-images-1.jpg – 50,6KB

Tham khảo tài liệu để tùy biến cho website của bạn tại: https://developers.cloudflare.com/images/

3. Kết Luận

Tối ưu hóa hình ảnh là một bước quan trọng giúp tăng tốc website và nâng cao trải nghiệm người dùng. Sử dụng các công cụ như Cloudflare Images và áp dụng các phương pháp như lazy loading, chuyển đổi định dạng hiện đại sẽ giúp website của bạn hoạt động hiệu quả hơn.

Bắt đầu ngay hôm nay để biến website của bạn trở nên nhanh hơn và thân thiện hơn với người dùng!

4. Gợi ý code mình dùng cho trang WordPress:

Chỉnh sửa file functions.php của theme bạn đang sử dụng, cẩn thận trước khi sử dụng code vì mỗi trang sẽ có cài đặt cũng như cấu hình theme khác nhau, đây chỉ là code ví dụ mình set chất lượng ảnh 75% và định dạng webp, ảnh trên WordPress lưu ở thư mục /uploads/:

function modify_image_url($url) {
if (strpos($url, '/wp-content/uploads/') !== false) {
$url = str_replace('/wp-content/uploads/', '/cdn-cgi/image/quality=75,format=webp/wp-content/uploads/', $url);
}
return $url;
}
add_filter('wp_get_attachment_url', 'modify_image_url');
// Áp dụng thay đổi cho ảnh thumbnail trong post (thumbnail HTML)
function modify_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr) {
$thumb_url = wp_get_attachment_url($post_thumbnail_id);
$thumb_url = modify_image_url($thumb_url);
$html = str_replace(wp_get_attachment_url($post_thumbnail_id), $thumb_url, $html);
return $html;
}
add_filter('post_thumbnail_html', 'modify_thumbnail_html', 10, 5);
// Thay đổi URL ảnh trong nội dung bài viết
function modify_image_urls_in_content($content) {
$pattern = '~(https?://[^"\']+/wp-content/uploads/[^"\']+)~';
$replacement = '${1/cdn-cgi/image/quality=75,format=webp/wp-content/uploads/}';
$content = preg_replace_callback($pattern, function ($matches) {
return str_replace('/wp-content/uploads/', '/cdn-cgi/image/quality=75,format=webp/wp-content/uploads/', $matches[1]);
}, $content);
return $content;
}
add_filter('the_content', 'modify_image_urls_in_content');

Các gói của Cloudflare Images:

Miễn phí: 5.000 chuyển đổi duy nhất mỗi tháng

Trả phí: 

$5/tháng:

  • Images:  lưu trữ 100.000 hình ảnh, 500.000 hình ảnh được gửi mỗi tháng, 5.000 chuyển đổi duy nhất mỗi tháng
  • Stream: 1.000 phút video được lưu trữ, 5.000 phút video được cung cấp mỗi tháng

$50/tháng

  • Images:  lưu trữ 500.000 hình ảnh, 1.000.000 hình ảnh được gửi mỗi tháng, 5.000 chuyển đổi duy nhất mỗi tháng
  • Stream: 10.000 phút video được lưu trữ, 50.000 phút video được cung cấp mỗi tháng

Đặc trưng

  • Lưu trữ hình ảnh hiệu quả — không cần tải lên các phiên bản trùng lặp
  • Tối ưu hóa hình ảnh được lưu trữ ở bất cứ đâu trên Internet
  • Biến đổi và thao tác hình ảnh một cách linh hoạt khi đang di chuyển với chức năng cắt, thay đổi kích thước và các hiệu ứng hình ảnh khác


Average rating: 5 ★ from 5 reviews

★★★★★ (5)

★★★★ (0)

★★★ (0)

★★ (0)

★ (0)

  • Điều làm tôi ấn tượng nhất về Cloudflare Images là tính năng phân phối hình ảnh từ các zone an toàn. Hình ảnh được bảo mật khỏi truy cập trái phép và tải rất nhanh trên mọi thiết bị. Ngoài ra, việc tối ưu hóa tự động giúp chúng tôi không cần lo lắng về kích thước hay định dạng của hình ảnh khi upload. Cloudflare thực sự đã tạo ra một giải pháp đẳng cấp!
  • Chúng tôi đã thấy sự cải thiện rõ rệt trong điểm PageSpeed Insights sau khi triển khai Cloudflare Images. Công cụ này không chỉ tối ưu hình ảnh mà còn đảm bảo mọi hình ảnh được phân phối nhanh chóng tới người dùng cuối. Nhờ đó, tỷ lệ thoát trang giảm, và vị trí SEO của website cũng tăng lên. Đây là một đầu tư rất xứng đáng!
  • Trước đây, chúng tôi phải sử dụng nhiều công cụ khác nhau để tối ưu hóa hình ảnh, nhưng với Cloudflare Images, tất cả đều được tự động hóa. Điều này giúp giảm đáng kể thời gian xử lý hình ảnh và tiết kiệm băng thông server. Chất lượng hình ảnh vẫn rất tốt sau khi nén, và hiệu suất tổng thể của website được cải thiện đáng kể.
  • Cloudflare Images không chỉ mang lại khả năng tối ưu hóa hình ảnh mà còn giúp chúng tôi phân phối nội dung nhanh chóng nhờ hệ thống CDN toàn cầu. Giao diện quản lý đơn giản, dễ cấu hình, và Transformations thực sự là tính năng cứu cánh cho các website cần hình ảnh nhẹ nhưng chất lượng cao. Một công cụ tuyệt vời cho cả người mới bắt đầu lẫn chuyên gia!
  • Cloudflare Images đã giúp tối ưu hóa hình ảnh trên website của chúng tôi một cách đáng kinh ngạc. Hình ảnh tải nhanh hơn đáng kể nhờ việc tự động chuyển đổi sang định dạng WebP và nén dung lượng. Kể từ khi tích hợp, tốc độ tải trang tăng lên rõ rệt, và chúng tôi cũng nhận được phản hồi tốt hơn từ người dùng về trải nghiệm duyệt web.