Image quality

WordPress users occasionally notice that the images they upload and insert into their posts appear duller than the originals. That’s because WP isn’t as good as an image editing application when it comes to resizing: images resized by WP lose some color and sharpness.

I first came across the issue in this forum thread (check the example I link to). At the time I wasn’t aware that Richard (a.k.a. thesacredpath), an expert forum volunteer who is a lot more experienced than me, had already written a post on the issue. As that post says, the solution used to be: “pre-size and resample your images with a dedicated image editing program before you upload them”.

Then, one day in mid-August last year, users suddenly began to complain that their GIFs lost their animation or transparency. I knew that resized GIFs don’t work, so I thought that deleting the dimension declarations from the code might correct the problem. True, GIFs with no dimension declarations sprang back to life. And I found that this had an effect on all image files. In other words: after the latest back-end changes, images uploaded and inserted into your posts will lose in quality if their code includes width and height, even when they are inserted in real size.

So, for best image quality, make copies of your images, resize them (using an image editing application) to a width not exceeding the main-column width of the theme you’re using (see here) and a resolution of 72 (so as not to waste storage space), upload and insert those copies, then delete the width and height commands from the image code (in the html editor).

Sorry to tell you that removing height and width from html is no longer functional. Even if you remove, the image is still reduced in quality. WordPress will still put back in the width in the source code as “w=?” (replace ? with width). Try it.

Insert image in html mode and remove the height and width. View the post and examine the source code. You will see the width is put in. But does that cause the image be altered? Try this. Open the image in a new window and you will see “w=?” in url. Now, remove “w=?” from url and open image in another new window. Compare images. You will see, the images are different! The one with “w=?” is worse than the one without.

@Niels: Thanks for the alert! I was aware that something weird is going on with image sizes, because of recent complaints in the forum. But it’s not exactly as you’re saying, or perhaps not yet. If you check the source code of my post, you’ll see that the third image has no width appendix (so it’s in better quality, because it’s not compressed like the second – copy them and compare the file sizes). I don’t have the time to check all 79 themes now, but I checked 6 of them: 3 fixed-width themes produce what you’re describing, 3 flexible-width ones don’t. Maybe they messed up with fixed-width themes and left flexible-width ones in peace. I’ll wait a few days till we make sure if it’s a bug (hopefully!) or an intentional change, then I’ll contact staff if necessary.

If it’s an intentional change it’s very unfortunate for another reason too: if you delete the dimensions, the w that gets appended to the file URL is the supposedly maximum for the theme according to the uploader. But that’s often wrong, as I’ve shown here:

You are right about your image here. It’s good you tested on the fixed-width and flexible-width themes. I only use fixed-width theme and did not think of doing that!

