[Pro] jpgs vs pngs?

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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
http://xiiro.com

On Sep 18, 2012, at 9:02 PM, RavenManiac email@hidden wrote:

Are there any secrets to making smaller PNG-24 files?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

So do you create the PNG file with Photoshop first, then compress it with PNG Crush?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

BTW, do you mean PNG Compressor or PNG Squash? I couldn’t find PNG Crush.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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
http://xiiro.com

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?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oops, I meant PNGSquash. Sorry 'bout that.

Todd
http://xiiro.com

On Sep 18, 2012, at 9:45 PM, “RavenManiac” email@hidden wrote:

BTW, do you mean PNG Compressor or PNG Squash? I couldn’t find PNG Crush.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you want transparency and can accept dithering, index-color .gif images
may be your answer.


Ernie Simpson

On Tue, Sep 18, 2012 at 10:48 PM, Todd email@hidden wrote:

Oops, I meant PNGSquash. Sorry 'bout that.

Todd
http://xiiro.com

On Sep 18, 2012, at 9:45 PM, “RavenManiac” email@hidden wrote:

BTW, do you mean PNG Compressor or PNG Squash? I couldn’t find PNG Crush.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ll give it shot.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Image-Optim converts png’s to png8+alpha, as well as optimizing all other image formats for the web. Also, it’s free!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I wonder if these PNG compression options are better than Photoshop’s built in “Convert for Website and Devices” feature?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Have a look at this:

http://www.freewaytalk.net/thread/view/116388

and decide yourself.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Excellent. Thanks Thomas.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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. :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Being able to use transparent PNGs, instead of JPGs, will give me a LOT more flexibility in my websites, especially with textured background images.

Before I go down this road, are there any reasons why I shouldn’t be using compressed PNGs instead of JPGs?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options