Tại sao file PNG quá nặng và cách xử lý

File PNG của bạn nặng tới 8 MB vì PNG lưu trữ chính xác từng pixel và một ảnh chụp màn hình toàn trang ở độ phân giải retina thực sự chứa lượng thông tin lớn đến như vậy. Định dạng này không loại bỏ bất kỳ thứ gì, đó là ưu điểm lớn nhất và cũng là vấn đề lớn nhất của PNG.

Có 3 cách để khắc phục điều này và mỗi cách sẽ yêu cầu bạn đánh đổi một thứ khác nhau. Giảm kích thước sẽ làm giảm độ phân giải mà có thể bạn cũng không thực sự cần dùng đến. Giảm độ sâu màu sẽ làm giảm độ chính xác của màu sắc trên ảnh chụp thực tế. Thay đổi định dạng sẽ làm giảm khả năng tương thích bên ngoài trình duyệt. Hãy lựa chọn tùy thuộc vào mục đích sử dụng của hình ảnh.

3 lựa chọn của bạn

• Giảm kích thước hình ảnh. Miễn phí và thường mang lại hiệu quả lớn nhất. Không ai cần một ảnh chụp màn hình rộng tới 5000 pixel.
• Giảm độ sâu màu. Hoạt động tốt trên đồ họa phẳng, nhưng rất tệ trên ảnh chụp thực tế.
• Thay đổi định dạng. WebP giữ lại độ trong suốt và thường có dung lượng nhỏ hơn từ 25 đến 35 phần trăm.

Tại sao file PNG lại tăng dung lượng nhanh đến vậy

Dung lượng file PNG tỷ lệ thuận trực tiếp với số lượng pixel, vì mỗi pixel đều phải được mô tả một cách chính xác. Việc tăng gấp đôi chiều rộng và chiều cao sẽ làm tăng số lượng pixel lên gấp bốn lần và dung lượng file cũng tăng lên khoảng bốn lần.

Một ảnh chụp màn hình kích thước 5120 x 2880 từ màn hình độ phân giải cao chứa 14.7 triệu pixel. Với mức 3 bytes cho mỗi pixel trước khi nén, lượng dữ liệu thô sẽ là 44 MB, và quá trình nén PNG thường giảm dung lượng xuống còn khoảng từ 4 MB đến 12 MB tùy thuộc vào lượng màu phẳng có trong hình ảnh. Kết quả cho ra file 8 MB là hoàn toàn bình thường chứ không phải là lỗi.

Cách khắc phục 1: Giảm kích thước hình ảnh

Thay đổi kích thước hình ảnh về mức tối đa mà nó sẽ hiển thị, điều này giúp loại bỏ phần lớn dung lượng file trước khi thử bất kỳ cách nào khác. Đây là cách khắc phục mang lại hiệu quả cao nhất với chi phí thấp nhất.

Hãy đo chiều rộng tối đa mà hình ảnh sẽ hiển thị trên trang web, nhân đôi con số đó cho màn hình có mật độ điểm ảnh cao (retina), và thay đổi kích thước theo kết quả đó. Một ảnh chụp màn hình hiển thị ở chiều rộng 800 pixel thì chỉ cần kích thước thực tế là 1600 pixel và không cần hơn.

Cách khắc phục 2: Giảm độ sâu màu

Chuyển đổi từ màu 24 bit sang bảng màu 8 bit giúp giảm dung lượng PNG từ 50 đến 70 phần trăm, và chỉ hoạt động hiệu quả trên các hình ảnh có số lượng màu hạn chế. Ảnh chụp màn hình giao diện, sơ đồ, logo và biểu đồ là những ứng cử viên lý tưởng.

Kỹ thuật này lưu trữ một bảng màu tối đa 256 màu và tham chiếu nó trên mỗi pixel, thay vì lưu trữ toàn bộ giá trị màu sắc. Một ảnh chụp màn hình giao diện người dùng hiếm khi chứa nhiều hơn 256 màu riêng biệt, vì vậy việc giảm này hầu như không thể nhận ra bằng mắt thường. Một bức ảnh chụp thực tế chứa hàng chục nghìn màu, do đó việc giảm tương tự sẽ tạo ra các vệt màu loang lổ rõ rệt trên bầu trời và làn da.

Cách khắc phục 3: Thay đổi định dạng

Chuyển đổi sang WebP để sử dụng trên web, định dạng này giúp giữ lại độ trong suốt và thường có dung lượng nhỏ hơn từ 25 đến 35 phần trăm so với PNG. Chỉ chuyển đổi sang JPG khi hình ảnh là ảnh chụp thực tế và không cần độ trong suốt.

• WebP lossless (không nén mất dữ liệu) dành cho đồ họa và ảnh chụp màn hình, giúp giữ nguyên chính xác từng pixel và vẫn tiết kiệm được 20 đến 30 phần trăm dung lượng.
• WebP lossy (nén mất dữ liệu) dành cho các file ảnh chụp thực tế định dạng PNG, giúp tiết kiệm dung lượng lên tới 70 phần trăm hoặc hơn.
• JPG dành cho ảnh chụp thực tế không có độ trong suốt, những trường hợp mà việc chọn định dạng PNG ngay từ đầu đã là sai lầm.
• AVIF dành cho các hình ảnh chụp thực tế có kích thước lớn, giúp nén mạnh hơn nữa đối với các file trên 100 KB.
• Đồ họa vector dành cho logo và biểu tượng, trong đó một file SVG có thể chỉ nhẹ bằng một phần nhỏ so với bất kỳ định dạng ảnh raster nào.

Nguyên nhân phổ biến nhất: Ảnh chụp thực tế lưu dưới dạng PNG

Một bức ảnh chụp thực tế được lưu dưới dạng PNG sẽ lớn gấp 3 đến 5 lần so với chính bức ảnh đó ở định dạng JPEG, mà không có sự khác biệt nào có thể nhìn thấy bằng mắt thường. Sai lầm đơn giản này là nguyên nhân của hầu hết các file PNG có dung lượng quá khổ.

Thuật toán nén của PNG tìm kiếm các điểm tương đồng lặp đi lặp lại, trong khi ảnh chụp thực tế hầu như không có sự lặp lại này ở cấp độ pixel, vì mỗi pixel đều khác biệt một chút so với pixel bên cạnh. Định dạng này cuối cùng phải lưu trữ chính xác hàng triệu giá trị gần như độc nhất. Hãy lưu ảnh chụp thực tế dưới dạng JPEG hoặc WebP và chỉ dành riêng PNG cho những hình ảnh thực sự có mảng màu phẳng hoặc cần độ trong suốt.

Cách thu nhỏ file PNG mà không làm giảm chất lượng

Để giảm dung lượng file PNG trong khi vẫn giữ nguyên chất lượng không nén mất dữ liệu (lossless), hãy thực hiện theo 5 bước sau theo thứ tự.

1. Cắt bỏ mọi vùng không sử dụng, vì các phần lề trống vẫn làm tăng dung lượng file.
2. Thay đổi kích thước về mức hiển thị tối đa mà hình ảnh cần, nhân đôi đối với màn hình có mật độ điểm ảnh cao.
3. Kiểm tra xem hình ảnh có thực sự cần độ trong suốt hay không, vì một hình ảnh đã được ghép nền phẳng sẽ nén tốt hơn.
4. Giảm bảng màu nếu hình ảnh là đồ họa phẳng chứ không phải ảnh chụp thực tế.
5. Chuyển đổi sang WebP lossless, định dạng này vẫn giữ nguyên chất lượng gốc và thường nhỏ hơn từ 20 đến 30 phần trăm.

Bước 1 và 2 thường đã tự giải quyết được vấn đề. Các bước còn lại sẽ quan trọng khi hình ảnh bắt buộc phải giữ kích thước rất lớn, chẳng hạn như ảnh chụp màn hình toàn trang trong tài liệu hướng dẫn.

Tại sao ảnh chụp màn hình lại quá lớn trên các màn hình hiện đại

Màn hình có mật độ điểm ảnh cao chụp lại hình ảnh ở độ phân giải vật lý gấp 2 hoặc 3 lần độ phân giải logic, do đó ảnh chụp màn hình của một cửa sổ rộng 1200 pixel thực tế sẽ được lưu ở kích thước 2400 hoặc 3600 pixel. File ảnh này lớn hơn rất nhiều so với kích thước cửa sổ hiển thị trên màn hình của bạn.

Độ phân giải tăng thêm đó chỉ hữu ích khi ảnh chụp màn hình được xem trên một màn hình có mật độ điểm ảnh cao khác, còn lại thì hoàn toàn lãng phí. Đối với các tài liệu hướng dẫn và bài viết hỗ trợ, việc thay đổi kích thước trở lại kích thước logic sẽ giảm một nửa kích thước các chiều và cắt giảm khoảng 75 phần trăm dung lượng file trong khi hiển thị giống hệt đối với hầu hết người đọc.

Khi nào nên giữ file PNG ở dung lượng lớn

Hãy giữ file PNG ở kích thước đầy đủ khi hình ảnh đó là file gốc, tài liệu in ấn hoặc file nguồn sẽ được chỉnh sửa sau này. Việc quyết định nén chỉ nên áp dụng cho các bản sao phân phối chứ không phải cho file gốc.

Các file thiết kế, logo gốc, tác phẩm nghệ thuật in ấn và tài liệu quét đều có lý do chính đáng để giữ dung lượng lớn. Hãy lưu trữ những file đó ở độ phân giải đầy đủ và tạo ra các bản sao nhỏ hơn cho từng mục đích sử dụng. Sai lầm là xuất bản trực tiếp file gốc thay vì lưu trữ nó, vì một file gốc chỉ tốn dung lượng ổ cứng một lần trong khi một file gốc được xuất bản trực tiếp sẽ làm tiêu tốn băng thông trong mỗi lượt truy cập.

Độ trong suốt tốn dung lượng hơn mọi người nghĩ

Kênh trong suốt (alpha channel) thêm giá trị thứ tư vào mỗi pixel, làm tăng lượng dữ liệu thô lên khoảng 33 phần trăm trước khi nén. Nhiều file PNG mang theo kênh đó mà không hề sử dụng đến.

Ảnh chụp màn hình, biểu đồ xuất ra và hình ảnh được ghép trên nền trắng thường xuyên giữ lại kênh alpha hoàn toàn mờ đục ở mọi nơi. Việc loại bỏ nó không làm thay đổi về mặt thị giác nhưng lại giúp giảm dung lượng file một cách đáng kể. Hãy kiểm tra xem hình ảnh có thực sự cần nền trong suốt hay không trước khi mặc định giữ lại kênh này, vì hầu hết các hình ảnh được đặt trên một trang web nền trắng đều không cần.

Nén file PNG có làm giảm chất lượng không

Tối ưu hóa PNG không nén mất dữ liệu (lossless) không làm mất đi bất kỳ chi tiết nào, trong khi việc giảm màu sắc hoặc kích thước sẽ thay đổi hình ảnh vĩnh viễn. 3 kỹ thuật này thường được mô tả cùng nhau nhưng chúng không hề tương đương.

Tối ưu hóa lossless sắp xếp lại cách file lưu trữ dữ liệu và thường tiết kiệm được từ 5 đến 20 phần trăm dung lượng với kết quả đầu ra giống hệt từng pixel. Việc giảm bảng màu và thay đổi kích thước sẽ làm thay đổi chính hình ảnh đó, điều này có thể chấp nhận được đối với các bản sao phân phối nhưng không thể chấp nhận được đối với các file gốc. Hãy giữ lại file gốc bất cứ khi nào quá trình giảm dung lượng không thể đảo ngược.

Khắc phục cho cả một thư mục chứa các file PNG quá khổ

Hãy xử lý cả thư mục trong một lần, vì các file PNG quá khổ thường xuất hiện theo nhóm từ cùng một nguồn. Một bộ tài liệu hướng dẫn, một thư viện ảnh chụp màn hình hoặc một file xuất ra từ công cụ thiết kế có xu hướng gặp chung một vấn đề.

Thả tối đa 500 file cùng một lúc hoặc kéo trực tiếp một file lưu trữ ZIP vào, sau đó thiết lập kích thước và định dạng một lần cho toàn bộ tệp tin. Mọi thứ đều chạy bên trong trình duyệt trên chính bộ vi xử lý của bạn, vì vậy ảnh chụp màn hình nội bộ, thiết kế sản phẩm và tài liệu của khách hàng không bao giờ được gửi lên máy chủ. Không có gì được tải lên, vì vậy không có chính sách lưu trữ nào cần đọc và không có gì bị để lại phía sau.

Hãy khắc phục tận gốc vấn đề cũng như các file ảnh. Một công cụ chụp màn hình được thiết lập để lưu PNG ở độ phân giải retina đầy đủ sẽ tiếp tục tạo ra các file 8 MB vô thời hạn. Hầu hết các công cụ chụp màn hình đều cho phép thiết lập định dạng mặc định và tỷ lệ thu phóng, việc thay đổi cả hai điều này một lần sẽ giúp bạn không cần phải xử lý lại ảnh chụp màn hình sau mỗi bài viết hỗ trợ nữa.