Saving the world (and precious bandwidth) with smaller .PNGs

This section is filled to the brim with helpful resources for Wolfhome, including the Rules of the Wolfhome Forums. This is the first place you should visit on our board!
Post Reply
User avatar
john locke
Pack Initiate
Pack Initiate
Posts: 266
Joined: Tue Oct 06, 2009 5:36 pm
Location: nyc

Wed Feb 24, 2010 1:49 am

Unfortunately, bandwidth is scarce and there's an apparent need for larger file caps. Fortunately, you can take matters into your own hands and cut down on your file sizes without noticeably reducing image quality. The best part is that it's easy and free (mostly, not considering software cost). Don't worry, there are options if you don't have Photoshop.

This thread will serve as a usable and thorough guide for optimizing .PNG poses for use on the WolfHome chat. I'll try to keep the technical stuff simple and concise (boring stuff you dont really care about) and get to how you can do your part to save the internet and your own hard drive space (stuff you should care about).

Please feel free to point people to this guide, especially if they're having trouble with Wolfhome's pose caps. (The only thing I ask is please don't republish this guide as your own, I spent a lot of time on it!)

Thanks to Kesame and Dip, who have graciously allowed me to use their pose for the purpose of this guide.
This pose is not free and may not be used without their permission.

Click here to skip the text and jump into it
Last edited by john locke on Thu Feb 25, 2010 10:50 pm, edited 6 times in total.
0 x
a beautiful gasoline rainbow
be kind, everyone you meet is fighting a hard battle

User avatar
john locke
Pack Initiate
Pack Initiate
Posts: 266
Joined: Tue Oct 06, 2009 5:36 pm
Location: nyc

Wed Feb 24, 2010 1:50 am

- Understanding .PNGs (and other things)

Back in the infancy of the web where blinking marquees sat atop a sea of animated tiled stars, there was the .GIF. Instead of static .JPG and .BMPs, one of the cool things .GIFs could do was animation. The other useful (arguably, more important) thing .GIF brought to the table was transparency.

So, why do we need .PNG files when .GIF files also do transparency? Simply, .GIFs are limited when it comes to both color and transparency. .GIFs are limited to a palette of 256 of any given RGB value, and pixels are either transparent or not transparent (basically, just ON or OFF). This would sorta kinda work for simple (in terms of color) poses with clean edges, but any relatively complex poses that have transparency ranges (smoke from a cigarette, shadows on the ground, etc - basically anything that required PARTIAL transparency instead of just ON or OFF) are out of luck.

- Why are .PNG's better?

Granted, .PNGs cannot normally be animated like .GIFs, but Wolfhome doesn't allow animated poses anyways so really, for the purpose of this guide - who cares?

.PNGs do mostly what .GIFs do, only they do it better - it's like running in track shoes versus running in boots. They are not limited to 256 colors like .GIFs are so you can show many more colors at the same time (more depth in poses).

In .GIFs, transparency is either ON or OFF (in regards to individual pixels). In .PNGs, each pixel can be ON, OFF or in between (this means partial transparency which is VITAL for things like shadows - think about .GIF vs .PNG transparency like a normal light switch vs. a dimmer light switch).

And as a final blow, they compress better, which means smaller file sizes. .PNG entered the game and practically made the .GIF obselete.
Last edited by john locke on Thu Feb 25, 2010 10:54 pm, edited 7 times in total.
0 x
a beautiful gasoline rainbow
be kind, everyone you meet is fighting a hard battle

User avatar
john locke
Pack Initiate
Pack Initiate
Posts: 266
Joined: Tue Oct 06, 2009 5:36 pm
Location: nyc

Wed Feb 24, 2010 1:51 am

- What is PNG optimization, and why should I optimize (or care)?

PNG optimization is simply reducing the file size of the final image without any noticable loss of image quality. This is useful to you for a few reasons. The most obvious: staying under Wolfhome's strict pose size limit while still having a fairly complex pose.

Secondly and more importantly, PNG optimization saves bandwidth and server space.

Okay, okay. I know what you're thinking. But I don't care about bandwidth and server space, I just want to be able to use my poses! That's all fine and well (you selfish thing), but if you optimize your image files, you are really helping the greater good. How?

It's really all about the numbers. While 100kb is relatively small in the scope of things, 100kb multiplied a whole bunch of times really adds up. Now, I realize that different poses have different sizes and the number of users fluctuates, but excuse me while I use guesstimate numbers to prove a point, instead of trying to reach a concrete conclusion without any concrete numbers (.. get over it).

Currently, there's an average of about 50 users on the Wolfhome chat at any given time, and it rockets past 200 users during peak hours. I'd say that 70kb is a fair estimate for an average pose. Let's assume an average of 125 users, all using 70kb poses.

125 x 70kb = 8750 kb = 1.06 mb

Okay, doesn't sound like a big deal, right? But that's only calculating the first time each of those 125 users enter a room. If every one of those users changes their pose five times using 70kb poses, the total becomes:

5 x 8750kb = 43750 kb = 5.34 mb

A few megabytes may sound like chump change, but keep in mind that the really simple calculation above doesn't factor in things like how many times poses are really being changed, how many times users enter and leave rooms or even how many poses are being uploaded (everything takes up space). Also keep in mind that it does not factor time - Wolfhome's available 24/7, 365 days of the week.

What does this mean for you, the user? The bottom line is that if there are smaller file sizes all around, everything loads faster, there's less strain on the server, there's more server space for potential new poses and there's much less bandwidth being consumed. Everybody's happy, especially underdog. :)

