KaoSome Katya’s Weblog

It’s been quite a while since LL indroduced PNG image file format for upload to SL. Although it’s a very crucial development, I haven’t been able to find any information on this whatsoever neither on SL official Knowledge Base, nor anything substantial on SL Wiki, so if you are aware of any documentation available on it in reguard to SL, please, do post it in Comments for this article.

My personal observation is that together with availability of .png format for SL, image size for upload (byte-wise) has been RESTRICTED, which is not at all a bad thing, since it will help us all to fight texture lag in SL. I still have to do some research on the exact restriction numbers.

Now, what is .png and how to deal with it for best results.

PNG, pronounced by English-speaking users as “ping” (non-english speakers are allowed to say “pee-en-gee”…heh) stands for Portable Network Graphics and was designed to replace rather deficient .gif format and .tiff to some extent.

I don’t want to get into technicalities (for geeks – http://www.libpng.org/pub/png/libpng.htm) , just summarize most important features of .png:

1. PNG is an explicitly BITMAP format (There are some private extensions to PNG that add vector information in addition to PNG’s regular pixels–Macromedia’s Fireworks does something along those lines–but no valid PNG may omit the pixel data.)

2. PNG supports three main image types: truecolor, grayscale and palette-based (“8-bit”).

3. PNG’s compression is fully lossless–and since it supports up to 48-bit truecolor or 16-bit grayscale–saving, restoring and re-saving an image will not degrade its quality, unlike standard JPEG (even at its highest quality settings).

4. PNG was designed for transferring images on the Internet, that’s why it uses RGB color space, and does not support other ones, such as CMYK.

5. For the Web, PNG has three main advantages over GIF: alpha channels (variable transparency), gamma correction (cross-platform control of image brightness), and two-dimensional interlacing (a method of progressive display). PNG also compresses better than GIF in almost every case.

6. Unlike TARGA (Truevision Advanced Raster Graphics Adapter, a.k.a. TGA – Truevision Graphics Adapter) PNG is a metadata container that does not place the image data or attributes at a fixed location within the file, which considerably reduces byte-size of a .png image as compared to the image of the same resolution and pixel dimentions saved in targa. For example, transparency alpha channel is not stored within PNG file.

The implications of all the above are:

1. We are going to reduce our hard disk usage A LOT by storing our clothing files in PNG.

2. We don’t have to bother saving alpha channel for transparency anymore (which does not mean we don’t have to be well versed with it – SL still stores images in targa, and you need to know and understand transparency alpha channel to be able to work with files downloaded from SL, which contain it).

3. We need to understand image interpolation and how to use it (i will post another article on that soon, but those who attend my classes already know about it in a gist)

4. Even though PNG is a raster format, we need to acquire good skills for manipulating vector data available in Photoshop (Paths, Shape Layers, Smart Objects (from CS2 onwards), Smart Selections(CS3), Smart Filters(CS3),Text) to make the best of our editing, before images are fully prepared for saving.

Simplified guide to saving image with transparency in .png

*Even though multiple layers in .png do NOT increase file size as compared to merged layers (since PNG implies compression by default, unlike uncompressed through RLE targa files), for clothing work it is always better to store your ready files separately and keep only important data on master files with templates. Use Preset management (i.e. keep your brushes, curves, contours, colors, patterns, gradients, calculations etc. saved in separate groups for each project) and annotation tool for reminders.

1. File >>> Save for Web

2. Under Presets select PNG 24

3. Interlacing, when checked, marginally increases file size, and although it’s a useful feature, i haven’t observed and specific advantage for it in SL (but that will depend on your graphic card), so i usually recommend to keep it unchecked but this decision is up to you. If you want to see examples of how different types of Interlacing work – explore jpeg2000 Save dialog box – it shows nice previews of interlacing at work (Save As >>> JPEG2000, see under Optimization Order – this is basically how interlacing looks for PNGs on viewing – the options are different, though).

4. You will get what you see in Preview window.

5. Click Save, choose saving location and Save.

Post your questions and suggestions in Comments.

Have a good day