alex sysoef

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/.

Filed under WordPress
Tags: ,

13 Responses to “Making Images Load Faster On WordPress”

  1. Jake says:

    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.

    • Jack says:

      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.

  2. Rakshant says:

    Great I am very happy after getting this info. I have recently made my wordpress blog and I was confused how to handle it but when I glance this information I managed my blog very good.

  3. Matt says:

    Excellent post, thank you. I was wondering what to do to optimize image loading on my WP website.

  4. Ashley F says:

    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.

  5. Karan Oberoi says:

    Hi Alex,

    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.

    Regards
    Karan Oberoi

  6. Jake says:

    I use Lazy Loading and it works perfectly. I reduced the loading times to half the time, and it isn’t heavy on resources. I recommend it for any blog with many articles, ezine or similar.

  7. Michael says:

    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?

  8. Jamie Hayes says:

    Finding ways to speed up the upload of images is of the up most importance. I found out the hard way before employing a caching plugin.

  9. Robertus says:

    Hi Alex Sysoef,

    Useful article here. A slow blog is a serious problem to both the human visitors and search engines. Finding a good host and using caching plugins are good ways to go about it as you mentioned

    Thanks for useful post

    Regards

    Robertus

  10. Awesome post sir. I hope i will found best posts like this in future. This post impressed me a lot.

    Thanks for sharing

  11. John Pak says:

    The best way is to optimize image size before uploading to the website. There are many free software to help you do this.

  12. Hey Alex,
    I used Lazyload and its really a nice plugin . Due to this, the loading of images enhanced by 5 times faster .

  13. Chakrya Chea says:

    I am a new blogger and i use grab and save plugin to insert image to my blog, I wonder if the plugin here can be used with the grabbed images.