Blurry images in gallery carousel
-
Macmanx, thanks for the concise retina-in-a-nutshell. :)
“As for your image, are you able to upload a larger original to see if that makes any difference?”
Admittedly I didn’t have much hope for this, because if Carousel can’t show a small image without blur then I feared a scaled-down image would definitely have blur; but in the name of science I gave it a shot.
First, a 737×1074 image uploaded to wordpress. The screencap shows two different views of the same image on WP. Both have been scaled down: on the left by Carousel, on the right by the browser itself (IE).
(I manually shrank the browser window so the it would be forced to scale the image to the same size presented by Carousel.)
http://www.bohemianweasel.com/comparison-larger.pngSecond is a screencap of two views of another image, this time from the WordPress co-founder’s blog.
The upper half shows the image in carousel, the lower half shows the image scaled to the same size by the browser itself. The difference particularly on the tap/faucet is very noticeable.
http://www.bohemianweasel.com/comparison-larger2.png
(It came from this page: http://en.blog.wordpress.com/2012/07/12/around-the-carousel-again/#) -
Excellent, so at least the result of the larger image scaled down is a better result that earlier with the smaller image.
I see what you mean about the inconsistency though. To be clear, the browser is actually doing the scaling in all cases. All carousel does is tell the browser, “Scale this, I don’t want to see any scroll bars.” I think IE 9 just isn’t providing the same sharpening that more modern browser, like Firefox and Chrome, do.
As for the second test, it’s a bit inconclusive. When an image is uploaded, we re-save a few smaller sizes, and there is a slight quality loss when re-saving. So, when you view a 5000 pixel wide image in Carousel, it’s actually loading something more like a 2000 pixel wide re-saved image and scaling that down to your screen, so you don’t have to wait 2 minutes for the image to load.
In the case of your second comparison, the original is huge, so you’re really seeing mostly the quality loss from the original vs. the re-saved version.
-
“Excellent, so at least the result of the larger image scaled down is a better result that earlier with the smaller image.”
Oh dear no, it didn’t look like a better result. And not enough of an improvement to make it worth re-editing web-ready images into something bigger just so they can be scaled down again.
I didn’t know about the saving of various sizes though, that’s useful to know thanks.
“I think IE 9 just isn’t providing the same sharpening that more modern browser, like Firefox and Chrome, do.”
I have the same problem with Chrome as well, it’s not just IE. Only Firefox looked normal.I don’t understand though, you said IE doesn’t provide the same sharpening, and yet in the sample screencaps above it includes images that have been scaled directly by IE (as well as those scaled through Carousel) and they seem perfectly sharp. Is there some additional process IE and Chrome should be applying to Carousel?
Thanks for your advice so far.
-
I’m not really seeing the same loss in quality in Chrome. Perhaps there’s something different about Chrome on a Mac vs. PC, especially since Firefox does a wonderful job for you.
Ultimately, it’s really up to the browser to scale the image. As long as the image is a great quality original, it has the potential to be a great quality scaled image (like I see in Chrome and you see in Firefox). Ultimately, it’s up the browser, and IE 9 is pretty poor at a lot of things.
The best we can do here is see about tightening up the quality of the re-saved images, which I have made a request of, but from what I can tell the re-saved quality isn’t too far off from the originals.
- The topic ‘Blurry images in gallery carousel’ is closed to new replies.
WordPress.com Forums 
