5 ms·

Did a quick comparison test with this beautiful piece of artwork I just created. original http://i.pi.gy/0K7d.png http://i.pi.gy/0K7d.png (2.1 MB) jpeg.io htt

by pwython 10y ago

Did a quick comparison test with this beautiful piece of artwork I just created. original http://i.pi.gy/0K7d.png http://i.pi.gy/0K7d.png (2.1 MB) jpeg.io http://i.pi.gy/AP8v.jpg http://i.pi.gy/AP8v.jpg (102 KB) Photoshop 60% jpeg Export http://i.pi.gy/Wr4P.jpg http://i.pi.gy/Wr4P.jpg (90 KB) tinypng.com http://i.pi.gy/ndKA.png http://i.pi.gy/ndKA.png (74 KB) Note pi.gy does not compress uploads.

karim79 10y ago
I would note that tinypng is not converting it into a JPG, so that's not really a valid comparison - the result is quantized and dithered PNG (256 colours) and not a JPG.
wscott 10y ago
Since he doesn't summarize the test above, let me. The jpeg.io result is bigger than the other two and noticeably worse quality. The problems were with the sharp lines. Perhaps jpeg.io specializes in photo-realistic pictures rather than graphics and logos.
- iplaw 10y ago
  That was your take away from the comparison? Wow ... I fail to see how the jpeg.io is worse than the other two examples.
  - Paulods 10y ago
    Look closely around the red and yellow rectangles and just about and edge meeting the blue and you will see. Open all 3 and tab one to the next and you will notice the big difference.
  - sathackr 10y ago
    upon first glance it looks like the lines are blurry in the jpeg.io one compared to the original and other two. If you zoom in a bit that may still be the case, but it looks like the overall image quality is much better. The photoshop export has significant artifacts visible, while the jpeg.io compressed image has far fewer visible artifacts. The tinypng version isn't jpeg compressed but shows dithering as you would expect from a GIF file.
- ThomPete 10y ago
  Thats kind of what the format is for.
- wmil 10y ago
  Photoshop is smart enough to disable chroma subsampling[1] if it will screw up the image, it looks like jpeg.io doesn't do that. One of the worst case scenarios for chroma subsampling is alternating black and red lines. Some monitors/TVs do 4:2:0 by default. It can cause problems... https://plus.google.com/photos/photo/100697962438000631056/5902440355823383874?icm=false https://plus.google.com/photos/photo/100697962438000631056/5... [1] https://en.wikipedia.org/wiki/Chroma_subsampling https://en.wikipedia.org/wiki/Chroma_subsampling
- karim79 10y ago
  Hi, co-founder of jpeg.io and kraken.io here. Thanks for this, we're still in "kinda beta" right now and will have a fix in production shortly. In summary, that's not supposed to happen at all and there are highly likely some other nasties which we will be ironing out over the next hours.
  - arekkas 10y ago
    for being "kinda beta" you have quite the claims up on your website
- dlbucci 10y ago
  jpeg.io may have lost on sharp lines, but it had WAY fewer artifacts than either of the other exports, and the blue was closer to the original compared to the Photoshop export. In my opinion, it's a better quality image.
  - CodeMage 10y ago
    Honest question: if I can't see the artifacts without zooming in, is there any reason why I should care? Of all the conversion results offered, the Photoshop export actually looks the best to my eyes, so I'm genuinely trying to understand why the jpeg.io result would be considered better quality in this particular case.
    - dlbucci 10y ago
      I don't need to zoom in or even look that hard to see the artifacts. Maybe that's me, or maybe that's the retina display on my MacBook, but that's why jpeg.io looks the best for me. If you can't see the artifacts though, I would say jpeg.io loses out.
  - detaro 10y ago
    For me, it looks like a different image. As in, I would never have expected that the differences to the original weren't a (bad) choice by the "designer" making the image. That seems risky, and in many use cases a worse kind of artifact.
- deleted 10y ago
  [deleted]
- amelius 10y ago
  Would it be worthwhile to compress the edges separately? I.e., use edge-detection + dilation + quantize + mask to get the edges, then compress that less aggressively, and overlay over the aggressively-compressed image?
iplaw 10y ago
I would also note that the Photoshop export has very visible artifacting, and the tinypng compression killed the gradient. For the minimal size trade-off, the jpeg.io compression takes the W.
- barrkel 10y ago
  The jpeg.io version is a different image, though - it's got what look like drop shadows.
  - Rafert 10y ago
    That's https://en.wikipedia.org/wiki/Chroma_subsampling https://en.wikipedia.org/wiki/Chroma_subsampling
contravariant 10y ago
I really wish people would stop using chroma sub-sampling in lieu of compression. It barely made sense when transmitting analog signals, and it definitely doesn't make sense now.
- nathanaldensr 10y ago
  Can you elaborate on your comment? I'm genuinely curious. :)
  - contravariant 10y ago
    When people were devising ways to transmit television signals they had only limited available bandwidth, and since everything was analog compression wasn't feasible. So they did everything they could to minimize the information that needed to be transmitted. They interlaced the signal, so every frame only had half as much pixels. They also split the signal in chroma and luma (basically colour and brightness, respectively) and then lowered the resolution of the chroma with the justification that the human eye is far more sensitive to differences in brightness than differences in colour. This 'subsampled' chroma should then be interpolated at the receiving end (something which many video players don't do or do badly). Now at the time this made sense, since it was really the best they could do with no sophisticated ways of compressing images. However as this image demonstrates the human eye can definitely notice differences in colour in some cases. And with digital compression it's no longer true that 4x fewer pixels also means 4x fewer data, so while the decision to compress chroma more heavily might make sense, doing this by artificially lowering the resolution does not. However for some reason chroma subsampling is still used everywhere; it's one of the many leftovers from the days that video signals were completely analog and only displayed on CRTs.
    - colejohnson66 10y ago
      > They also split the signal in chroma and luma (basically colour and brightness, respectively) and then lowered the resolution of the chroma with the justification that the human eye is far more sensitive to differences in brightness than differences in colour. It's worth mentioning that the split between chroma and luma wasn't for "compression" but so color signals were backwards compatible with black and white televisions. It's also why we use 29.97 fps instead of 30.[0] [0]: http://glydeck.blogspot.com/2011/07/why-do-we-have-2997-frame-rates-and-not.html http://glydeck.blogspot.com/2011/07/why-do-we-have-2997-fram...
mrmondo 10y ago
I've cropped a section of your comparisons and made one extra one of my own which is using imageoptimise (190KB as was lossless compression) on the original image and scaled that section to 1024px on the long edge, saved them as a lossless tiff and uploaded back to pi.gy which as you said does not compress uploads. ... then I realised that pi.gy must not work properly with tiff's as although it appears to upload them fine, it doesn't give you any links to view the images hahahaha, so I re-exported them as jpeg 100% (i.e. no compression and no loss). Doing this you can clearly see the differences between the different formats. - original: http://i.pi.gy/DP55.jpg http://i.pi.gy/DP55.jpg - photoshop 60%: http://i.pi.gy/LGmK.jpg http://i.pi.gy/LGmK.jpg - jpeg.io: http://i.pi.gy/qA3a.jpg http://i.pi.gy/qA3a.jpg - imageoptimise: http://i.pi.gy/4KOa.jpg http://i.pi.gy/4KOa.jpg From this, I woud say that while photoshop at 60% (which is very low quality produces a noticeable amount of jpeg compression artifact, it retains image structure and colour depth /significantly/ better than jpeg.io even at such a low quality setting, if you wanted to clean up one an image later, cleaning up the freckled Photoshoppe 60% image would be a lot easier than the very damaged jpeg.io image. *Edit: Spelling, formatting.
- uwu 10y ago
  > I re-exported them as jpeg 100% (i.e. no compression and no loss) jpeg is lossy, even at 100% https://stackoverflow.com/questions/7982409/is-jpeg-lossless-when-quality-is-set-to-100#7982451 https://stackoverflow.com/questions/7982409/is-jpeg-lossless...
- ricardobeat 10y ago
  I think you mixed up the cropped images. In the original post the one with visible artifacts (dots) is the Photoshop version, not jpeg.io.
undecidabot 10y ago
Maybe it's just my computer, but I'm getting very different file sizes (using Firefox's view image info). original - 200.69 KB (205,510 bytes) jpeg.io - 163.29 KB (167,212 bytes) Photoshop - 206.41 KB (211,361 bytes) tinyping - 190.59 KB (195,160 bytes) EDIT: pi.gy mentions the following in its FAQ [1]: Q: Does this service compress images? A: No, but JPEG's might lose about 0.5% of the quality thanks to CloudFlare. Other than that your image stays just like you uploaded it. But we do strip the comments and GPS details for security & privacy reasons. [1]: http://pi.gy/ http://pi.gy/
- tedmiston 10y ago
  Confirmed that the file sizes you list are also what's shown in Safari dev tools.
networth 10y ago
Use webp :)
ccvannorman 10y ago
Also did a comparison: Photoshop high quality progressive scan 3 pass https://supermathworld.com/static/img/350.jpg https://supermathworld.com/static/img/350.jpg JPEG.IO https://supermathworld.com/static/img/342.jpg https://supermathworld.com/static/img/342.jpg I see no difference.. a neat idea, but it doesn't seem to have value for me.
andreasklinger 10y ago
i just want to mention that i really like you artwork
tedmiston 10y ago
> original http://i.pi.gy/0K7d.png http://i.pi.gy/0K7d.png (2.1 MB) > Note pi.gy does not compress uploads. This original image shows as 201 KB for me in Safari dev tools. I was hoping to run your source through ImageOptim and examine its output.
pwenzel 10y ago
For fun, I took your original PNG from http://i.pi.gy/0K7d.png http://i.pi.gy/0K7d.png (205.5KB), converted it to maximum-quality JPEG (with Preview in OSX), then compressed it with JPEG Mini, resulting in a 122.6KB file. ImageOptim was able to shave off an extra 10KB with no visible loss. The resulting image at 112.2KB: https://i.imgur.com/kzZzfIi.jpg https://i.imgur.com/kzZzfIi.jpg
- exception_e 10y ago
  You just "pied pipered" it :)

by pwython 10y ago

karim79 10y ago

I would note that tinypng is not converting it into a JPG, so that's not really a valid comparison - the result is quantized and dithered PNG (256 colours) and not a JPG.

wscott 10y ago

Since he doesn't summarize the test above, let me. The jpeg.io result is bigger than the other two and noticeably worse quality. The problems were with the sharp lines. Perhaps jpeg.io specializes in photo-realistic pictures rather than graphics and logos.

iplaw 10y ago
That was your take away from the comparison? Wow ... I fail to see how the jpeg.io is worse than the other two examples.
- Paulods 10y ago
  Look closely around the red and yellow rectangles and just about and edge meeting the blue and you will see. Open all 3 and tab one to the next and you will notice the big difference.
- sathackr 10y ago
  upon first glance it looks like the lines are blurry in the jpeg.io one compared to the original and other two. If you zoom in a bit that may still be the case, but it looks like the overall image quality is much better. The photoshop export has significant artifacts visible, while the jpeg.io compressed image has far fewer visible artifacts. The tinypng version isn't jpeg compressed but shows dithering as you would expect from a GIF file.
ThomPete 10y ago
Thats kind of what the format is for.
wmil 10y ago
Photoshop is smart enough to disable chroma subsampling[1] if it will screw up the image, it looks like jpeg.io doesn't do that. One of the worst case scenarios for chroma subsampling is alternating black and red lines. Some monitors/TVs do 4:2:0 by default. It can cause problems... https://plus.google.com/photos/photo/100697962438000631056/5902440355823383874?icm=false https://plus.google.com/photos/photo/100697962438000631056/5... [1] https://en.wikipedia.org/wiki/Chroma_subsampling https://en.wikipedia.org/wiki/Chroma_subsampling
karim79 10y ago
Hi, co-founder of jpeg.io and kraken.io here. Thanks for this, we're still in "kinda beta" right now and will have a fix in production shortly. In summary, that's not supposed to happen at all and there are highly likely some other nasties which we will be ironing out over the next hours.
- arekkas 10y ago
  for being "kinda beta" you have quite the claims up on your website
dlbucci 10y ago
jpeg.io may have lost on sharp lines, but it had WAY fewer artifacts than either of the other exports, and the blue was closer to the original compared to the Photoshop export. In my opinion, it's a better quality image.
- CodeMage 10y ago
  Honest question: if I can't see the artifacts without zooming in, is there any reason why I should care? Of all the conversion results offered, the Photoshop export actually looks the best to my eyes, so I'm genuinely trying to understand why the jpeg.io result would be considered better quality in this particular case.
  - dlbucci 10y ago
    I don't need to zoom in or even look that hard to see the artifacts. Maybe that's me, or maybe that's the retina display on my MacBook, but that's why jpeg.io looks the best for me. If you can't see the artifacts though, I would say jpeg.io loses out.
- detaro 10y ago
  For me, it looks like a different image. As in, I would never have expected that the differences to the original weren't a (bad) choice by the "designer" making the image. That seems risky, and in many use cases a worse kind of artifact.
deleted 10y ago
[deleted]
amelius 10y ago
Would it be worthwhile to compress the edges separately? I.e., use edge-detection + dilation + quantize + mask to get the edges, then compress that less aggressively, and overlay over the aggressively-compressed image?

iplaw 10y ago

I would also note that the Photoshop export has very visible artifacting, and the tinypng compression killed the gradient. For the minimal size trade-off, the jpeg.io compression takes the W.

barrkel 10y ago
The jpeg.io version is a different image, though - it's got what look like drop shadows.
- Rafert 10y ago
  That's https://en.wikipedia.org/wiki/Chroma_subsampling https://en.wikipedia.org/wiki/Chroma_subsampling

contravariant 10y ago

I really wish people would stop using chroma sub-sampling in lieu of compression. It barely made sense when transmitting analog signals, and it definitely doesn't make sense now.

nathanaldensr 10y ago
Can you elaborate on your comment? I'm genuinely curious. :)
- contravariant 10y ago
  When people were devising ways to transmit television signals they had only limited available bandwidth, and since everything was analog compression wasn't feasible. So they did everything they could to minimize the information that needed to be transmitted. They interlaced the signal, so every frame only had half as much pixels. They also split the signal in chroma and luma (basically colour and brightness, respectively) and then lowered the resolution of the chroma with the justification that the human eye is far more sensitive to differences in brightness than differences in colour. This 'subsampled' chroma should then be interpolated at the receiving end (something which many video players don't do or do badly). Now at the time this made sense, since it was really the best they could do with no sophisticated ways of compressing images. However as this image demonstrates the human eye can definitely notice differences in colour in some cases. And with digital compression it's no longer true that 4x fewer pixels also means 4x fewer data, so while the decision to compress chroma more heavily might make sense, doing this by artificially lowering the resolution does not. However for some reason chroma subsampling is still used everywhere; it's one of the many leftovers from the days that video signals were completely analog and only displayed on CRTs.
  - colejohnson66 10y ago
    > They also split the signal in chroma and luma (basically colour and brightness, respectively) and then lowered the resolution of the chroma with the justification that the human eye is far more sensitive to differences in brightness than differences in colour. It's worth mentioning that the split between chroma and luma wasn't for "compression" but so color signals were backwards compatible with black and white televisions. It's also why we use 29.97 fps instead of 30.[0] [0]: http://glydeck.blogspot.com/2011/07/why-do-we-have-2997-frame-rates-and-not.html http://glydeck.blogspot.com/2011/07/why-do-we-have-2997-fram...

mrmondo 10y ago

I've cropped a section of your comparisons and made one extra one of my own which is using imageoptimise (190KB as was lossless compression) on the original image and scaled that section to 1024px on the long edge, saved them as a lossless tiff and uploaded back to pi.gy which as you said does not compress uploads. ... then I realised that pi.gy must not work properly with tiff's as although it appears to upload them fine, it doesn't give you any links to view the images hahahaha, so I re-exported them as jpeg 100% (i.e. no compression and no loss). Doing this you can clearly see the differences between the different formats. - original: http://i.pi.gy/DP55.jpg http://i.pi.gy/DP55.jpg - photoshop 60%: http://i.pi.gy/LGmK.jpg http://i.pi.gy/LGmK.jpg - jpeg.io: http://i.pi.gy/qA3a.jpg http://i.pi.gy/qA3a.jpg - imageoptimise: http://i.pi.gy/4KOa.jpg http://i.pi.gy/4KOa.jpg From this, I woud say that while photoshop at 60% (which is very low quality produces a noticeable amount of jpeg compression artifact, it retains image structure and colour depth /significantly/ better than jpeg.io even at such a low quality setting, if you wanted to clean up one an image later, cleaning up the freckled Photoshoppe 60% image would be a lot easier than the very damaged jpeg.io image. *Edit: Spelling, formatting.

uwu 10y ago
> I re-exported them as jpeg 100% (i.e. no compression and no loss) jpeg is lossy, even at 100% https://stackoverflow.com/questions/7982409/is-jpeg-lossless-when-quality-is-set-to-100#7982451 https://stackoverflow.com/questions/7982409/is-jpeg-lossless...
ricardobeat 10y ago
I think you mixed up the cropped images. In the original post the one with visible artifacts (dots) is the Photoshop version, not jpeg.io.

undecidabot 10y ago

Maybe it's just my computer, but I'm getting very different file sizes (using Firefox's view image info). original - 200.69 KB (205,510 bytes) jpeg.io - 163.29 KB (167,212 bytes) Photoshop - 206.41 KB (211,361 bytes) tinyping - 190.59 KB (195,160 bytes) EDIT: pi.gy mentions the following in its FAQ [1]: Q: Does this service compress images? A: No, but JPEG's might lose about 0.5% of the quality thanks to CloudFlare. Other than that your image stays just like you uploaded it. But we do strip the comments and GPS details for security & privacy reasons. [1]: http://pi.gy/ http://pi.gy/

tedmiston 10y ago
Confirmed that the file sizes you list are also what's shown in Safari dev tools.

networth 10y ago

Use webp :)

ccvannorman 10y ago

Also did a comparison: Photoshop high quality progressive scan 3 pass https://supermathworld.com/static/img/350.jpg https://supermathworld.com/static/img/350.jpg JPEG.IO https://supermathworld.com/static/img/342.jpg https://supermathworld.com/static/img/342.jpg I see no difference.. a neat idea, but it doesn't seem to have value for me.

andreasklinger 10y ago

i just want to mention that i really like you artwork

tedmiston 10y ago

> original http://i.pi.gy/0K7d.png http://i.pi.gy/0K7d.png (2.1 MB) > Note pi.gy does not compress uploads. This original image shows as 201 KB for me in Safari dev tools. I was hoping to run your source through ImageOptim and examine its output.

pwenzel 10y ago

For fun, I took your original PNG from http://i.pi.gy/0K7d.png http://i.pi.gy/0K7d.png (205.5KB), converted it to maximum-quality JPEG (with Preview in OSX), then compressed it with JPEG Mini, resulting in a 122.6KB file. ImageOptim was able to shave off an extra 10KB with no visible loss. The resulting image at 112.2KB: https://i.imgur.com/kzZzfIi.jpg https://i.imgur.com/kzZzfIi.jpg

exception_e 10y ago
You just "pied pipered" it :)