PNG: Difference between revisions

From OLPC
Jump to navigation Jump to search
mNo edit summary
(move some info from Image file formats in here, add sections, clean up)
 
(5 intermediate revisions by 5 users not shown)
Line 1: Line 1:
PNG is [http://www.iso.org/iso/en/CatalogueDetailPage.CatalogueDetail?CSNUMBER=29581 international image standard]. It's a lossless image format good for artworks and small scans (where [[DJVU]] and [[JBIG]] are not suitable).
Portable Network Graphics or [[PNG]] is [http://www.iso.org/iso/en/CatalogueDetailPage.CatalogueDetail?CSNUMBER=29581 international image standard]. It's a lossless image format good for artworks and small scans (where [[DJVU]] and [[JBIG]] are not suitable).


[[XULRunner]] and thus the [[Browse]] activity can directly render PNGs.
Since it's a lossless format files must be big and we should avoid them and use [[JPEG]] if possible, right? Not so. If you save a full-sized photo or raw scan in PNG format - you'll get a huge file, that's true. But if you use some simple lossy techniques first (conversion to 4 or 16 levels of grayscale or just draw 16-color image with palette from the start) then you can reduce the size of a file many times without apparent quality loss <b>and</b> without quality degradation after save/resave. [[JPEG]] is notorious for quality degradation over time: each open-edit-save cycle adds distortion - no matter what quality settings you are using (there are no lossless [[JPEG]]s unless it's [[JPEG 2000]] - but with paletted [[PNG]] you are losing quality on first save (where you ignore small variations in lighting) while further editing is lossless.


== PNG versus other formats ==
Use PNG for small artworks (where [[SVG]]'s vector nature can not produce savings), small scans (for books it's better to use [[DJVU]] or [[JBIG]]), etc. Don't forget about [http://pmt.sourceforge.net/pngcrush/ Pngcrush] - while not a panacea it often can reduce size of PNG file by 10-15% for free (without any quality loss).
Since it's a lossless format you might conclude that PNG files must be big and we should avoid them and use [[JPEG]] if possible, right? Not so. If you save a full-sized photo or raw scan in PNG format, you'll get a huge file. But if you use some simple lossy techniques first (conversion to 4 or 16 levels of grayscale or just draw 16-color image with palette from the start) then you can reduce the size of a file many times without apparent quality loss ''and'' without quality degradation after save/resave. [[JPEG]] is notorious for quality degradation over time: each open-edit-save cycle adds distortion &mdash; no matter what quality settings you are using (there are no lossless [[JPEG]]s unless it's [[JPEG 2000]]) &mdash; but with paletted [[PNG]] you are losing quality on first save (where you ignore small variations in lighting) while further editing is lossless.


Use PNG for small artworks (where [[SVG]]'s vector nature can not produce savings), small scans (for books it's better to use [[DJVU]] or [[JBIG]]), etc. Don't forget about [wikipedia:OptiPNG]] and [http://pmt.sourceforge.net/pngcrush/ Pngcrush] &mdash; while not a panacea such tools often can reduce size of PNG file by 10-15% for free (without any quality loss).
And finally: don't use the "Save" option in Photoshop - use "Save for the Web" instead: it's possible to store comments in PNG and Photoshop is abusing this possibility to store a lot of proprietary settings in PNG files - doubling and tripling the size of small PNG files! And since OLPC will not include Photoshop these settings will just uselessly fill up storage space.


== More tips ==
There is a page on [[choosing image formats]] that will help you to understand the differences and how to know which format will be best for the intended use.
If you photograph some text then take the JPEG from the camera and convert it to a two-color image and then save as PNG. This will sharpen the edges of the letters and make it easier to read. In addition you should reduce the size of the image by taking into consideration the number of bits available on the screen. The first systems will be 1200 x 900 at 200dpi.


Note: PNG can waste a lot of space if you try to keep the full range of 16777216 colors or even 256 shades of gray &mdash; and if it's text or diagram all this space will be wasted anyway. Use PNG with color palette instead.
More info can be found on [http://en.wikipedia.org/wiki/PNG Wikipedia].

Don't use the "Save" option in Photoshop, use "Save for the Web" instead: it's possible to store comments in PNG and Photoshop is abusing this possibility to store a lot of proprietary settings in PNG files &mdash; doubling and tripling the size of small PNG files! And since OLPC will not include Photoshop these settings will just uselessly fill up storage space.

Mozilla created an unofficial extension to the PNG specification, APNG (for Animated Portable Network Graphics). It allows for animated PNG files that work similarly to animated GIF files, while supporting 24-bit images and 8-bit transparency not available for GIFs.

== See also ==

* [[Image file formats]] will help you to understand the differences and how to know which format will be best for the intended use.

* More info can be found in [[wikipedia:PNG]].

[[Category:File formats]]

Latest revision as of 09:10, 11 January 2009

Portable Network Graphics or PNG is international image standard. It's a lossless image format good for artworks and small scans (where DJVU and JBIG are not suitable).

XULRunner and thus the Browse activity can directly render PNGs.

PNG versus other formats

Since it's a lossless format you might conclude that PNG files must be big and we should avoid them and use JPEG if possible, right? Not so. If you save a full-sized photo or raw scan in PNG format, you'll get a huge file. But if you use some simple lossy techniques first (conversion to 4 or 16 levels of grayscale or just draw 16-color image with palette from the start) then you can reduce the size of a file many times without apparent quality loss and without quality degradation after save/resave. JPEG is notorious for quality degradation over time: each open-edit-save cycle adds distortion — no matter what quality settings you are using (there are no lossless JPEGs unless it's JPEG 2000) — but with paletted PNG you are losing quality on first save (where you ignore small variations in lighting) while further editing is lossless.

Use PNG for small artworks (where SVG's vector nature can not produce savings), small scans (for books it's better to use DJVU or JBIG), etc. Don't forget about [wikipedia:OptiPNG]] and Pngcrush — while not a panacea such tools often can reduce size of PNG file by 10-15% for free (without any quality loss).

More tips

If you photograph some text then take the JPEG from the camera and convert it to a two-color image and then save as PNG. This will sharpen the edges of the letters and make it easier to read. In addition you should reduce the size of the image by taking into consideration the number of bits available on the screen. The first systems will be 1200 x 900 at 200dpi.

Note: PNG can waste a lot of space if you try to keep the full range of 16777216 colors or even 256 shades of gray — and if it's text or diagram all this space will be wasted anyway. Use PNG with color palette instead.

Don't use the "Save" option in Photoshop, use "Save for the Web" instead: it's possible to store comments in PNG and Photoshop is abusing this possibility to store a lot of proprietary settings in PNG files — doubling and tripling the size of small PNG files! And since OLPC will not include Photoshop these settings will just uselessly fill up storage space.

Mozilla created an unofficial extension to the PNG specification, APNG (for Animated Portable Network Graphics). It allows for animated PNG files that work similarly to animated GIF files, while supporting 24-bit images and 8-bit transparency not available for GIFs.

See also

  • Image file formats will help you to understand the differences and how to know which format will be best for the intended use.