I really hope it is the bug like you say it is. I always edit my image in Photoshop before uploading so it is the right size for my theme. Now, WordPress automatically changes my image with the “w=?” code being added in so it is impossible to show the image exactly as I want it to be. They are all automatically lower quality, I have no choice! I’m really frustrated! If the image is already fitting in the theme, WordPress should leave it alone! :(

From way back then you can trace forum threads where the loss of quality is the complaint. It seems odd that this has been known since 2008 and has still not been dealt with. I’m hoping we will soon see a change.

@timethief: Perhaps you didn’t notice that I’m linking to Richard’s post in mine. Nobody doubts the loss of quality. Point is, I had found a remedy: removing the w & h commands from the code (check how clearer my third example is). Problem is, we’ve got a new complication (hopefully a bug), as noticed by Niels above.

As for your second comment, well, I don’t think wp.com is obliged to deliver Photoshop quality and efficiency! My attitude is that as long as we’re talking about a free service, I’m content with what we’ve got at any given momment, and try to find ways to overcome limitations. I always welcome improvements, of course (like Richard, I’ve contributed towards a few myself via support tickets), but I don’t complain if something isn’t perfect.

Hi Jennifer! I suppose that must be because the exact numbers should be decimals. And actually it was even stranger: when I uploaded it, the uploader said 500 (the width I’ve set as my Large option), but the image was inserted at 499!

By the way, I’ve sent a Support ticket re the problem noticed by Niels above; got a preliminary (unsatisfactory) response, sent them all the details (including a post in my test blog), and I’m waiting for a reply.

This is a very useful bit of information. The only drawback for me is that I like letting the user click on a thumbnail or medium-sized image on my post in order to see the enlarged picture. To take advantage of this quality-improving technique AND be able to show enlargements, I would need to upload two images and edit the img src code to link correctly. Still worth doing, though, in some cases.

Hi! Correct – that’s the only way to get the best of both. To me it’s generally not worth it (that’s why I didn’t include the suggestion in the post although I have occasionally made it in the forum, for instance here). In my opinion, if a visitor can open and enjoy the full-size original, it doesn’t matter if the thumbnail isn’t perfect. When I publish a clickable thumbnail, I add a “click to see fullsized photo” note instead.

The posting of two sizes of images could be worth mentioning when you consider people with photo blogs—I don’t know: if one uploads a very large picture that is only used to link to, outside of the theme page design, then how is the quality of that affected?

Do hosting sites like Flkr do a better job of showing images? Then the second larger image link would be best hosted somewhere other than wp.com?

I use Flickr for my photos and link them to my blog and I’ve noticed a huge problem with image sharpness.

All my photos have been pre-edited and uploaded on Flickr. They look sharp and nice on Flickr, on all sizes. But yet when I copypaste the html from Flickr and paste it on my blog, the photos become a lot blurrier and simply go out of focus! This happens even with smaller sized photos (whereas it should be the other way round: small photos should look sharper than bigger ones!).

I find this a real problem. The only way I’ve found so far to get past it is not to use the readymade html links on Flickr, but by manually right-clicking every single image and manually copypasting those to my blog – which is hardly an option because it takes a LOT of time.

This blurriness is a huge problem for anyone interested in photoblogging and having his photos represented in full quality on WP!

@uuvana: Yes, I just read your forum thread too. It’s a known issue: images downsized by WP are heavily compressed, so they lose color and sharpness. Sorry, the only solution is the one I’m explaining and demonstrating in this post.

I’ve been aware that images downsized by WP lose quality. I am just baffled that this happens even when I don’t exactly let WP do any downsizing: I re-edit all my photos in advance and I choose the size of the photo I want to post on my blog already on Flickr.
I simply copy paste a html link that Flick gives me, I don’t do any editing or resizing on WP at all. That’s why I still don’t get the quality loss.
Or does that mean that it’s the Flickr html which is the quilty party here?

I forgot to say:
Flickr gives you several size options so it does the resizing for you. But those resized images look perfectly ok on Flickr, I don’t see any quality loss as long as I’m there. The loss only happens when the link is posted on WP. Which I find just weird.

I know some blogger users override the same kind of problem by first uploading the pics to Picasa, then linking from there. No quality loss happens. Ironically that’s one reason why I’ve wanted to upload to Flickr ad not directly to WP.
But for some reason this obviously doesn’t work with WP.

Example from your post “Hattivattien sukua”:
That’s the source image – 667px wide. But the version displayed on your post is 245px wide. That’s a downsized and compressed version created by WP. As I already said, you lose quality if you let WP do the downsizing (no matter where the original is uploaded), so the solution is the one I’m suggesting in my post.

Ok, I see. My bad. Thanks for the clarification.
So, now I find myself thinking does that really mean that there’s no easy way to link a smaller pic to a larger one then, without uploading those two differently sized pre-edited version separately?
I mean I’d like to post a smaller pic (let’s say 500 pixels wide) and have a larger pic (width at least 1000x or more) available by clicking the smaller image. If I’d want full quality for both, I’d really need to upload two images for every image on my blog(?).
If this is truly so, I find it surprisingly limiting.

As we know many blog themes have the maximum width of 500 pixels or even less which is a bit too small if it’s going to be the only size available, so having the larger size available by one click is extremely valuable.

Yes, for best quality on the post as well as when you click for a larger view, you need to upload two versions. But to me this is over the top: in my opinion, you should either post clickable images and be content with the fact that a visitor can access the full quality image when clicking on the smaller one, or post non clickable images that are as large as possible. In the first case I would make things clearer for visitors by making the thumbnails a lot smaller and/or adding a note in the vein of “click for fullsize view”. In the second case, I would consider switching to a wider theme – see here: https://wpbtips.wordpress.com/2009/07/23/maximum-image-width/ .

@uuvana: You’re welcome. That’s what I would choose too: more visual impact right away, plus the fewer the clicks the more user-friendly a blog is. In my Maximum Width post, pay attention to the notes too: except the very few really wide themes, you might also be interested in the no-sidebar option some other themes provide.

One last piece of advice: avoid flexible-width themes (combining multiple images with text is trickier in them).

THANK YOU!!!!!! I was begining to think I was losing it after spending hours resizing my images only to still lose quality when uploaded. I love WordPress otherwise, but this one quirk sucks! Does anyone know if they still have the crappy picture compression when you upgrade the blogs?

Well thats what I am wondering, is there any upgrades or purchases that would remedy this? I am noticing that even though I have the image resized and optimized that photobucket, flickr still compress it even further which really makes it look horrible. I tried removing the size tags, and that didn’t help either. So I am back at square 1. At least I know whats going on now. I just have no idea what else I can do to fix it.

Because I am not smart at this and learning every day, can I ask whether my strategem of sending myself an email with images attached from Picasa and saving the images and uploading to WP from the saved images …is a bad quality-losing practice? My image file sizes are frequently very different from each other and Picasa of course deals with the lot. I am curious to know why (apart from the attachment images being a bit small) I should not be doing this? I can see the quality is not great …maybe I should never do that? I have done some of it the slow way …but I am such a novice I really don’t know how to approach matters in a regular and reliable way. Meanwhile I have noted the discusion with interest. Thanks all.

Actually, no offence, but doing through Picasa way IS very easy as all my images are so easy to get at. BUT I’m sure doing it through Photoshop is probably better from a quality point of view. I have done both. My main problem in PS has been that my file sizes for artwork are so big that Save for Web doesn’t hack it. Hard to reduce the sizes in the Image Size box to a sufficient extent without trying to do it more than once.
I think you pointed me to this site and I was doing my homework! I have also been looking at a site called Quackit which seems rather good for giving some essential HTML instructions. I probably don’t need more than I have already achieved (however badly) but I am a bit hooked!
Cheers, Julia

Here’s what we can do, if you’re interested (because I’m curious): upload an original file somewhere, plus the same file after it has undergone the mail treatment, and give me their URLs so I can examine the images. By “somewhere” I mean a good file hosting site (e.g. Fileden), not your blog.

The easiest thing is for me to add a page to my blog headed IGNORE THIS under PHOTOS (at end) and I will try a couple of same dimesion images (picasa images come out 480 long side x whatever) both ways. I don’t know anything about ‘hosting sites’ and can’t face more hassle. Presumably thats just as good. It will satisfy my curiosity too. Or did you mean something different by ‘original file?’ Probably can’t do it until Wednesday, but will get back to you here. That is if I can suss out how to do it because the file sizes can’t help but be slightly different (as far as I can see). Back soon! J Will check here before I do it.

By the way the original one on my blog under ‘etchings’ was uploaded from Picasa at 800 pixels to a folder and from there to my gallery. Actually it doesn’t look too bad to me. Well apart from the colour being a bit less cheerful than it actually is. I haven’t changed anything (or got rid of the hairs!).http://juliamatcham.wordpress.com/invitation/other-prints/coverack-sf/
Sorry to keep coming back I will stop it now!

What I wanted is a large original you haven’t tampered with, and a version of the same image after you give it the email treatment. The point of the comparison is that I will downsize the first one in Photoshop, to see if the second one has suffered relatively significant loss of quality or not.

The first three URLs aren’t images, they are dashboard pages: other users don’t have access to your dashboard. The moment an image finishes uploading in Media > Add New, a box pops up that says “File URL” at the bottom: that’s the URL of the image.

Oh dear, you may have to give up on me! I hadn’t tampered with the first one which was a simple photograph of an etching. Maybe using that sort of image is confusing. I’ll send the right URLs tomorrow, assuming I can find them. And the third one WAS downsized in PS for web bit to ‘ low’. Take no notice of the last one (in the blog) as I realised afterwards I had already reduced the KBs but in the PS image-size panel, and then used Picasa to determine the uploading image dimensions. I didn’t choose an ideal subject really. Honestly I AM learning albeit like a crippled snail. Sorry.

I haven’t had time to re-do it all and looked for a way of getting to what you want…but in the interim…if you are around have a quick look under PHOTOS >>> IGNORE THIS and I have put three copies on which are self-explanatory (I think!). But of course the full size one is well, full size, which is different from the others. I will have another look later. I see URLs all over the place ..under address, under location etc and also how the file sizes are compressed. I just hadn’t time to do the whole thing again. It must be stored somewhere surely apart from when you first do it.

Yes, thanks, I have learned a whole lot more of HOW TO from doing this although I doubt I will redo everything what with the notes attached which would have to be repeated. BUT at least I am more savvy now. Also finding the View Image Info has helped (I was looking for the word ‘properties’ everywhere!). I see I loaded the Photo’s > Bellagio also through Picasa but just using their ‘export’ panel (which is specially for the web) which lets you choose what pixel dimensions…arrives at at approx 238 KB (on the blog)…is that ridiculously big? Reduced from about 1.5 mb. It seems to come out quite well. Turning the resolution to 72 was a milestone! Pathetic isn’t it! Cheers and thanks again.

No it’s not “ridiculously big”: ridiculously big would be 10 times that (i.e. what some users do when they upload high-resolution images straight from their digital cameras). 238KB means you can upload more than 12.000 of those to your blog before you’ll need a space upgrade; no problem re loading time either (but loading time is greatly affected by the number of images and other objects on your front page).

Had a similar problems, only I upload my photos to flickr then link to them in WordPress.

The problem: I was making the images big in WordPress when I’d taken the code for medium or small images from Flickr. This meant that wordpress was making a smaller image big, which naturally pixelates.

You can get the code for a larger image from flickr, or you can simply add “_b” in the image location code. e.g. instead of

Hi, I’m a little late to this party…but I’m having issues with my header image in wp…and reading through threads, I can’t seem to get to the bottom of the issue. I’m using Gimp, not Photoshop-which is really a great editing tool. I start in Gimp with a blank template (typically an image at 600×400 pixels)…then add my text…I scale the image in the editor before I save it, (according to my theme, so as to not leave that to WP) and when I save it as a jpeg, it asks me if I want to flatten the image…which I do. When I view the image after it’s been converted to jpeg, it looks fine: color and edges are crispy and rich. But if you want to see my blog it’s here. http://www.themorselblog.wordpress.com
Look at my custom header and tell me it’s not blurry and makes you think you’re going blind! I upload my custom images and they look blurry and drunk. Do you have any pointers? I’d really appreciate any help you can give.

Actually, correction. I specifically used the ‘web-banner’ template in Gimp to create my custom banner. Demensions are roughly 720×180. Scaling the image was no biggie, according to my theme’s requirements.

a) I can’t compare if I can’t see the original: you can upload it via Media > Add New and give me the URL you’ll get.

b) The URL of the version you have inserted is this:
“Cropped” added to the title means you’ve still let WP mess with the original. You need to create and upload a version of the image in the exact dimensions required for the theme you’re using (712×80).

I am searching around for info on image quality…thought you might have posted something about what quality to SAVE .jpegs at for highest quality that will not load too slowly. I have been saving my individual images at 12 (highest quality) but if I want to have several photos on one page I need to save at a lower number for faster page loading. Do you have an article about this somewhere? What do you suggest? Thanks!

No I don’t have such an article.
Since your photos are interesting, you need highest quality. What you can do to improve the loading is a) optimize the photos for the web using an image editing application, b) decrease the number of posts per page and c) use the more tag in each post so that only one photo shows on the front page, or insert the photos as a gallery so that one sees each full-size photo only by clicking on each thumbnail.

I have been reading through your post and the comments but I am not realy finding an answer to my problem.
I work out my photos with photoshop ( 600×450 px, 72 dpi, RGB) and save them in the highest quality as jpg (12).
My photos look fine in a post but when one sees the thumnail excerpt on my homepage, they look realy bad blury. Its frustrating since I need high quality pictures on my blog, in the same time I cant upload too big pictures or wp comes up with a error message (allocating file). I am using a plug in called thumnail excerpts.
Further I have one more troubel with my images. If I am in a post and I klick on a picture to open it, it appears strangely widend, the whole content of my page seems weird when doing so. I couldnt find any info at all why this is happening.
my page http://www.masalaherb.com/blog

Author

Recent Posts

Subject Index

Subject Index

Search for:

Announcement 22/03/2012:
After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

3,258,409 views

Views per month:

Note: if you see ads on this site, they are placed by WordPress, not me.

Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.