Image File Size Guide: Reduce KB and MB Cleanly

Cập nhật lần cuối: June 28, 2026

Kích thước file ảnh là số byte mà một hình ảnh sử dụng trên đĩa hoặc qua mạng. Nó được hiển thị bằng KB, MB, hoặc đôi khi là GB. Một tệp trở nên lớn khi nó có quá nhiều pixel, sử dụng định dạng sai, giữ lại siêu dữ liệu không cần thiết, hoặc được xuất ở cài đặt chất lượng cao hơn mức sử dụng cuối cùng yêu cầu.

Hướng dẫn này cung cấp cho bạn các quy tắc thực tế để thu nhỏ hình ảnh trước khi tải chúng lên trang web, nguồn sản phẩm (product feed), email, hoặc CMS.

Câu trả lời nhanh: làm thế nào để giảm kích thước file ảnh mà không mất chất lượng?

Sử dụng tệp nguồn sạch nhất, thay đổi kích thước nó về các chiều lớn nhất bạn thực sự hiển thị, sau đó xuất ra định dạng web hiện đại như WebP hoặc AVIF. Đối với hầu hết các bức ảnh, hãy bắt đầu bằng chất lượng WebP 75-85. Đối với ảnh chụp màn hình, logo và đồ họa có văn bản nhỏ, hãy thử nghiệm PNG hoặc WebP không mất dữ liệu trước khi sử dụng nén có tổn hao (lossy compression).

Lỗi lớn nhất là nén một bức ảnh camera 4000 px nhưng vẫn tải lên ở kích thước 4000 px cho một vị trí chỉ cần 800 px. Điều đó giữ lại các pixel thừa mà người dùng không bao giờ thấy. Hãy thay đổi kích thước trước, sau đó điều chỉnh định dạng và chất lượng.

Sau khi xuất, hãy kiểm tra kết quả ở kích thước hiển thị cuối cùng của nó. Nếu hình ảnh vẫn trông sạch sẽ và tệp nằm trong ngân sách trang hoặc tải lên của bạn, hãy dừng lại. Nếu nó trông mờ, khối vuông (blocky), hoặc nhòe, hãy tăng chất lượng hoặc sử dụng định dạng phù hợp hơn. Để có quy trình đo lường sâu hơn, hãy sử dụng hướng dẫn tỷ lệ nén ảnh.

Đối với bản cập nhật này, tôi đã đo bốn đồ họa WebP kích thước 1400 by 788 được tạo ra và sử dụng trong bài viết: các tệp cục bộ dao động từ 28 KB đến 52 KB. Đây là một lời nhắc nhở hữu ích rằng đồ họa hướng dẫn phẳng có thể nhỏ ngay cả ở kích thước hào phóng, trong khi ảnh chi tiết thường cần nhiều byte hơn.

Điều gì ảnh hưởng đến kích thước file ảnh?

Bốn yếu tố quyết định hầu hết các vấn đề về kích thước file ảnh: kích thước pixel, nội dung hình ảnh, định dạng tệp và cài đặt bộ mã hóa (encoder). Siêu dữ liệu (Metadata) cũng có thể quan trọng, đặc biệt khi dữ liệu EXIF camera, trường GPS, ảnh thu nhỏ (thumbnails), và lịch sử chỉnh sửa của trình chỉnh sửa bị giữ lại trong các tệp công khai.

Kích thước pixel thiết lập khối lượng công việc thô. Một hình ảnh 1600 by 1200 có số pixel gấp bốn lần so với hình ảnh 800 by 600. Nén có thể giảm byte cuối cùng, nhưng nó vẫn phải mô tả khung vẽ lớn hơn.

Đối với việc phân phối trên web, hướng dẫn của Google về hình ảnh khuyến nghị các phần tử hình ảnh có thể thu thập (crawlable image elements), văn bản alt mô tả, và các định dạng được hỗ trợ như JPEG, PNG, WebP, SVG, và AVIF trong thực tiễn tốt nhất về hình ảnh của Google. Tệp vẫn cần hữu ích cho người đọc; một hình ảnh nhỏ nhưng không rõ ràng thì không phải là tối ưu hóa tốt.

Tại sao ảnh của tôi lại nhiều MB như vậy?

Ảnh của bạn có thể quá lớn vì nó được xuất ra để chụp hoặc chỉnh sửa, chứ không phải để phân phối. Ảnh gốc từ điện thoại hoặc camera có thể rộng 3000-6000 px. Điều đó hữu ích như một tệp master. Nó thường lãng phí đối với ảnh nội dung blog, ảnh thu nhỏ sản phẩm, banner email, hoặc ảnh hồ sơ.

Các nguyên nhân phổ biến:

• Tải trực tiếp tệp camera có độ phân giải đầy đủ lên trang web.
• Sử dụng PNG cho hình ảnh chụp.
• Lưu JPEG ở chất lượng 100% mà không mang lại lợi ích hiển thị rõ rệt nào.
• Ảnh chụp màn hình được xuất dưới dạng PNG retina lớn và không bao giờ thay đổi kích thước.
• EXIF và bản xem trước nhúng vẫn còn trong bản sao công khai.
• Một CMS tạo ảnh thu nhỏ nhưng vẫn phục vụ tệp gốc trên trang.
• Hình ảnh trong suốt được lưu dưới dạng PNG khi WebP lossless sẽ nhỏ hơn.
• Ảnh đã được chỉnh sửa và lưu lại nhiều lần, thêm các hiện tượng giả (artifacts) mà không giải quyết vấn đề kích thước.

Nếu vấn đề là giới hạn tải lên cứng, hãy bắt đầu bằng việc thay đổi kích thước và định dạng trước khi giảm chất lượng một cách mạnh tay. Hướng dẫn nén ảnh xuống 100KB hữu ích khi một biểu mẫu hoặc trang liệt kê có giới hạn byte nghiêm ngặt.

Kích thước file ảnh nào là tốt cho các trang web?

Không có kích thước hoàn hảo phổ quát, nhưng có những ngân sách khởi điểm hữu ích. Ảnh hero của trang chủ có thể lớn hơn ảnh thu nhỏ thẻ (card thumbnail) nhỏ. Ảnh chi tiết sản phẩm cần nhiều chi tiết hơn kết cấu nền. Mục tiêu là gửi đủ pixel cho công việc và không hơn thế nữa.

Hãy coi đây là điểm khởi đầu, không phải luật. Một bức ảnh sản phẩm trang sức với các cạnh kim loại sắc nét có thể cần nhiều byte hơn. Một infographic đơn giản có thể nhỏ hơn nhiều. Đồ họa phẳng nén tốt vì chúng tránh được chi tiết kết cấu, hạt và bóng tối khiến ảnh camera nặng hơn.

Nếu bạn cần một quy trình xuất bản đầy đủ bao gồm kích thước, các biến thể đáp ứng (responsive variants), tải lười (lazy loading), và kiểm tra CDN, hãy sử dụng danh sách kiểm tra tối ưu hóa hình ảnh hoàn chỉnh.

Định dạng nào làm cho file ảnh nhỏ hơn?

Định dạng chấp nhận được nhỏ nhất phụ thuộc vào nội dung của hình ảnh. Ảnh thường giảm tốt với WebP hoặc AVIF. Ảnh chụp màn hình và đồ họa có văn bản có thể trông tệ nếu nén có tổn hao làm mềm các cạnh. Logo và biểu tượng có thể tốt hơn dưới dạng SVG nếu chúng là tác phẩm nghệ thuật vector.

[Hướng dẫn loại và định dạng tệp ảnh] của MDN mô tả sự đánh đổi giữa JPEG, PNG, WebP, AVIF, GIF, và SVG, bao gồm cả hỗ trợ cho hành vi tổn hao (lossy), không mất dữ liệu (lossless), và trong suốt. Hãy sử dụng nó làm tài liệu tham khảo khi bạn quyết định xem hình ảnh nên được nén, chuyển đổi hay giữ nguyên trạng thái lossless.

Nếu bạn đang lựa chọn giữa hai định dạng web hiện đại, hãy đọc so sánh AVIF vs WebP. AVIF thường nén ảnh rất tốt, nhưng WebP nhanh, được hỗ trợ rộng rãi và đơn giản để thêm vào các quy trình hiện có.

Bạn nên giảm kích thước file ảnh theo từng bước như thế nào?

Sử dụng cùng một thứ tự mỗi lần. Kéo thanh trượt chất lượng xuống 40% ngẫu nhiên sẽ tạo ra hình ảnh mềm và kết quả không nhất quán.

1. Giữ tệp nguồn sạch lớn nhất làm tệp master của bạn.
2. Cắt (Crop) cho bố cục cuối cùng trước khi tạo các bản sao phân phối.
3. Thay đổi kích thước về chiều rộng lớn nhất mà trang, email hoặc feed thực sự hiển thị.
4. Chọn định dạng theo nội dung: WebP hoặc AVIF cho ảnh, lossless cho đồ họa nặng văn bản.
5. Xuất hai hoặc ba ứng viên chất lượng.
6. Loại bỏ siêu dữ liệu không cần thiết cho bản sao công khai.
7. So sánh các ứng viên ở kích thước hiển thị cuối cùng trên máy tính để bàn và di động.
8. Kiểm tra kích thước byte sau tất cả các bước xuất, chứ không phải trước đó.
9. Xuất bản lên một CDN hoặc URL media ổn định.
10. Xác minh URL cuối cùng trả về HTTP 200 và trang hiển thị tài sản dự kiến.

