Image Optimization for Bloggers

photooversized

As internet connection speeds keep going up, users are expecting content to load faster and faster. According to a Website Magazine article, a site that takes more than 4 seconds to load see a sharp drop off in conversions as viewers move on to the next site. Getting your images in order, is the easy not-terribly-technical way to slim down your content and make some gains on site speed.

Image Size

Having the right size image for the job a key in good layout, making you images the right size and shape, can reign in users focus and make your content pop. Pictures that are too large can distract people from the rest of the content, where the goal is to pull the reader in. On page post, feature pictures work best when they run full width of the content area.

If an image is going to pop out for full screen mode I really recommend having the image fill the screen at most with having to zoom in, or about 1250-1300px across on desktop. Most smartphones cameras put out pictures close to this resolution, but if you’re using a high end SLR or even a budget point-and-shoot you may have to do some resizing.

As a bonus, scaling your images before you send them to the web is a great way to reduce the load time on your blog; especially your main posts page which may have tons of images depending on how many posts you display per page.

File Size

On the topic of load time, the size of an image on disk is a (relatively) easy way to trim the fat on your site’s page speed issue. Having dimensions that fit your site’s layout is great but we can take using some extra steps to get file sizes down even further. Using a compression website like tinypng.com can knock a file size down by as much as 60% without any perceivable loss in image quality.

Using reasonable image sizes and reducing file sizes in general are always a good idea on the web, not just for the page speed gains, but also gives mobile users less of a hit to their data plans.