Làm cách nào để giảm kích thước tệp PNG cho web?


16

Tôi có một tệp PNG-24 với nền trong suốt và kích thước hiện tại của nó là 1,5 MB. Làm cách nào để giảm kích thước hoặc sử dụng định dạng tệp PNG-8 và giữ nguyên chất lượng?

nhập mô tả hình ảnh ở đây

Tệp PNG từ đây: http://www19.zippyshare.com/v/69590430/file.html

Ví dụ Hình ảnh được tải lên Tôi đã thử tất cả các đề xuất nhưng không có kết quả tốt xin vui lòng tư vấn

cảm ơn


Bạn đang sử dụng Save For Web ...? Nó sẽ cung cấp cho bạn các tùy chọn để giảm kích thước, bao gồm cả độ sâu màu.
James P

Hình ảnh ví dụ của bạn là một tệp JPEG. Nếu bạn muốn mọi người thử các công cụ / phương pháp khác nhau trên đó, bạn nên cung cấp một trong các tệp PNG thay vì ...!
Laurent Parenteau

trang web tải lên đã chuyển đổi nó thành jpg. đây là tệp png s8.postimage.org/z4apal6z9/cw_Copy.png ..... xin vui lòng không sử dụng posterize vì nó không hoạt động với các tệp khác mà tôi có ..... cảm ơn
Welliam

1
Liên kết đó cũng là một JPEG.
Dan D.

lần này tôi chắc chắn đó là png www19.zippyshare.com/v/69590430/file.html....... cảm ơn sự giúp đỡ của bạn
Welliam

Câu trả lời:


6

PNG là định dạng nén không mất dữ liệu - không thay đổi tài liệu nguồn trong tệp, có rất ít cách để tăng nén ngoài mức nén cao nhất mặc định. Cách thực sự duy nhất để giảm kích thước sẽ là thay đổi hình ảnh, bằng cách giảm độ phân giải hoặc độ sâu màu để nén PNG có độ phức tạp ít hơn để làm việc.

Nếu bạn muốn mức độ nén cao cho hình ảnh và không quan tâm đến việc lưu trữ dữ liệu không mất dữ liệu, hãy sử dụng JPEG.


4
Tôi sẽ không nói ít. Save For Web của Photoshop kém đến mức PNGOUT thường có thể giảm các tệp xuống 20 đến 40% một cách dễ dàng. Và Photoshop không hỗ trợ PNG8 + alpha, có thể nhỏ hơn 70% cho một số hình ảnh.
Kornel

Những con số tốt nhất tôi từng thấy đã được chứng minh là khoảng 8-15% nhưng hãy liên kết với tôi để có dữ liệu tốt hơn.
mikebabcock

1
Tôi cần tối ưu hóa một tệp png duy nhất và sử dụng tinypng.com cho việc đó. Nó giúp tôi tiết kiệm hơn 50% dung lượng.

9

RIOT có thể làm điều đó, và nhiều hơn nữa.

Công cụ tối ưu hóa hình ảnh cấp tiến (viết tắt là RIOT) là một trình tối ưu hóa hình ảnh miễn phí cho phép bạn điều chỉnh trực quan các tham số nén trong khi vẫn giữ kích thước tệp tối thiểu.

Nó sử dụng với giao diện song song (chế độ xem kép) hoặc giao diện xem đơn để so sánh ảnh gốc với hình ảnh được tối ưu hóa trong thời gian thực và ngay lập tức thấy kích thước tệp kết quả.

Trình tối ưu hóa hình ảnh nhẹ, nhanh và dễ sử dụng, nhưng mạnh mẽ cho người dùng cao cấp. Bạn sẽ có thể kiểm soát nén, số lượng màu sắc, cài đặt dữ liệu meta và nhiều hơn nữa, và chọn định dạng hình ảnh (JPEG, GIF hoặc PNG) cho tệp đầu ra của bạn.

Một khả năng khác là sử dụng kết hợp pngquant, pngout và pngcrush, như được mô tả ở đây , nhưng đây là từ dòng lệnh.

Dưới đây là hướng dẫn cách chuyển đổi hình ảnh png24 thành png8 cho độ tốt của eg6, tất cả thông qua dòng lệnh bằng các công cụ nguồn mở (tôi nghĩ) pngquant + pngout + pngcrush.