Plus, optimizing your .PNGs is easy and pretty much free, so there's no excuse not to.
Last edited by john locke on Thu Feb 25, 2010 10:56 pm, edited 4 times in total.
0 x
a beautiful gasoline rainbow
be kind, everyone you meet is fighting a hard battle

User avatar
john locke
Pack Initiate
Pack Initiate
Posts: 266
Joined: Tue Oct 06, 2009 5:36 pm
Location: nyc

Wed Feb 24, 2010 1:52 am

- What tools do I need?

Not much, actually! You just need:

    Web browser
    * Adobe Photoshop / Elements

* Optional, but this is where you're going to get the best results. I understand that not everybody has access to this expensive tool, but don't worry - there are other options.
Last edited by john locke on Thu Feb 25, 2010 9:27 am, edited 3 times in total.
0 x
a beautiful gasoline rainbow
be kind, everyone you meet is fighting a hard battle

User avatar
john locke
Pack Initiate
Pack Initiate
Posts: 266
Joined: Tue Oct 06, 2009 5:36 pm
Location: nyc

Wed Feb 24, 2010 1:52 am

- The method

Let me put it like this: after meticulously slaving over a beautiful pose for the longest time, you proudly hit the 'Upload pose' button - only to run headfirst into the cold, merciless wall that is 'image too large'.

Image

This happened to Kesame and Dip recently with this pose:

Image
110 kb

And it's only a measly 10kb over the limit! Couldn't we just shrink it a few pixels or something?

Comparing it to the official Wolfhome pose sizing chart, the pose is pretty much sized correctly.

Image

Plus, sizing it down any more means losing all that precious detail that we worked so hard to get, so we need another solution.

- Posterizing your .PNGs

Fortunately, the poses on Wolfhome are very nearly all truecolor PNGs, so this method will work effectively in almost every single instance.

First, open your image in Photoshop. I'm going to assume that your pose is already sized correctly and on a transparent canvas - basically ready to upload, not considering file size.

Image

Go into Layer -> New Adjustment Layer -> Posterize.

Image

After you click Posterize, click 'OK' in the New Layer window. You should now be looking at a window that says 'Posterize', this is where the fun begins.

Image

You'll notice immediately that the colors are distorted. Increasing the level gradually returns the image back to it's original state:

Image

This is the crucial moment: go slowly and be careful. It's best to use the least amount of posterization as possible, so you need to be careful at spotting small areas where the color may not be as close to normal as possible. For instance:

Image

The image looks okay from here, but if you look closer at the wings, you'll notice that the color is not quite right. I filled the background so it's easier to see, click the thumb for the full image:

Image

It's very subtle, so you need to be very careful. In this case, we need to increase the level a little bit more. It looks okay at 40 - there are going to be some very slight color differences (for instance the left knee in this particular pose), but it's an acceptable sacrifice that's really trivial. Posterization works for truecolor images because it groups together similar colors in specific areas, reducing the total number of colors. A side effect is a teeny color change - an acceptable sacrifice.

Click save for web, and we've got the file down to 87.81kb, a whopping 22.79kb from the original 110kb file.

Image

Now that's fine, but we're not done yet. Sure, you can use the pose now, but we can take it further.

Original - 110.6 kb
Image

Posterized - 87.81 kb
Image
Last edited by john locke on Thu Feb 25, 2010 11:01 pm, edited 9 times in total.
0 x
a beautiful gasoline rainbow
be kind, everyone you meet is fighting a hard battle

User avatar
john locke
Pack Initiate
Pack Initiate
Posts: 266
Joined: Tue Oct 06, 2009 5:36 pm
Location: nyc

Wed Feb 24, 2010 1:52 am

- Further compression
If you don't have Photoshop, this is your first and only step. Easy, huh?

So far, we've saved 22kb from just posterizing our images. How do we take it further?

Fortunately, there are a few free online tools that compress image files (not just .PNGs) without sacrificing image quality. The most notable are:


My favorite is PunyPNG, so we're going to take a look at that today. Go to http://www.punypng.com and click 'Upload images'.

Image

Simply select the image to be compressed, click 'OK', and:

Image

PunyPNG saved ANOTHER 26kb, shrinking our file down to a measly 63kb - originally 110kb!
I know, I know. Try to keep your pants on. It's witchcraft, surely. If you want to learn more about how this works, click here.

Note: DON'T hotlink from this site, it's only saved on their server temporarily. Save it to your computer and re-host it somewhere else.

And that's it. Seriously. Your images are optimized, you're done! From the original 110kb image, we've cut the file size down to 61kb, (nearly HALF of the original) and kept nearly all of the original image quality. Was it worth it? You tell me:

Original - 110kb:
Image

After - 61kb:
Image


Okay, mister smartypants, if it's so easy then why not just do this and skip the Photoshop mumbo jumbo?

You could, but you're going to get the best results if you posterize the image in Photoshop first and THEN compress it. Proof? This is the original, unedited image, ran through PunyPNG:

Image

You saved a few kb, but nothing as dramatic as before.
Last edited by john locke on Fri Feb 26, 2010 2:15 am, edited 12 times in total.
0 x
a beautiful gasoline rainbow
be kind, everyone you meet is fighting a hard battle

User avatar
john locke
Pack Initiate
Pack Initiate
Posts: 266
Joined: Tue Oct 06, 2009 5:36 pm
Location: nyc

Wed Feb 24, 2010 1:53 am

- More resources

When it comes to compression, there are a few other options as well. If you're more tech savvy and/or if you prefer a command line interface, feel free to check these out but I won't be going into these - just letting you know all your options.

http://pmt.sourceforge.net/pngcrush/
http://optipng.sourceforge.net/

Download at your own discretion, I assume no responsibility in any resulting damage or changes to your computer (just covering my own ass, but honestly they're fine - they're opensource, so if you're really concerned then feel free to sift through the source yourself).

- Learning more

http://www.libpng.org/pub/png/pngfaq.html
http://www.libpng.org/pub/png/libpng.html

If you want to learn more about PNGs (aka if you have too much time on your hands or are a massive nerd)
Last edited by john locke on Thu Feb 25, 2010 11:04 pm, edited 6 times in total.
0 x
a beautiful gasoline rainbow
be kind, everyone you meet is fighting a hard battle

User avatar
john locke
Pack Initiate
Pack Initiate
Posts: 266
Joined: Tue Oct 06, 2009 5:36 pm
Location: nyc

Thu Feb 25, 2010 9:31 am

Please let me know if you spot any typos/errors or if you have any questions. Thanks again to Dip and Kesame for giving me permission to use their pose for this.

Now git and go smush some poses down!
Last edited by john locke on Thu Feb 25, 2010 10:23 am, edited 1 time in total.
0 x
a beautiful gasoline rainbow
be kind, everyone you meet is fighting a hard battle

User avatar
Raven
Shaman - Secret Keeper
Shaman - Secret Keeper
Posts: 2700
Joined: Mon Nov 06, 2006 12:52 am
Gender: Male
Pronouns: he/him/his
Location: Texas
Contact:

Thu Feb 25, 2010 10:20 am

Thanks for making this tutorial. It's going to help a LOT.
0 x
"Those who dream by day are cognizant of many things which escape those who dream only by night."
- Edgar Allan Poe


Image

User avatar
Blackfeathr
Archdruid - Spirit Caller
Archdruid - Spirit Caller
Posts: 8085
Joined: Sun Nov 05, 2006 7:29 pm
Gender: Female/Genderqueer
Pronouns: AEIOU sometimes Y
Species: Coyote
Location: Detroit, Michigan
Contact:

Thu Feb 25, 2010 2:53 pm

John, you are AMAZING. C:
0 x

User avatar
Saeglopur
The stuff of Legends
The stuff of Legends
Posts: 17833
Joined: Wed Jul 02, 2008 1:34 pm
Pronouns: she/her
Preferred Name: saeg
Location: oregon
Contact:

Thu Feb 25, 2010 4:33 pm

told you this would come in handy. x) you did a great job.
0 x
Image
come celebrate autumn with us on Louloudia

User avatar
Amable
Spirit Guide - Wise Healer
Spirit Guide - Wise Healer
Posts: 3511
Joined: Wed Nov 08, 2006 5:58 pm
Gender: Female
Species: Heinz 57
Location: Omak, Washington
Contact:

Thu Feb 25, 2010 5:40 pm

OMG THIS HELPED SO MUCH THANK YOU :D :D :D
0 x
Image
Click For Reference Sheets

User avatar
Bug
Ethereal Ancestor
Ethereal Ancestor
Posts: 11138
Joined: Wed Nov 15, 2006 9:43 pm
Gender: female
Pronouns: her
Species: cat/fox
Location: South Carolina
Contact:

Thu Feb 25, 2010 5:57 pm

:O Thank you so much. This needs to be stickiiiied!
0 x

Image
: links :


User avatar
West
Adept Protector
Adept Protector
Posts: 1080
Joined: Mon May 21, 2007 8:08 pm
Location: California
Contact:

Thu Feb 25, 2010 7:02 pm

This is amazing~
0 x
Image
click for refs

Art--Commissions--Permissions

Loki
Pack Initiate
Pack Initiate
Posts: 850
Joined: Tue Dec 04, 2007 7:06 pm

Thu Feb 25, 2010 7:22 pm

Many of your images are not showing up for me, would you mind providing links to them as well, please?

That aside, this tutorial is absolutely fabulous! Thank you so much! 8D


I am going to have so much fun compressing all of my pngs now. -nerd-
0 x

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests