Whenever I design a website I try to keep my image files as small as possible. Although I frequently use jpg images with drop shadows, I’m becoming more interested in creating tiled textured backgrounds instead of solid colors. I guess I just like that extra dimension.
Anyway, when I design websites using a textured backgrounds I’m forced to use pngs instead of jpgs, because I need transparency. The problem I’m having is the file size for a png with drop shadow is roughly 4-5 times larger than a comparable jpg image.
I’ve tried using PNG-8 files, which are smaller, but they make my drop shadows look horrible. As a result, I typically stick with PNG-24 files. Are there any secrets to making smaller PNG-24 files? Am I overly concerned about image size? My last page had a single 254K image on it.
I use a png compression app called PNG Crush (App Store). I also use GammaSlamma (no longer supported). There are several other tools/apps that do essentially the same thing. I prefer using png over jpg for most things when I can and I’m perfectly fine with the larger file sizes (I’ve not noticed any significant issues with load times on broadband connections) though many people are much more weight conscious than I am. To each his own, right?
Todd
On Sep 18, 2012, at 9:02 PM, RavenManiac email@hidden wrote:
Are there any secrets to making smaller PNG-24 files?
Yep. Photoshop or any image editor. I don’t use the full-blown PS so it’s possible it has a png compression tool built-in. Certainly someone else knows.
Todd
On Sep 18, 2012, at 9:42 PM, RavenManiac email@hidden wrote:
So do you create the PNG file with Photoshop first, then compress it with PNG Crush?
Wow! I just took a 262KB png file created in Photoshop 5.5 and reduced it to 63.2KB, with no perceivable loss in quality. Thanks for researching this Thomas. I’ll be using TinyPNG for all of my PNG compression from now on.