Đối với một thư mục tệp, đừng điều chỉnh từng hình ảnh bằng tay trước. Chọn một bức ảnh đại diện, một bức ảnh khó, và một ảnh chụp màn hình. Tìm các cài đặt hoạt động cho các mẫu đó, sau đó xử lý hàng loạt phần còn lại. Hướng dẫn thay đổi kích thước hàng loạt bao gồm mô hình dòng lệnh để thay đổi kích thước nhiều tệp từ một thư mục nguồn.

Bạn nên sử dụng cài đặt chất lượng nào?

Hãy bắt đầu ở mức trung bình và chỉ di chuyển khi hình ảnh yêu cầu bạn làm vậy. Đối với ảnh WebP, q75-q85 là dải thử nghiệm hợp lý. Đối với JPEG, 80-85 thường hoạt động cho các ảnh web thông thường. Đối với AVIF, các số chất lượng không tương đương với WebP hoặc JPEG, vì vậy hãy so sánh đầu ra bằng mắt thay vì khớp giá trị thanh trượt.

Sử dụng bảng này để thử nghiệm lần đầu:

Hướng dẫn web.dev về tối ưu hóa Largest Contentful Paint là một lời nhắc nhở hữu ích rằng byte hình ảnh chỉ là một phần của hiệu suất. Một ảnh hero cũng cần được khám phá sớm, được ưu tiên chính xác và có kích thước phù hợp với viewport.

Làm thế nào để kiểm tra kích thước file ảnh trước khi xuất bản?

Kiểm tra cả kích thước và byte. Trên macOS, Get Info của Finder hiển thị kích thước tệp, và Preview hoặc trình chỉnh sửa hình ảnh có thể hiển thị kích thước. Trên Windows, Properties hiển thị kích thước tệp và Details hiển thị kích thước. Trong quy trình dòng lệnh (command-line workflow), identify image.webp từ ImageMagick báo cáo chiều rộng, chiều cao và thông tin tệp.

Đối với công việc trang web, cũng kiểm tra những gì trình duyệt tải xuống. Mở trang, kiểm tra bảng Network, lọc theo hình ảnh, và xem byte được truyền. Điều này bắt lỗi phổ biến khi tệp cục bộ nhỏ nhưng trang vẫn yêu cầu một URL cũ hơn, nặng hơn.

Trước khi xuất bản, xác nhận:

• Hình ảnh không rộng hơn kích thước lớn nhất mà vị trí hiển thị yêu cầu.
• Tệp đã xuất là WebP, AVIF, JPEG, PNG, hoặc SVG vì một lý do rõ ràng.
• Kích thước byte phù hợp với trường hợp sử dụng.
• Hình ảnh vẫn trông sạch sẽ ở kích thước hiển thị.
• Alt text mô tả hình ảnh có thể nhìn thấy.
• URL CDN trả về HTTP 200.
• Trang không tải tệp gốc độ phân giải đầy đủ ẩn.

Nếu bạn không chắc liệu hình ảnh quá lớn do kích thước hay nén, hãy sử dụng kiểm tra kích thước và chiều rộng ảnh trước khi thay đổi định dạng.

Các lỗi kích thước file cần tránh

Hầu hết các vấn đề về kích thước tệp đều là các vấn đề quy trình làm việc thông thường. Chúng xảy ra khi chỉnh sửa, tải lên và xuất bản được coi là cùng một bước.

Tránh những lỗi sau:

• Tải tệp camera master làm hình ảnh web công khai.
• Sử dụng PNG cho mọi hình ảnh vì nó có cảm giác an toàn hơn.
• Xuất JPEG ở 100% và giả định rằng nó đẹp hơn về mặt thị giác.
• Nén trước khi thay đổi kích thước.
• Nén lại cùng một JPEG mỗi khi trang được cập nhật.
• Giữ siêu dữ liệu GPS trong các tệp công khai.
• Đánh giá chất lượng ở mức phóng to 400% mà không kiểm tra kích thước hiển thị cuối cùng.
• Gửi một hình ảnh desktop khổng lồ cho người dùng di động.
• Thay thế một hình ảnh rõ bằng một hình ảnh nhỏ hơn nhưng gây hiểu lầm.
• Quên cập nhật Open Graph và ảnh bìa bài viết sau khi thay đổi tài sản.

Đối với các trang nặng về thiết bị di động, hãy kết hợp quyết định kích thước tệp với việc phân phối đáp ứng (responsive delivery). Hướng dẫn tối ưu hóa hình ảnh di động giải thích cách bộ nguồn (source sets), chiều rộng viewport và mức độ ưu tiên tải ảnh hưởng đến hình ảnh thực tế người dùng nhận được.

Danh sách kiểm tra kích thước file ảnh

Sử dụng lần kiểm tra cuối cùng này trước khi tải hình ảnh lên trang, cửa hàng, email hoặc CMS.

Quy tắc thực tế rất đơn giản: thay đổi kích thước trước, chọn định dạng thứ hai, điều chỉnh chất lượng thứ ba, và xác minh URL cuối cùng. Kích thước tệp chỉ thành công khi hình ảnh vẫn đủ rõ ràng cho công việc của nó.