1- định lượng hình ảnh thành 256 (vì vậy về cơ bản png8′s trông tào lao với các họa tiết lớn hoặc các họa tiết có dải màu lớn).

pngquant 256 some_24_bit.png

2- chuyển đổi hình ảnh từ png24 sang png8

pngout -c3 -d8 -y -force some_24_bit.png some_8_bit.png

3- nén hình ảnh

pngcrush some_8_bit.png -bit_depth 8 -brute -rem alla -reduce some_8_bit_small.png


6

Hãy thử TinyPNG

Từ trang web của họ:

Làm thế nào nó hoạt động?

Khi bạn tải lên tệp PNG (Đồ họa mạng di động), các màu tương tự trong hình ảnh của bạn sẽ được kết hợp. Kỹ thuật này được gọi là lượng tử hóa trực tuyến. Vì số lượng màu bị giảm, các tệp PNG 24 bit có thể được chuyển đổi thành các hình ảnh màu được lập chỉ mục 8 bit nhỏ hơn nhiều. Tất cả các siêu dữ liệu không cần thiết cũng bị tước bỏ. Kết quả: các tệp PNG nhỏ với 100% hỗ trợ cho độ trong suốt.

Họ có hai lựa chọn:

  • Kéo và thả hình ảnh vào trang web của họ và nó sẽ được xử lý tự động. Dịch vụ miễn phí. (Tối đa 20 hình ảnh. Mỗi ảnh tối đa 5 MB)
  • Plugin Photoshop. Cái này có giá $.

Tôi chưa thử plugin PS vì vậy không thể nhận xét về hiệu quả của nó.


Đây là một mẹo thực sự tốt, TinyPNG đã giảm tệp PNG 24 bit của tôi ra khỏi Photoshop, từ 200 nghìn xuống còn 50 nghìn và nó vẫn giữ được độ trong suốt pha trộn! Cảm ơn vì đã trả lời. LƯU Ý nó gần như không thể phân biệt được về chất lượng hình ảnh.
TripleAntigen

Nó thật sự có hiệu quả! Hình ảnh PNG 1MB của tôi đã trở thành 253KB mà không mất chất lượng!
BrunoSerrano

5

Nếu bạn không quan tâm đến dòng lệnh, hãy xem OptiPNG , đó có thể là những gì bạn đang theo đuổi.

OptiPNG là một trình tối ưu hóa PNG giúp giải nén các tệp hình ảnh thành kích thước nhỏ hơn mà không làm mất bất kỳ thông tin nào. Chương trình này cũng chuyển đổi các định dạng bên ngoài (BMP, GIF, PNM và TIFF) thành PNG được tối ưu hóa và thực hiện kiểm tra và sửa lỗi toàn vẹn PNG.


Cảm ơn nhưng không tối ưu hóa nhiều !! Tôi đã tải lên hình ảnh
Welliam

3

Sử dụng kết hợp pngoutdeflopt . pngoutsẽ tự động xác định xem màu PNG của bạn có phù hợp với PNG-8 hay không và sử dụng nó. defloptsẽ loại bỏ một số byte bổ sung từ hình ảnh đã được tối ưu hóa - đó là tiện ích để làm việc với bất kỳ dữ liệu bị xì hơi nào và PNG là một trong số đó.


cảm ơn nhưng pngout thất bại giảm vài kb thôi !!
Welliam

1
Bạn có mong đợi phép thuật? Hình ảnh của bạn rõ ràng có hơn 256 màu. Áp phích nó để giảm số lượng màu sắc đầu tiên.
Oleg V. Volkov

Khi kích thước giảm từ 970 xuống 945, đây không phải là kết quả tốt, áp phích cũng không hoạt động với các PNG khác mà tôi có.
Welliam

3

Một ý tưởng hay để xử lý PNG với kênh alpha trong bối cảnh phát triển trang web là để máy chủ thực hiện thủ thuật cho bạn: tự động tách dữ liệu hình ảnh khỏi kênh alpha trên máy chủ, tối ưu hóa cả hai cách riêng biệt và kết hợp lại chúng bằng cách sử dụng phần tử canvas và một số JavaScript trong trình duyệt. Ta-Đa! Hoạt động với tất cả các trình duyệt hiện đại.

