1

I'm running a WordPress site with WordPress version 3.4 (hence using the now deprecated "image_resize" functionality) and I've found that the image resizing abilities of WordPress are extremely lacking in regards to quality. There doesn't seem to be anything online regarding this issue (correct me if I'm wrong).

The images that my client uploads can be quite big, so I wanted to use the image resizing functionality with a cache technique such that images that need to be smaller won't take quite as long to download by the visitors. But when I use image resize I'm finding that the quality is significantly reduced, even with the $jpeg_quality argument set to 100.

Here is an example of the quality difference:

Image Quality Example

Aside from the blurriness that StackOverflow may add due to its handling of the image, the major difference is in the colour vibrancy. The image on the left is the original uploaded image to the WordPress site which has a native width of about 800 pixels. It has been resized manually within the HTML to 200 pixels wide. The image to the right is the image having been resized by WordPress's resizing method to 200 pixels at 100 percent jpeg quality, using the following code:

image_resize( "/path/to/image", 200, 0, false, null, null, 100 );

Can anyone explain why this is looking so bad, and what I can do to solve it?

BenMorel
  • 34,448
  • 50
  • 182
  • 322
shennan
  • 10,798
  • 5
  • 44
  • 79
  • 1
    *"Aside from the blurriness that StackOverflow may add"* *imgur, not StackOverflow. – Kermit Apr 03 '13 at 15:38
  • 1
    This question is probably better fit for http://wordpress.stackexchange.com/ – Kermit Apr 03 '13 at 15:38
  • Do the original JPEG files have an embedded colour profile? If that's not being handled correctly by the resizing code, it might explain the colour changes. – Matt Gibson Apr 03 '13 at 15:40
  • 1
    @FreshPrinceOfSO Thanks for the nitpicking. I figured I would put it to SO seeing as it may be an issue with PHP's native image editing libraries, as I assume that the WordPress image editing utilises either GD or ImageMagick. Plus I'm in denial about being a WordPress developer. :-) – shennan Apr 03 '13 at 15:44
  • @MattGibson Opening the properties of the downloaded full-sized images, it lists its colour profile as Adobe RGB (1998). The idea of keeping tabs on colour profiles is new to me. How would I determine if this is indeed the problem? – shennan Apr 03 '13 at 15:51
  • @shennan This seems likely to be the culprit. I'm guessing that the resizing code WordPress is using isn't colour-profile aware. One way of confirming this might be to get one of your original images exported without a colour profile, then run *that* through the resize and see if its colours stay the same. (That's not a solution to the problem; your images probably *should* have a colour profile, though probably [sRGB rather than Adobe, for the web](http://www.petapixel.com/2009/09/17/why-you-should-probably-use-srgb/)...) – Matt Gibson Apr 03 '13 at 16:12
  • On reflection, you may find that asking your client to use an sRGB profile rather than Adobe RGB might be a good enough fix for the problem. Even if you use resizing code that respects the colour profiles, you're probably still better off with your images using sRGB, as I'm guessing some browsers still sort-of default to sRGB rendering anyway, regardless of the embedded profile. Though it's been some time since I've done any research on that, some of them certainly *used* to do that... – Matt Gibson Apr 03 '13 at 16:16
  • @MattGibson Thanks for the help so far. Okay, I'll give that a try now and relay the feedback. Before I go searching, do you recommend a method of removing colour profile info? Or indeed changing to sRGB? Both myself and my client have Photoshop if that helps. – shennan Apr 03 '13 at 16:21
  • @shennan I don't use Photoshop, but from a quick Google, I'd say try using Save for Web, and seeing if you can see a "Convert to sRGB" option in there. That should export a version as well-converted from Adobe to sRGB as you can get automatically. You may also want to have a look through the details of [this earlier question](http://stackoverflow.com/questions/5773032/how-to-stop-gd2-from-washing-away-the-colors-upon-resizing-images), which is a similar problem. – Matt Gibson Apr 03 '13 at 16:25

1 Answers1

3

Based on our discussions so far, I'd say you're experiencing a similar effect to that noted in this earlier question, though I don't know if your WordPress 3.4 installation will be using GD underneath.

Basically, what's happening is that your images have an embedded Adobe RGB colour profile, which is (arguably, I suppose) a perfectly reasonable thing for them to have, even if they're headed out onto the web. You may want to bear in mind that if the images are viewed in a browser that doesn't respect that kind of colour management, you may see some surprising results, and that generally it seems the advice would still be to prefer sRGB for the web.

I'm guessing that the resizing process used by your WordPress 3.4 installation isn't respecting the colour profile -- is, in fact, probably ignoring it -- which is why the colours are being mangled during the resize. Effectively it's outputting an image that should still be in Adobe RGB space, but dropping the colour profile, so the image is reinterpreted in sRGB, which is what's making things look muted.

There are two options, I'd say:

  • Look into some kind of resizing process that respects the colour profile of the images (as discussed in that earlier question, upgrading the GD library, if that's what's being used, or switching to an ImageMagick-based solution, say.) I've not tried it, but if you can install ImageMagick on your sever, it looks like this WordPress plugin will allow you to use it for the image resizing fairly painlessly. It specifically mentions respecting colour profiles on resize.

  • See if exporting your images in the sRGB colour space solves the resizing problem. That's probably the easiest solution, and is likely to work if what I think is going on is what's actually going on. Though the images are likely to end up without an embedded colour profile once they've gone through your resizer, virtually everything that sees them will assume they're sRGB anyway.

Matt Gibson
  • 37,886
  • 9
  • 99
  • 128
  • This worked. I exported the raw image with the sRGB profile and the results were much more accurate (I have the added issue of owning a MacBook Pro Retina display which can make some images look poor anyway). As for the mentioned WordPress plugin, I've not yet tried. It may be difficult installing ImageMagick on the clients server as it's a cheap one and I doubt I'll be able to access the command line. For now, I will simply educate my client on how to prepare his images for web. Thanks again for all your help. – shennan Apr 03 '13 at 16:46