Saving as a PNG
I’ve been cruising around looking for new series lately, and I always choke when I go to download a volume and the zip is something like 100 MB. Are you serious?! We’re talking about grayscale images here! Most likely, these files were saved using the regular “Save as” selection from the File menu.
For those looking to make things more convenient for their readers without sacrificing quality, we’re going to check out the option in the File menu called “Save for Web.”
After you choose Save for Web, a new window will pop up. Look for the tab labeled “2-Up” and click on it. That will let you view the original version of your page and the about-to-be-saved version side by side.
For the settings, choose the drop down menu and look for PNG-8. For me, it says PNG-8 128 Dithered, but the important part is that it says PNG-8.
Ok, now look for the box where it says “Diffusion” and open the drop down menu. Choose “No Dither.”
Now what we’re about to do is choose how many shades of gray we use in our image. See the input box for Colors? Right now it’s set to 128. We’re going to decrease that and by doing so, we make our file smaller.
For something like Bleach, Naruto, and most shonen series, you can get away with 24 shades of gray. It might sound small, but it’s not. Using the 2-Up window, go ahead and zoom in on your page and examine the gray areas. If you’re not satisfied, increase the number of grays.
Here are two versions of the same page: one is saved with the “Save as” option and one is saved with the “Save for Web” option set to 24 Colors like above. Can you tell the difference?
The first file is 568 KB. The second file is 200 KB. I’ll do the math for you: If a volume is 200 pages, a regular Save as volume will be 113.6 MB. A Save for Web volume will be 40 MB. That’s a huge difference!
As I said before, the number of Colors to select from the Save for Web settings depends on the series and how many gray tones there are. For most shoujo, you can get away with 32 colors. Keep an eye on the 2-Up windows, however, and zoom in if you need to. It will be obvious when you need to add more colors:
Doubled to 60 colors, this gradient is smoothed out like in the original psd.
Even taking the number of Colors to 60 doesn’t greatly increase the file size. The Bleach page above with 60 colors is still only 256 KB – still much less than 568 KB.
My suggestion is to take 5 minutes of your time and just play with the settings for the series you are working on.
- Use “Save for Web” to save your pages for release
- Choose PNG-8 (not PNG-24)
- Choose No Dither
- Reduce the number of Colors to 24 (or whatever you decide)
- Compare the save to the original using the 2-Up tab
- Adjust the number of Colors if needed (keep an eye on gradients)
- Save
Hm…thanks, it looks really useful. Blyeah, I’m not that far in cleaning yet, so I guess I’ll just bookmark this for later.
Yeah, I didn’t really even think about final file size until I started making the final saves for M7 a few months ago. It’s a good thing to keep in mind, though, so it’s good you already found out about it. Good luck learning to clean and don’t hesitate to ask any questions ^^
Some people use PNG Crush, though I don’t know how effective that is, since I’ve never used it. It should be quite effective though, since KEFI used it and they’re releases were only 3-4 mb.
HOLYCRAP thanks for this ? i have no idea how to clean let alone saving settings and stuff… so thanks for this!
hmm, i don’t see any difference between diffusion and no dither.,and diffusion is 0.1kb smaller.,what is the difference between this two anyway?
are there user enteres tutorials as well?
No, there aren’t. I’ve been meaning to dig through the various tutorials on sites like MH and then post the ones I think are really useful here, but I just haven’t had the time.
Maybe I’ll make a page where people can suggest or request tutorials, though…
Dithering is basically just a pattern of dots that tries to create the illusion of having more shades of gray. The dot tone in manga printing is a dither. It is most useful if you haven’t used enough shades of gray and there are sharp lines or blotches where there *should* be a gradient of gray. Sometimes, dither can look bad, sometimes it’s not even noticeable, sometimes it can help. By increasing the number of colors in your save, however, you’re fixing the problem using pixel values from your original page and not an artificial dither pattern ;)
thanks your tutor is very cool bitch….
I’ve been wondering how people get good quality png files with such little file size. I played around a bit with png myself, but could never figure out the right combination of settings to make the file small AND keep it looking good. Learned something new!
good, the head of my scanlation group is always getting mad at me for the image’s size XD
now I know how to keep him quiet!
OMG! I scanned just a few chapters and it was a whopping 56 MB! Now, I know how to reduce it more, thanks.