Tại Sao Ảnh Website Của Bạn Cần Được Nén | Bulk Image Compressor
Nếu website của bạn mất hơn vài giây để tải, mọi người sẽ rời đi. Đó không phải ý kiến. Nghiên cứu của Google cho thấy tỷ lệ thoát tăng 32% khi thời gian tải trang đi từ một giây lên ba giây. Và ảnh hầu như luôn là lý do lớn nhất khiến trang tải chậm.
Hầu hết website phục vụ ảnh lớn hơn nhiều so với cần thiết. Một ảnh hero duy nhất trực tiếp từ máy ảnh hoặc site ảnh stock có thể dễ dàng là 5MB hoặc hơn. Trên kết nối băng rộng tốt, riêng file đó mất một vài giây để tải. Trên kết nối 3G di động, bạn đang nhìn vào khoảng 15 giây chỉ cho một ảnh. Bây giờ hãy tưởng tượng một trang với năm hoặc sáu ảnh như vậy.
Ảnh của bạn thực sự lớn đến mức nào?
Đây là một kiểm tra thực tế nhanh. Mở công cụ phát triển trình duyệt của bạn (F12), vào tab Network, tải lại trang và lọc theo “Img.” Nhìn vào các kích thước. Bạn có thể sẽ tìm thấy ít nhất một vài ảnh trên 1MB.
Để tham khảo, đây là kích thước ảnh chưa nén điển hình:
- Ảnh DSLR dùng làm banner hero: 4 đến 8MB
- Ảnh sản phẩm từ smartphone: 2 đến 5MB
- Ảnh stock tải xuống ở độ phân giải đầy đủ: 3 đến 10MB
- Infographic hoặc minh họa lưu dưới dạng PNG: 1 đến 4MB
Sau khi nén đúng cách, những ảnh tương tự đó có thể chỉ còn 100KB đến 300KB mà không mất chất lượng thấy được. Đó là giảm 90% hoặc hơn trong kích thước file.
Tốc độ trang và Core Web Vitals
Google sử dụng Core Web Vitals như một tín hiệu xếp hạng và ảnh ảnh hưởng trực tiếp đến hai trong ba chỉ số.
Largest Contentful Paint (LCP) đo thời gian tải phần tử hiển thị lớn nhất. Trên hầu hết trang, phần tử lớn nhất đó là một ảnh. Nếu ảnh hero của bạn là 5MB, LCP của bạn sẽ rất tệ. Google coi bất cứ thứ gì trên 2.5 giây là điểm LCP kém. Ảnh nén thường đưa LCP xuống dưới ngưỡng đó.
Cumulative Layout Shift (CLS) đo độ ổn định hình ảnh. Ảnh không có kích thước xác định gây ra dịch chuyển bố cục khi chúng tải. Điều này liên quan nhiều đến thuộc tính HTML hơn là nén, nhưng ảnh quá khổ tải chậm làm vấn đề tệ hơn vì trang hiển thị nội dung xung quanh không gian giữ chỗ có thể không khớp với kích thước ảnh cuối cùng.
Bạn có thể kiểm tra điểm số hiện tại của mình với Google PageSpeed Insights. Chạy trang chủ và một vài trang nội bộ. Nếu điểm hiệu suất của bạn dưới 90, ảnh có khả năng là một phần lớn của vấn đề.
Mối liên hệ SEO
Tốc độ trang là một yếu tố xếp hạng đã được xác nhận của Google. Nó đã như vậy từ năm 2010 cho desktop và 2018 cho di động. Sự ra đời của Core Web Vitals vào năm 2021 làm cho nó thậm chí còn trực tiếp hơn.
Nhưng tác động vượt xa chỉ tín hiệu tốc độ. Trang chậm bị Googlebot thu thập dữ liệu ít thường xuyên hơn. Google phân bổ “ngân sách thu thập” cho mỗi site và nếu trang của bạn chậm, bot dành ngân sách của nó để chờ phản hồi thay vì lập chỉ mục thêm nội dung của bạn. Đối với các site lớn hơn với hàng trăm hoặc hàng ngàn trang, điều này rất quan trọng.
Cũng có một tác động gián tiếp thông qua hành vi người dùng. Khi mọi người thoát khỏi trang chậm, Google sẽ chú ý. Tỷ lệ thoát cao và thời gian trên trang thấp gửi tín hiệu tương tác tiêu cực có thể ảnh hưởng đến thứ hạng của bạn theo thời gian.
Trải nghiệm người dùng và tỷ lệ thoát
Mọi người thiếu kiên nhẫn trực tuyến. Một nghiên cứu của Portent cho thấy tỷ lệ chuyển đổi giảm trung bình 4.42% cho mỗi giây thời gian tải thêm. Nếu site thương mại điện tử của bạn mất năm giây để tải thay vì hai giây, bạn có thể mất một tỷ lệ phần trăm đáng kể doanh số.
Người dùng di động thậm chí còn thiếu kiên nhẫn hơn. Hơn một nửa lưu lượng web đến từ thiết bị di động và kết nối di động thường chậm hơn desktop. Ảnh của bạn cần đủ nhỏ để tải nhanh trên điện thoại sử dụng mạng di động.
Cũng có yếu tố nhận thức. Một site nhanh cảm thấy chuyên nghiệp và đáng tin cậy hơn. Một site chậm cảm thấy hỏng hóc, ngay cả khi mọi thứ cuối cùng cũng tải xong. Ấn tượng đầu tiên xảy ra trong mili giây.
Chi phí băng thông tích lũy
Nếu bạn đang sử dụng hosting chia sẻ hoặc gói cơ bản, băng thông có thể không phải là điều bạn nghĩ đến. Nhưng đối với các site có lưu lượng thực sự, băng thông tốn tiền.
Hãy làm một phép toán. Giả sử trang trung bình của bạn có 3MB ảnh và bạn có 100,000 lượt xem trang mỗi tháng. Đó là 300GB dữ liệu ảnh được truyền hàng tháng. Sau khi nén, những trang đó có thể có 400KB ảnh, giảm truyền tải xuống 40GB. Đó là một sự giảm đáng kể trong chi phí lưu trữ và hóa đơn CDN.
Đối với các site lưu lượng cao, công ty truyền thông hoặc cửa hàng thương mại điện tử với danh mục sản phẩm lớn, sự khác biệt này có thể tiết kiệm hàng trăm hoặc hàng ngàn đô la mỗi tháng.
Cách nén hàng loạt ảnh website
Bạn có thể nén ảnh từng cái một trong Photoshop hoặc GIMP, nhưng nếu bạn có hàng chục hoặc hàng trăm ảnh, điều đó không thực tế. Nén hàng loạt là cách để đi.
Với Bulk Image Compressor, bạn có thể kéo tất cả ảnh website của mình vào cùng lúc và nén chúng cùng nhau. Đây là quy trình thực tế:
-
Xuất ảnh hiện tại của bạn. Nếu chúng đã có trên site của bạn, hãy tải chúng xuống. Nếu bạn đang xây dựng site mới, hãy thu thập tất cả ảnh bạn định sử dụng.
-
Chọn định dạng của bạn. Đối với ảnh chụp, JPEG hoặc WebP hoạt động tốt nhất. Đối với đồ họa có độ trong suốt, sử dụng PNG hoặc WebP. Nếu bạn không chắc nên chọn định dạng nào, hãy xem hướng dẫn về định dạng ảnh cho hiệu suất web.
-
Đặt mức chất lượng của bạn. Đối với hầu hết ảnh website, cài đặt chất lượng 75 đến 85% cho bạn sự cân bằng tốt giữa kích thước file và chất lượng hình ảnh. Bạn có thể thấp hơn cho hình thu nhỏ hoặc ảnh nền. Để biết thêm chi tiết về sự đánh đổi này, hãy xem bài viết của chúng tôi về giảm kích thước file mà không mất chất lượng.
-
Nén và tải xuống. Công cụ xử lý mọi thứ trong trình duyệt của bạn, vì vậy ảnh của bạn không bao giờ rời khỏi máy tính. Thay thế bản gốc trên máy chủ của bạn bằng các phiên bản đã nén.
-
Đặt kích thước, cũng vậy. Đừng phục vụ ảnh rộng 4000px trong container chỉ rộng 800px. Thay đổi kích thước ảnh của bạn để khớp với kích thước hiển thị trước hoặc trong khi nén. Riêng điều này có thể giảm kích thước file đáng kể.
Một ví dụ nhanh trước và sau
Đây là hình ảnh nén trong thực tế cho một website điển hình:
| Ảnh | Trước | Sau | Tiết kiệm |
|---|---|---|---|
| Banner hero (JPEG) | 4.2MB | 210KB | 95% |
| Ảnh nhóm (JPEG) | 3.1MB | 185KB | 94% |
| Logo (PNG) | 890KB | 95KB | 89% |
| Hình thu nhỏ blog (JPEG) | 1.8MB | 120KB | 93% |
| Tổng | 10MB | 610KB | 94% |
Đó là sự khác biệt giữa một trang tải trong một giây và một trang tải trong tám giây.
Đừng quên nội dung mới
Nén ảnh hiện có của bạn là một sửa chữa một lần, nhưng bạn cũng cần một quy trình cho nội dung liên tục. Mỗi lần bạn hoặc nhóm của bạn thêm bài blog mới, trang sản phẩm hoặc trang đích, những ảnh đó nên được nén trước khi đưa lên.
Hãy biến nén ảnh thành một phần của quy trình xuất bản nội dung của bạn. Nó mất một vài phút và tác động đến tốc độ site và SEO của bạn là thực tế và có thể đo lường được.
Ảnh website của bạn có lẽ là cải thiện hiệu suất lớn nhất duy nhất bạn có thể thực hiện. Các công cụ miễn phí, quy trình nhanh và kết quả hiển thị ngay lập tức trong điểm tốc độ trang của bạn.
Ready to compress your images?
Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.
Try Bulk Image Compressor