Thanks so much for the help!

Totally true that you need the custom design upgrade to change the theme css, though, but I think that's not what's causing the issue here.

It actually looks like there is a larger file that is being downsampled with inline css and then upsampled again by the theme.

If you inspect the source or click on the image you can see that this file exists:

http://greenspiritadventures.files.wordpress.com/2013/05/378244_10151137345114618_830834548_n.jpg

There are enough dots to make a 300px wide picture, but those pixels are trying to fill a much larger area so the spaces between them are filled with "guesses" about what should be there.

Here is a picture of the screen you'll see when you are uploading an image: http://en.support.files.wordpress.com/2009/08/image-settings1.png
Note #7 where it says, "Size." You have to scroll down to see the bottom part of that picture, but it allows you to choose full or large sized images.
Here is the whole support article where that picture came from:
http://en.support.wordpress.com/images/

<a href="http://greenspiritadventures.files.wordpress.com/2013/05/378244_10151137345114618_830834548_n.jpg"><img class="alignnone size-medium wp-image-38" style="width:822px;height:424px;" alt="378244_10151137345114618_830834548_n" src="http://greenspiritadventures.files.wordpress.com/2013/05/378244_10151137345114618_830834548_n.jpg?w=300&h=200" width="300" height="200"></a>

It's setting it to be small (a couple ways), and then upsizing again. See how it says "?w=300&h=200" after the image url? And then width="300" height="200"?

I'm not familiar with the theme, but when you insert media are you selecting "Full Size" or "Large" under the attachment display settings?

I do feel like there might be something weird going on with the theme though, since when I resize the window smaller they get completely distorted. What theme is it? Book Lite? I'm not seeing the same issue on their deme ( http://booklitedemo.wordpress.com/ )

Here's how the code looks there:

<a href="http://booklitedemo.files.wordpress.com/2011/07/mcm_3764-840x5541.jpg"><img class="aligncenter size-full wp-image-134" alt="mcm_6112" src="http://booklitedemo.files.wordpress.com/2011/07/mcm_6112.jpeg?w=750&h=498" width="750" height="498"></a>

Ah, did you maybe add the inline CSS?

style="width:822px;height:424px;"

Try taking that out, inserting it large? Let me know if that's at all a solution!

specifically for this post;
http://siabyul.wordpress.com/2013/03/10/ami-parisian-knit-sweater/
you can tell the words look blurry although pictures are okay since it blends in..

Thanks in advance!

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.

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

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

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?

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

Best wishes for your site.

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

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.

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.

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/

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?

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

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