Dưới đây là giải thích cách nó được thực hiện:

http://headers-al yet-sent.com/artikel/shrinkimage-1/

Bạn cũng sẽ tìm thấy một gói ZIP hoàn chỉnh với tập lệnh PHP và plugin jQuery. Hãy cho chúng tôi biết bạn nghĩ gì về điều này.


1

Nếu bạn thực sự cần thu nhỏ hình ảnh và tất cả các đề xuất dễ dàng không hoạt động, câu trả lời cuối cùng là chia hình ảnh thành các phần có thể nén và kết hợp lại chúng trên máy khách với kịch bản.

Hình ảnh từ câu hỏi trông giống như một dải màu với các đường thẳng đứng và một số mảnh vỡ / nhiễu. Chia nó thành các lớp sau:

  1. Độ dốc màu không có đường hoặc nhiễu. Điều này sẽ nén tốt trong PNG và rất tốt trong JPEG. Thậm chí tốt hơn, sử dụng JavaScript để tạo gradient màu trên máy khách. Bạn có thể có thể làm điều đó trong ít hơn 200 byte JS.
  2. Các đường thẳng đứng không có màu sắc hoặc tiếng ồn. Bạn có thể nén kênh này xuống một kênh 4 bit (alpha hoặc xám). Bạn chỉ cần một hình ảnh cao 1 pixel, bạn có thể kéo dài. Điều đó sẽ nén rất tốt trong PNG.
  3. Tiếng ồn. Một lần nữa, tất cả những gì bạn cần là một kênh 4 bit đơn (alpha hoặc xám). Không có màu hoặc đường kẻ, điều này sẽ nén rất tốt ở định dạng PNG hoặc JPEG.

Kết hợp các lớp thành một hình ảnh duy nhất với JavaScript và toàn bộ "hình ảnh" của bạn có thể là 15KB hoặc ít hơn.

Loại công việc này là tiêu chuẩn công nghiệp trong Games trong nhiều thập kỷ, và vẫn còn. Điều tuyệt vời là Photoshop đã có tất cả các lớp riêng biệt đó, nếu bạn tạo hình ảnh của mình như một chuyên gia.


1

Các tệp PNG tiêu chuẩn đã là định dạng hình ảnh nén nhất mà bạn có thể sử dụng, do đó tại sao các tệp PNG được sử dụng rất nhiều cho hình ảnh trên các trang web, đặc biệt là cho mục đích thiết kế.

Nhưng vẫn còn một cách bạn có thể nén các tệp PNG hơn nữa; bằng cách giảm số lượng màu được sử dụng trong hình ảnh. Điều này thường có thể làm giảm kích thước tệp lên đến 70% hoặc thậm chí cao hơn.

Phần mềm miễn phí tự động tốt nhất với tỷ lệ nén tổng thể cao nhất tôi tìm thấy là FileOptimizer sử dụng nhiều công cụ (ví dụ: PngOptimizer, PNGOUT, pngwolf, v.v.) để nén hình ảnh ở kích thước nhỏ nhất có thể.

Một công cụ trực tuyến khác mà tôi tìm thấy có kết quả tốt là công cụ này: http://www.giftofspeed.com/png-compressor/


1

Hãy để tôi giới thiệu FileOptimizer . Nó kết hợp các phương pháp khác nhau để tối ưu hóa hình ảnh (bao gồm loại bỏ EXIF ​​để lưu thêm vài byte - có thể được tắt).

Kết quả kiểm tra và so sánh với các giải pháp khác.

nhập mô tả hình ảnh ở đây


0

ScriptPNG http://css-ig.net/scriptpng

nó cung cấp cho bạn khoảng 10 tùy chọn khác nhau bao gồm mất mát! Tôi đã thử một bó và tệp bó windows này (với bó .exes) rất tuyệt

Cá nhân tôi sử dụng nó để nén mất 8 bit. Không thực sự chắc chắn làm thế nào nó hoạt động nhưng ảnh chụp màn hình của tôi trông giống nhau. Tôi sử dụng nó để nén ảnh chụp màn hình. Tôi có khoảng 2GB pngs, giờ chỉ còn 700mb

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.