As a photographer, one of the things that’s always irritated me about the WordPress.com blogging platform is the way it handles images. Post a photo on Flickr and then hotlink it into a WordPress.com post, and you’ll see a really nice, sharp image, that scales down with good definition as and when necessary. But upload a photo directly to WordPress and you’ll very often end up with quite an ill-defined result. It probably looks acceptable to the average visitor, but it doesn’t look spectacular, and when you spend time making sure your photos are perfect, that’s annoying.
Also, images that include small text, such as screen captures for reference purposes, can look noticeably unclear. It’s not very professional.
Of course, if you want to upload all your images to Flickr first and then hotlink them into your WordPress, you have a straightforward solution. But you may not want a Flickr account (last I heard, Yahoo! were insisting on a phone number for every new signup, and that’s a deterrent in itself). And perhaps more fundamentally, bloggers have enough to do without messing about with two sites when one will do the job. So, is it possible to make an image look better when you upload it directly to WordPress?
The reason images can look unsharp when directly uploaded to WordPress is that the software seeks to scale pic files so each page load is optimised for bandwidth economy. If, for example, you upload forty large images to a page and all pics are displayed at the original files’ resolution, then that page is likely to load very sluggishly. That’s a problem for the visitor, it’s a problem for the search engines (because their bots don’t have all day to spend waiting for slow pages), and it’s a problem for WordPress because heavy pages use a lot of bandwidth – especially collectively, across a massive platform.
So what WordPress does is to reduce the size of each image to the maximum size at which it can be displayed. There are several code instructions involved in this. The themes themselves will limit the display size to the post width, and additional code will be placed into the post itself, in accordance with the display size you selected during image upload. There may be two separate size-limitation instructions for each image, plus the back end instruction(s) from the theme. On top of that you’ll have a ‘Class’ instruction in the post, which activates CSS styling for your image, according to the size you’ve selected, how you’ve aligned, etc.
The management of all this on WordPress is more concerned with keeping the pages light and well-laid-out than making the images look good, hence the sometimes ‘soft’ or even ‘fuzzy’ look of the pics.
Flickr also seeks to reduce image size as and when required, but it does so in a different way. Flickr is specifically an image host, so images come first. The site actually stores multiple different versions of each image, so when you need smaller display, you actually get a different, resized (and reprocessed for sharpness) file. I used hotlinked Flickr images in the Photographers and Content Thieves post, so if you want to check out how they display you can.
The only way I’ve found of truly improving the image sharpness of direct WordPress uploads is to cut out the site’s management of the sizing. Please note before doing this, that it will display your images at full post width, without any alignment. I’ve used the method for the images in this post (including the text captures), so that’s the sort of look you’re going to get. Removing the alignment instructions can create undesirable results if your images are narrower than the post width.
Firstly, think carefully about the size of image you should be uploading. I wouldn’t really recommend putting massive images onto a WordPress blog, and for this post I’ve assumed you’re not uploading anything wider than 1280 pixels. People won’t see massive photos at full size in your blog posts anyway, so all you’re really doing in uploading hi-res pictures is inviting content thieves to steal them directly from Google images. If your uploads are smaller than, or exactly 1280 pixels across, you can just follow the instructions as is. I’ll explain what happens if they’re larger when we get to the relevant bit.
If you’re using the Visual editor when you upload images, click on your post’s HTML or Text tab to access the code. The tab is called HTML in the new editor, and Text in the old one. It’s marked with the arrow in the above capture.
Locate the code block for your uploaded image. It’ll probably look like the top block in the capture above, but it won’t have any coloured highlighting. Now remove the size and alignment instructions. That’s the line I’ve highlighted in yellow. Yours may look a bit different from mine, but the line should start with the word width, and end with class=”[and some code in here]”. Take the line out and preview the post. The worst that can happen if you delete the wrong bit is that the image doesn’t display and you have to delete the whole block and upload again.
Now add the code ?w=1280 immediately after the .png or .jpg suffix of your displayed image file. You can see this highlighted in pink, in the bottom block on the capture above. If your image uploads link to the media file (as opposed to, say, an attachment page), you’ll notice that each image code block shows the image file twice. The first one is the link – where visitors go when they click your image. The second one is the image as it actually displays on your page. It’s the second one that needs to have the ?w=1280 code after it. If there’s already a ?w= code there, just change the number – so ?w=529 would become ?w=1280.
What this does is force your image to load at full resolution, provided it’s not larger than 1280px across. If it is larger, you can feasibly use a higher ?w= number. For example, I’ve entered ?w=2048 for the image which heads this post. The resolution is lower than that, so it just loads at its maximum size.
Experiment, but keep your page load times in mind, and don’t let things get out of control. You want your images looking their best, but you don’t want visitors with slow connections running off, or Googlebot deciding your site is too slow.
IMPORTANT: The fundamental idea is to set the ?w= number to the same width as the actual photo you’ve uploaded, but it shouldn’t matter if the image width is less than the ?w= number. It’s when the image width is higher than the ?w= number that you have problems. The reason you may also have problems when there’s no ?w= at all in your code block, is that the WordPress back end covertly inserts one to match the post width of the theme. If you know how to check the source code of your blog pages, you’ll see what I mean.
Preview your post, and you should now see your image displaying at higher quality. If it looks good, finish off your post and publish.
Remember, taking the sizing instructions out of your post coding could affect how your images display in the WordPress Reader as well as on your blog. So check how things are looking on the Reader before making a mass of posts in this manner.
Also, be aware of your page load times. Try to avoid putting large numbers of big image files into individual posts, and keep an eye on your index pages to make sure they don’t display too many image-rich posts. You can reduce the number of posts per page in your blog settings if necessary.
And finally, be aware that you can reduce your page load times by applying greater compression to your JPEG files before you upload them.