Stop overcompressing your PNG exports - learn to trust lossless

I kept wondering why my art looked blocky on my portfolio site until I ran a comparison. Turned out my savings in file size were wrecking the gradients. Use PNG-24 with no compression slider nonsense for anything with smooth color shifts.

3 comments

3 Comments

the_stella1mo ago

Huh, I was just reading about this exact thing the other day. Apparently some apps like Photoshop have a 'Save for Web' option that defaults to like 60% quality or something, which is terrible for smooth gradients. I've seen people post art with visible banding and they blame the platform, but it's their export settings all along. Good on you for catching it early.

the_mary1mo ago

Haven't you ever had a site that just refuses to load your full-size files? I dropped PNG-24 entirely after my portfolio took 10 seconds to load on mobile data. The difference in file size between a well-compressed PNG and a bloated lossless one can be like 400kb versus 2mb, and most people really can't spot the difference on a standard screen unless they zoom in to pixel peek. I'll take a slightly blocky gradient over losing half my visitors who bounce from slow loading any day.

cora86320d ago

Funny you mention the Photoshop default thing, because I've lost count of how many times I've seen people complain about banding on their art and it turns out they were exporting at "Save for Web" at like 50% quality without realizing it. What's your go-to export settings for a clean gradient, like a sunset or something? I usually bump it up to 80-90% quality for JPEGs, or use PNG-8 with dithering if I'm really trying to keep it small. It's wild how much faster a site loads when you batch convert everything to 80% JPEG instead of PNG-24, even if you lose a tiny bit of smoothness. Most visitors aren't gonna zoom in to check for artifacts, but they will leave if the page takes forever.