The image on top is a screen cap of how the Instructions.png appears in a WordPress post when its width is 570 pixels. The image on the bottom is a screen cap of how the Instructions.png appears in a WordPress post when its width is 565 pixels.
You may have noticed that your images sometimes appear blurrier when posted in your WordPress blog. It’s not very noticeable for photographic images, but it becomes very noticeable for line or text images.
I was confused as to why this was happening because, having read that WordPress was a poor image resizer, I made sure to resize my images before uploading them. According to WordPress, the maximum content width for my theme,Twenty Eleven, is 585 pixels. However, even though my images were resized to 580 pixels in width, they still appeared blurry in my WordPress posts. Interestingly, though, when I visited the direct links of the uploaded images, they appeared crystal clear.
While troubleshooting, I noticed that WordPress automatically added borders to my images. I also found out that the addition of borders was related to CSS. The Twenty Eleven CSS style sheet’s border properties specified that image borders were 1 px solid #ddd, with paddings of 6 pixels. Taking into account the pixel width of image borders, I resized my images to be 570 pixels in width. After this change, I noticed that my images appeared less blurry in WordPress, but they were still blurry. My next step was to resize my images to be 565 pixels in width, and voila! Images were no longer blurry.
In conclusion, when resizing your images, take into account the maximum content width of your theme as well as the pixels in the padding of your image borders, and your images in WordPress posts will appear as sharp as the originals.
According to some commenters in the WordPress.com forums, if your image’s width is larger than the maximum content width of your theme, WordPress will create a resized copy to use in the post. However, WordPress allegedly has poor image resizing algorithms, so the image quality may not be as good as that of images resized by a dedicated image editing program. Therefore, it’s recommended to resize your images before uploading.
In the case WordPress has not created resized copies of your images, but your images still appear blurry, the culprit is your web browser, or its limited image rendering capabilities. I’m not sure exactly how it works, but I’m guessing that web browsers read the html and/or CSS of your web page and scales your images accordingly. The problem is that web browsers are not very good at rendering scaled images. This probably accounts for why my WordPress headers appear blurrier when my web browser windows are smaller, since WordPress headers are scaled down in proportion to the width of web browsers.