How to Fix Blurry Images in WordPress

fix blurry images wordpress

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.


Additional Information

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.


Sources

Advertisements

2 thoughts on “How to Fix Blurry Images in WordPress

  1. somen pal

    Fixing a blurry image is not a tough job actually but the main thing is that you have to be well aware of the cause that’s making the image to turn hazy. This post should also include few scenarios that could help bloggers to stay safe and take required precautions.
    Thank you………………!!

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s