Image Compression Online

Saxitlurg

4-Stripe White Belt
#1
So PNG is supposed to be a lossless format, right? That's what I've always heard, and that's what the countless google results tell me as I try to fix this problem.

So how come my PNG files keep getting these weird speckle-spots where there should be smooth gradients?

My original file:
original.jpg

Screenshot from Tapas (but it's the same on other websites):
png.jpg
Highlights for people who are having trouble seeing:
red circles.jpg


I haven't been able to find any other instances on google of people experiencing artifacts on their PNG images, and most of the compression advice I can find is from non-artists trying to squash their pictures down even smaller.

I'm really hoping showing this to a community of artists will help, because none of my friends or family can see the quality difference, and even the tech guy I called to ask about it could see anything wrong. I feel like I'm losing my mind. (like some kind of quality-issues ghost that only I can see)

(btw, it's not a browser issue; these speckles show up on Firefox, Chrome, and on my mobile browser)
 
#2
If it helps, I notice the difference. What probably happens is the site you upload to is recompressing the image to reduce the size, causing those artifacts.

The EXIF on your image says you saved it using Photoshop Elements 9.0. That information shouldn't even be there, it just adds up to the garbage that bloats files saved from Photoshop! There are tools to optimize an image to better reduce size without compromising quality (as much as possible, JPEG is an old format), such as Guetzli, Jpegtran and others I don't know about.

But if the sites mess with your originals, I guess there's little you can do. If the people you asked can't tell the difference, regular readers will notice even less.
 

Saxitlurg

4-Stripe White Belt
#3
If it helps, I notice the difference. What probably happens is the site you upload to is recompressing the image to reduce the size, causing those artifacts.

The EXIF on your image says you saved it using Photoshop Elements 9.0. That information shouldn't even be there, it just adds up to the garbage that bloats files saved from Photoshop! There are tools to optimize an image to better reduce size without compromising quality (as much as possible, JPEG is an old format), such as Guetzli, Jpegtran and others I don't know about.

But if the sites mess with your originals, I guess there's little you can do. If the people you asked can't tell the difference, regular readers will notice even less.
I'm glad I'm not the only one who sees this at least! :D I'm not too worried about regular readers, honestly, but I don't like how it makes me look bad to any artists looking at it (I gotta protect my imaginary street cred)

How do I remove the EXIF info? I'll do anything to reduce file size without compromising image
 
#4
From my experience of old times I've always told people not to save JPEG files directly from Photoshop. Someone on those old forum threads assured that it also adds watermarks.

I can't be of much help probably, since currently only use Linux and I use command line tools to fix those problems. Using jpegtran, I managed to strip 27279 bytes from your "original.jpg" file, which is kind of a lot. But just out of curiosity I also tried Guetzli and the result is very impressive! The file is 40% the original size and it looks great:

guetzli.jpg

If you search online for JPEG optimization, there are sites where you can upload your images to be stripped of garbage, there's apparently also a plugin which seems to address Photoshop's shortcomings.
 

Nimloth

4-Stripe White Belt
#5
Hi @Saxitlurg,

Looking at those two images, theres a world of difference. I completely agree.

What this boils down to is that it depends on their PNG quality and color settings. Looking at that, it looks like it's downsampling the color spectrum but not the pixellation quality.

Hope this helps explain :)

As a completely separate but interesting experiment, I'd love to test what happens to that image when run through our processing pipeline on GlobalComix, but unfortunately the forum software here converted the files to JPG instead of PNG, so it wouldn't be a true test. Mayhaps you can share a direct link to the original PNG that I could test with?

Cheers,

Christopher Carter
GlobalComix.Com
 

Saxitlurg

4-Stripe White Belt
#6
From my experience of old times I've always told people not to save JPEG files directly from Photoshop. Someone on those old forum threads assured that it also adds watermarks.

I can't be of much help probably, since currently only use Linux and I use command line tools to fix those problems. Using jpegtran, I managed to strip 27279 bytes from your "original.jpg" file, which is kind of a lot. But just out of curiosity I also tried Guetzli and the result is very impressive! The file is 40% the original size and it looks great:

View attachment 836

If you search online for JPEG optimization, there are sites where you can upload your images to be stripped of garbage, there's apparently also a plugin which seems to address Photoshop's shortcomings.
Thank you so much, I'll try all of that and see if it makes a difference :D (not the Linux though; I've had to use my dad's Linux machine extensively, and I don't think I want to switch on my desktop (though I might let him convert my laptop to a Linux machine)
 

Saxitlurg

4-Stripe White Belt
#7
Hi @Saxitlurg,

Looking at those two images, theres a world of difference. I completely agree.

What this boils down to is that it depends on their PNG quality and color settings. Looking at that, it looks like it's downsampling the color spectrum but not the pixellation quality.

Hope this helps explain :)

As a completely separate but interesting experiment, I'd love to test what happens to that image when run through our processing pipeline on GlobalComix, but unfortunately the forum software here converted the files to JPG instead of PNG, so it wouldn't be a true test. Mayhaps you can share a direct link to the original PNG that I could test with?

Cheers,

Christopher Carter
GlobalComix.Com
I'm so glad someone else can see it!! Even the web support operator didn't see anything!

And sure, I'm curious to see what happens too. Here's a dropbox link with the original PNG: https://www.dropbox.com/s/voxtnnbzdsgew99/19.png?dl=0
 

Nimloth

4-Stripe White Belt
#8
And sure, I'm curious to see what happens too. Here's a dropbox link with the original PNG: https://www.dropbox.com/s/voxtnnbzdsgew99/19.png?dl=0
So I ran it through the processing on my local environment. Thing to note is that we process and generate different image assets depending on if you're reading on a mobile device or on a desktop.

And, because your image is below what we consider a full width page (1280px), we retain and serve the original version minus stripped out meta information (if the image is wider than 1280px we resize down to that size and also retain the PNG format and settings) for desktop reading.

For the mobile friendly version, we convert the PNG to a JPG at the same resolution if it's smaller version than 1280px wide, and resize down to that resolution if it's higher.

Since desktop reading maintains the original's settings, there's no difference in quality.

Here's the mobile version after I processed it:

1517088370534.png
 

Saxitlurg

4-Stripe White Belt
#9
So I ran it through the processing on my local environment. Thing to note is that we process and generate different image assets depending on if you're reading on a mobile device or on a desktop.

And, because your image is below what we consider a full width page (1280px), we retain and serve the original version minus stripped out meta information (if the image is wider than 1280px we resize down to that size and also retain the PNG format and settings) for desktop reading.

For the mobile friendly version, we convert the PNG to a JPG at the same resolution if it's smaller version than 1280px wide, and resize down to that resolution if it's higher.

Since desktop reading maintains the original's settings, there's no difference in quality.
Wow, the mobile version looks really good! Ever-so-slightly blurry, but I doubt it's something I'd notice if I was looking at it on a phone screen instead of my nice, big desktop (though that could be my eyes; they've been blurry all day)
 

Nimloth

4-Stripe White Belt
#10
Wow, the mobile version looks really good! Ever-so-slightly blurry, but I doubt it's something I'd notice if I was looking at it on a phone screen instead of my nice, big desktop (though that could be my eyes; they've been blurry all day)
Haha, thanks -- that's the intention.

With GlobalComix, when a comic page is uploaded, we actually store both the original file, and also generate 3 converted images (desktop, mobile, and thumbnail) versions of the image. This way, we can serve the right assets easily in all contexts and not worry about overloading a reader's bandwidth :)

In case you're wondering, the reason we also store the original version is so that if we ever change our conversion settings (or want to add more sizes), we can always re-generate all the versions from the original without needing a user to re-upload their content.
 
Last edited: