Making Images Load Faster On WordPress

It’s widely understood in the WordPress community that including images on your posts and pages increases their attractiveness to users. It’s been demonstrated that blog posts with relevant images can garner over 90% more total views than those without. So, if you’re blogging you should be using images.

However, the large images that tend to have the most impact also bring a cost in load times. All other things being equal, faster loading pages do better in the SERPs and produce a lower bounce rate than pages that force visitors to wait. Ideally, a page should load in less than 2 seconds. Bandwidth intensive pages also do poorly with mobile users who tend to have limits on how much they can download because of both bandwidth caps and slow connections. Your beautiful image-heavy page can improve user experience on the desktop while at the same time degrading it for mobile users.

We need to strike a happy medium between beautiful imagery and quick-loading pages, so, we’re going to have a look at what you can do to make sure your images aren’t slowing down your site any more than is absolutely necessary.

Optimize WordPress Image Sizes

The single best way to increase the speed at which images load is to reduce their size. However, in the age of retina screens there’s only so far we can go with image size reduction before they start to look bad.JPEGmini is an excellent tool for reducing image size without reducing their quality. You can use the online JPEGmini service, but they also make available Mac and Windows apps that make it easy to process batches of JPEGs at the same time. Another lossless image optimization tool is Smush.it from Yahoo, which works with PNG files as well as JPEGs and has a very handy WordPress plugin.

Use Image Sprites

If your page contains a lot of images, for each one it will make a request to the server. Every extra request to the server imposes a slight delay in the time a page takes to finish loading. The solution is to combine all those images into one image, called a CSS sprite, which will download with only one request. We can then use CSS to specify which part of the sprite we want to show at each position in the page.

Creating CSS sprites can be challenging, but there’s an online service that does most of the hard work for you: SpriteMe is a bookmarklet that will look at your pages, find the background images, generate a sprite, and inject the necessary CSS into the page so you can see it in action. The sprites and CSS can then be exported.

Lazy Load Images

Lazy loading is a process whereby only the images that are visible within the browser window are loaded. That gives the appearance that the page is loading more quickly because everything “below the fold” is only loaded when the user scrolls the page and approaches the images. The best lazy loading plugin for WordPress is BJ Lazy Load.

Use A CDN

Content distribution networks take your site’s static assets, like CSS files, Javascript, and images, and distribute them to servers around the world so that they are served as speedily as possible and reduce the load on your website. One of the easiest ways to get a CDN up and running is to use a caching plugin like Super Cache. While Super Cache won’t reduce the size of your images, it will enable you to plug in a CDN like Amazon’s Cloudflare.

Implementing these simple techniques will allow you to give your users a beautifully image-rich experience on your WordPress without forcing them to wait.

About Graeme Caldwell — Graeme works as an inbound marketer for Nexcess, a leading provider of Magento and WordPress hosting. Follow Nexcess on Twitter at @nexcess, Like them on Facebook and check out their tech/hosting blog, http://blog.nexcess.net/.

Share this:

Related

14 Comments

I use small images, to have a low bandwidth consumption but I have always been tempted to use a CDN. CDN means paying an additional host, anyway, and this is not good when you’re trying to cut all the expenses. This is what I learned, expenses you cut, profit you make. Just my 2 cents, I can be wrong.

I was always in a fascination to use CDN. And you have given few super techniques and easiest ways to get a CDN. Implementing these simple techniques will certainly allow us to give our users a beautifully image-rich experience on our WordPress. Thanks once again for sharing this wonderful post with us.

Page load and images as a part of that are super important. Not only does Google care but people are impatient and will leave your site. Thanks for offering up lots of options to help people do this. I also blogged specifically on improving image sizes for bloggers a few months back and it was well received.

After reading this post the problems which I was getting daily they all have been cleared now. My site was taking too much time to open the particular page because of large image size, But now my recents post page opening speed is at normal.Thanks a lot for sharing This steps.

Hey ! Great tips here, i have kind of other problem, but its hard to explain it. Sometimes when im using Lazy BJ Plugin in WordPress, site that i used in section “website” here. When i use F5 from time to time i dont see my pictures , and when i use other web brownser like firefox or opera its all good, but in chrome once again the problem comes to me. What i can do?

Recent Posts

Affiliate Disclosure

You should assume that the owner of this website is an affiliate for providers of goods and services mentioned on this website and may be compensated when you purchase from a provider. To learn more, click here | Legal