Need help? Check out our Support site, then


WordPress.com Forums » Support

Blurry images in gallery carousel

  1. bohemianweasel
    Member

    I've seen this problem mentioned several times on the boards but I've not seen it solved. Here's hoping:

    Carousel gallery is making my photos appear blurry.
    It's not the images themselves because when I view the files directly on wordpress they're perfectly clear.
    If I use any of them in a post on their own, they're perfectly clear.
    But when viewed with the carousel gallery feature they're blurry.
    I also noticed the gallery feature seems to be enlarging all my images by exactly 1 pixel in width and length (why?) and wondered if that accounts for the fuzziness?

    Example: this screencapture shows the same photo: on the left in the gallery feature, on the right viewed directly. If you can't see the difference in quality, check out the text at the bottom of the image.
    http://i15.photobucket.com/albums/a362/bohwe/not-good-enough_zps0f4df88d.jpg

    I wanted the blog as a showcase for my artwork, so the gallery function (and it working) is essential.

    Thanks in advance!

  2. bohemianweasel
    Member

    On the suppoprt page featuring the gallery carousel here:

    http://en.support.wordpress.com/images/gallery/#

    The images are perfectly sharp, AND there's no stupid comments box underneath them! How were both of these amazing things achieved?

  3. justjennifer
    Member

    I've already answered about the comments box in the other thread here http://en.forums.wordpress.com/topic/disabling-comments-in-image-gallery-carousel?replies=3#post-1165414

    As far as blurry images, the best thing you can do in order to maintain image sharpness is to resize and optimize your images before you upload them to your site. For web display, the maximum size doesn't need to be more than 1280 pixels wide or tall and 72ppi. Anything larger is a waste of space and bandwidth for those waiting for the images to load.

  4. bohemianweasel
    Member

    Hi again justjennifer, thanks for replying.

    As I said in my initial post: the images only look blurry in the gallery carousel. When I view them everywhere else on WordPress they're perfectly crisp, which means it's not the files themselves, nor are they being 'crunched' by WordPress itself.

    My first message has a screencap example - it's two different viewings of the same file on WordPress, with and without gallery.

    The size of the example image is 402 x 604 pixels, so it's not because it's too big. Btw, the browser I'm using to view these with is IE 9.

    Any help in de-blurring the gallery view would be wonderful, thanks :)

  5. bohemianweasel
    Member

    I stupidly saved the first screencap as a jpg, so I did another saved as a png so that the difference is clearer, particularly in the text:

    http://i15.photobucket.com/albums/a362/bohwe/comparison.png

  6. christinakapl
    Member

    I'm working on this problem for some hours now and it really frustrates me:
    Carousel looks really cool, modern and is a great opportunity to present pictures, works, portfolios, etc. But the blurred pictures are really a problem! I tried everything (sized up the thumbnail, normal size and biggest size of the pictures), deleted the pictures, took them again to photoshop sized them to exactly 1280px (biggest side of the photo) did an extra resharpening, i read the other posts, where you told them to write that line in the textbar. Nothing works.
    I use the newest version of Safari, but I extra downloaded Firefox, it looks blurred as well.
    By the way, after the sizing to 1280px the pictures look even more blurred...
    I'm currently building up my blog as a photographer, for me sharp images are crucial, i present myself due to my portfolio in carousel, and unsharp pictures of a photographer are just not acceptable.

    I hope you can help us, find a fast solution for this problem. I don't want to make another blog at a different provider, but this is an essential problem for me...

    Thanks, christina

    by the way my blog to see the problem:
    http://christinakapl.wordpress.com/shootings/

    (especially the first picture with the text in it looks awful...)

  7. justjennifer
    Member

    The Photo Carousel is responsive width, meaning that the image size displayed will depend on the size of the browser window it is being viewed in. My suggestion above of 1280 pixels was exactly that, a suggestion. If you feel you are not getting good results, then please feel free to experiment with different sizes.

    Also, no one is forcing you to use the Photo Carousel. If you turn it off under Media Settings, then anyone clicking on a Gallery image will be taken to either the original image or the image displayed in a special attachment page, depending on what you select when creating a Gallery. Perhaps either one of those would be better suited for your needs.

    Best wishes,

  8. bohemianweasel
    Member

    "no one is forcing you to use the Photo Carousel"

    No, we choose to use it because it's tantalisingly close to being the perfect image presentation function.
    Thank you for the time you've already given, it is appreciated; but I'd still prefer to try to find a fix rather than give up.

    If this is something that can only be rectified by getting into the coding then it's probably a staff matter, if then you could please flag this for their attention I'd be very grateful. And if this leads to it eventually being fixed then I'll get you a beer / cake / kitten / small house in the South of France / anythiiiiiiing.

  9. justjennifer
    Member

    Looking at other posts on the same subject, this is a long-standing and noted issue. However, I have tagged this thread for Staff assistance and hope, like you, that it will be tackled at some point.

  10. macmanx
    Happiness Engineer

    In many ways, this is just kind of how it works.

    Carousel automatically scales images on the fly to fit the current browser window, which is pretty much one of the best features of Carousel (no more scroll bars). With that comes in inherent loss of quality with scaling an image vs. re-sizing and re-saving (as is done when you select to insert a specific size into a post, though the original is still kept too).

    I have come across a few tips after playing with it for a while. You'll want to make sure that you're saving with an sRGB color profile (not Adobe RGB, for example). Also, if your image editor has a Save/Export for Web option, you could use that too (there's only a tiny improvement, in my case I found it's not worth the extra time). Finally, feel free to upload the largest photos you have. I admit, I'm a bit stumped on this one, but an image that's 3000 px wide scaled down to my screen just comes out better than an image that's 2000 px wide and scaled down. Plus, Apple and others are making a killing on HiDPI (Retina) screens, and despite their size, most are 2880 x 1800 pixels, and they are gorgeous.

    Anyway, sorry for rambling, it's just a subject that fascinates me.

    If you're curious about comparing the tips above, please feel free to check out the scaled Carousel images vs. the originals at http://macmanx.com/gallery/amsterdam-2012/ (decent camera, uploaded max width of 2880 pixels) and http://macmanx.com/gallery/san-diego-2012/ (iPhone camera, most uploaded at max width of 2880 pixels).

  11. bohemianweasel
    Member

    (Thanks justjennifer!)

    Hi MacManx, Thanks for replying.
    What about images that don't need scaling and are already small enough to fit in almost any browser?
    For example most of my images are 450 x 630 and automatically appear at full size in carousel - but the weird thing is I think they're being enlarged by a single pixel (on both the X and Y axis).

    Is there any way to find out if there's something in the coding that might be causing them to display as enlarged by a tiny fraction?

  12. bohemianweasel
    Member

    I checked out your photos (the Amsterdam ones), first in the gallery and then the originals, and even when my browser scaled them smaller to fit in the browser window, they were still much sharper than the carousel ones.
    (They're great by the way!)

  13. macmanx
    Happiness Engineer

    Yes, the scaled down images will always be a bit fuzzier than the originals, that's just the nature of image scaling, but larger images should not come out as fuzzy as the example you posted earlier.

    I'm looking into the odd 1 pixel increase (though that shouldn't cause such a quality drop).

    I also noticed that you're using IE 9. Is there any chance you could upgrade to IE 10, or try a different browser like Firefox or Chrome to see if that makes a difference (and no longer adds the extra pixel)?

    http://browsehappy.com/

  14. bohemianweasel
    Member

    Hello again Macmanx, thanks for your help so far.

    but larger images should not come out as fuzzy as the example you posted earlier.

    The examples I posted earlier were small images that hadn't been scaled at all, shouldn't they then be less fuzzy than larger images that have been scaled down?

    I also noticed that you're using IE 9. Is there any chance you could upgrade to IE 10, or try a different browser like Firefox or Chrome

    I'll look into upgrading IE after this (thanks for the suggestion) I tried it with Firefox and Chrome with interesting results: with Firefox the picture was perfect, absolutely crisp and fine. But with Chrome it was just as blurred as with IE.

  15. macmanx
    Happiness Engineer

    I'll look into upgrading IE after this (thanks for the suggestion) I tried it with Firefox and Chrome with interesting results: with Firefox the picture was perfect, absolutely crisp and fine. But with Chrome it was just as blurred as with IE.

    Yeah, then you get into how each browser scales images differently, so many "fun" variables. :)

    I'd be interested to see how IE 10 does, I hear it's much better.

  16. christinakapl
    Member

    @ justjennifer: ok, I didn't know that the 1280px were just a suggestion, as macmanx reommended, i'll upload them bigger again and hope for wordpress to improve this function. Carousel is really a good function, i hope it'll work all right in future. "I told the stuff assistance" helps me in this case more than "if you don't like it, don't use it"
    But I know now, that it's a well known topic and I'm sure you do your best to improve the already very good wordpress.
    All the best, christina

  17. justjennifer
    Member

    @christina just to clarify, I am a fellow WordPress.com user who volunteers in this mostly peer-to-peer support forum; I do not work for WordPress.com.

    If you are going to start uploading images with huge dimensions, as macmanx suggested, I'd like to recommend a utility called JPEGmini, which really does an amazing job of reducing image weight without affecting image quality. This will have the added benefit of helping you maximize your 3GB of free storage space. http://www.jpegmini.com/ NAYY

  18. christinakapl
    Member

    @ justjennifer: ah, ok. i thought you were a word press employee.... thanks for the tip with jpg mini, i'll try that =)

  19. justjennifer
    Member

    @christina-If you look under my username, you'll see it says "Member" whereas under macmanx's username it currently says "Happiness Engineer" (or maybe "Staff") and there's a gray box around it.

    Best wishes for your site.

  20. bohemianweasel
    Member

    Macmanx, if I purchased the customisation upgrade would I be able to see the code connected to the gallery function, or is the upgrade just for the CSS of appearance things like backgrounds and colours etc?

    I realise this could just be put down to a browser issue, but as it happens in more than one browser I think the problem must lie with the function itself.
    Any idea if Carousel's been updated recently, or is due for one?

    I was reading about the software, and its maker said "it serves images in double-resolution"; might it be the 'double resolution' that's causing the problem?

    I think this is an example of a double-resolution image:
    http://duncandavidson.com/blog/2012/08/retina_ready/
    It looked great in Chrome, but pixelled to artifact *death* in IE.

    Apologies for being like a dog with a bone on this issue but I've seen pleas for help about it going back over a year, I reeeeally just want this to be sorted. (And whoever does finally crack this glitch will be a hero, worthy of a ticker-tape parade and everything. ;) )

  21. macmanx
    Happiness Engineer

    No, the Custom Design upgrade only allows you to change CSS, colors, and fonts.

    Double-resolution doesn't have much to do with this. HiDPI (Retina) screens have 4 pixels packed in the space that a standard monitor has 1 pixel, so despite two computers having a 15" screen, the HiDPI screen would need a double-sized image in order for it to not be blurry.

    As for the example you linked to, IE 9 does not support double-sized images, but the provided code also does not allow it to fall back to the standard image, which is why it's much better to instead serve everything up for standard screens with the option of double-sized images, rather than the opposite. If you're curious, here's the right way to do it: http://dev.mattnt.com/retina-results.html :)

    As for your image, are you able to upload a larger original to see if that makes any difference?

  22. bohemianweasel
    Member

    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 737x1074 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.png

    Second 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/#)

  23. macmanx
    Happiness Engineer

    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.

  24. bohemianweasel
    Member

    "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.

  25. macmanx
    Happiness Engineer

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags