Blurry images in gallery carousel

  • Author
    Posts
  • #1167424

    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!

    #1167517

    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?

    #1167518

    justjennifer
    Moderator

    I’ve already answered about the comments box in the other thread here https://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.

    #1167522

    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 :)

    #1167532

    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:

    #1167628

    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…)

    #1167643

    justjennifer
    Moderator

    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,

    #1167660

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

    #1167661

    justjennifer
    Moderator

    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.

    #1167666

    macmanx
    Staff

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

    #1167669

    (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?

    #1167670

    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!)

    #1167671

    macmanx
    Staff

    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/

    #1167674

    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.

    #1167675

    macmanx
    Staff

    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.

    #1167693

    @ 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

    #1167696

    justjennifer
    Moderator

    @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

    #1167698

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

    #1167699

    justjennifer
    Moderator

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

    #1167710

    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. ;) )

The topic ‘Blurry images in gallery carousel’ is closed to new replies.