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).
Notice the differences in the following example:
(Image resized by WP)
(Same image, resized prior to uploading)
(Same image, resized prior to uploading, width and height commands deleted after uploading)
https://wpbtips.wordpress.com/
What a lovely warm and inviting place.
You think so? Great! It’s difficult for me to see it with your eyes, because it’s a typical Greek island (Aegean) image: unfortunately too commonplace for me…
I was also among those affected by the gif animation loss. Fortunately it was back after some time.
Hi Vikas! Yes, I remember; it was this thread:
http://en.forums.wordpress.com/topic/gif-transparency-did-work-but-now-doesnt?replies=13#post-373741
You mean your GIFs work now with the w&h commands intact? Good to know.
Right Panos! :)
Thanks!
You are welcome!
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.
Too bad about this! :(
@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:
https://wpbtips.wordpress.com/2009/07/23/maximum-image-width/
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! :(
There’s no doubt about the loss of quality. You can see it in Richard’s post here http://onecoolsitebloggingtips.com/2008/05/03/how-good-is-wordpress-at-resizing-and-resampling-your-images/
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.
hmm very interesting find… I never noticed that. Thanks for the heads up.
@Stephen: You’re welcome. Won’t be an interesting find anymore, though, if the new complication noticed by Niels above doesn’t get fixed.
Oddly enough if you look at the properties of this photo https://wpbtips.files.wordpress.com/2010/01/milosplaka2.jpg?w=500&h=277 it actually shows it displaying at 500×276! Yikes!
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?
A very large image uploaded to WP will still be compressed, but the difference isn’t really noticeable.
I think sites such as Flickr do a better job, but I haven’t actually tested that. Even so, you get another drawback, as you know: longer loading time.
Yes, yes.
a longer loading time, both for the link to a larger image in media library on wp . and to a larger image on Flckr (better or not).
But for those very picky photo bloggers, perhaps they would like readers to have an opportunity to see huge pics, even if it takes a longer time to load.
No mind. Likely that group are also concerned about stolen images, and the larger the better for thieves. ?
Right: upload large files and link to them if you want to display your pics in all their glory, don’t if you don’t want them stolen (or if you don’t want to eat up your storage space).
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.
Thanks for the reply.
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.
Sorry for several messages, I hit send too early.
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/ .
I think I’ll try the second option, looking for a wider theme. Thanks for the link, I had already looking at this very good help page for options.
Thanks for all your replies and help!
@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?
You’re welcome! What upgrade are you referring to?
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.
Available upgrades here:
http://en.support.wordpress.com/upgrades/
None of them has anything to do with image quality.
The only way is the one I’m suggesting in the post. I checked several of your images, and they’re all larger ones downsized via the image uploader; so you don’t seem to have done what you can do.
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.
Hi from here too,
I don’t know what happens with Picassa and your email attachments – nor am I willing to try find out! Way too roundabout. In the forum you mentioned Photoshop: if you’ve got Photoshop you don’t need anything else. You create copies of your images and edit those copies: “Image” menu > Image size > Resolution: change to 72 – with the bottom options (Constrain Proportions etc.) all ticked.
PS you were right about printing, of course: minimum resolution for acceptable quality is 300. But browsers are another matter.
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
Oh I didn’t mean it’s difficult, I meant I don’t think it’s a reasonable way, because your e-mail isn’t an image editor.
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.
Ok, if you don’t what to mess with hosting sites use your blog (it’s not the same because WP compresses the images, but it will do).
You wrote: “my file sizes for artwork are so big”. By “original file” I meant one of those, before you do any resizing.
You don’t need to add a page: just upload the images via Media > Add New, copy the URLs you’ll get and paste them here.
Not sure if this is what you want:
Full size: http://juliamatcham.wordpress.com/wp-admin/media.php?attachment_id=674&action=edit
Picasa: http://juliamatcham.wordpress.com/wp-admin/media.php?attachment_id=675&action=edit
Obviously the full size one is crisper than the Picasa one, but I am told to reduce the file size to say 70KB or less??? So I can’t quite see what the point of the comparison is.
Here’s another this time probably done the right way for the first time! PhotoS Save for Web version:
http://juliamatcham.wordpress.com/wp-admin/media.php?attachment_id=676&action=edit
I can’t really see how to see it without using an actual page.
Cant see what size the attachment size would be.
The URLs are from edit situation…hope tha is OK.
Thanks for your help as usual.
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.
The URLs of those three are these:



coverack-s-for-web is good; coverack-b is bad: much loss of detail.
And here’s a copy of cw-coverack after just one action in Photoshop (resolution turned to 72):

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.
You’re welcome.
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).
Hi there,
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
…img src=”flickr.com/338383747/image.jpg”…
you’ll have
…img src=”flickr.com/338383747/image_b.jpg”…
Hi, and thanks for sharing this!
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).
Hi Panos,
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!
Hi,
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.
Panos,
Thanks for your suggestions.
“You think so? Great! It’s difficult for me to see it with your eyes, because it’s a typical Greek island (Aegean) image: unfortunately too commonplace for me…”
Now I’m wondering what a person who lives on a postcard thinks is an ideal place of beauty. Does every wonderful thing, everywhere, lose its shine?
Thank you for this post- I had no idea my images looked so terrible because of the resizing! All fixed now- thanks!
Hi there!
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
pls if you could help me!
@LE:
You’re welcome!
I don’t live in such a postcard – it’s just a familiar place. The postcards I’m currently living in are different:
https://wpbtips.wordpress.com/2012/02/12/athens-by-night/
@H:
Hi, but sorry, I can’t help – see point 1 here:
https://wpbtips.wordpress.com/comment-guidelines/
Oh my. That’s more than a little terrifying.