Why Your Images Appear “Blurred” On The Web

You just created a nice image. A good amount of effort was put in during its creation and post-processing and now it looks really good on your computer display. Satisfied with the results, you upload it to the web for sharing with your friends and followers. However, something appears to have gone wrong. On selected websites the image is not as sharply rendered as it is on your computer. It effectively looks blurry in comparison,and the resolution seems to have fallen. What went wrong?

Online articles about recommended image resolutions for uploading to to Facebook/Instagram/etc. have become fairly common. However if you are managing other websites such as a personal blog or company website where the problem is manifesting, it is recommended to obtain a clear grasp of the root cause to resolve the issue effectively. This will in fact benefit you when dealing with optimum image display on all websites and social networks.

The cause of the issue is surprisingly simple to understand. Every new modern monitor sold today (in 2015) should have a resolution of at least 1,920 pixels wide. However most web designers do not create web pages to fully utilize the border-to-border space of these modern displays. Having a user read from left-to-right along the entire 1,920 pixel-width is very awkward and user-unfriendly. A web page is usually designed with an even smaller pixel-width for the main content. We also have side bars taking up the rest of the web pages’ space. Some web pages use dynamically assigned content columns that divide the web page into even more columns.

So we have most modern display monitors being 1,920 pixels wide and web designers designing pages where content is usually displayed in even narrower columns because it is just more reader-friendly. Now consider this – a 5MP camera produces an image just less than 3,000 pixles wide. Oops. Wait, what?

So what happens? A simple word – scaling. If a browser has to display an image wider than what the web page is formatted for (and in fact larger than the display itself in many cases), it scales the image down to fit. Browsers are built to be fast, and it is no surprise that the fastest processes for scaling down an image for display result in image degradation. In other words, the image is too big for the web page and that is causing the perceived blurriness. If you want you images to look good, prepare one with a smaller resolution that properly fits the web page it is to be displayed on.

It is worth mentioning that some specialized online image sharing services automatically create multiple copies of your uploaded image at different resolutions. Depending on which page on the online service you are viewing the image, an optimally sized copy of the image is displayed to reduce the bandwidth requirement and still produce a pleasing visual experience. A noteworthy example of such a service is Flickr. As far as I know, Flickr produces the largest variety of resolutions from an uploaded image. Flickr offers so much resolution variety and sharing choice that in my opinion, it is arguably the best free one-stop image hosting solution for sharing out to other websites (in 2015).

Some other free image sharing services such as Google Photos and 500px should also be more intelligent with the resolutions of the images you can share from them. I have not used them extensively so I will not comment on their effectiveness.

So pay a little attention to the resolutions of the images you are sharing online, and continue to enjoy making pictures of stuff.

Leave a Reply

Please log in using one of these methods to post your comment:

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