Adaptive Images for WordPress

In Earthgrid, SEO Search Engine Optimization, Website Optimization by admin

by Viktor Grant

What is an adaptive image? It is a dynamic image that chooses a different picture based on the size of the monitor, such as the featured image on this page. The source image of this picture is 1280×720 pixels aka 720p HD – the standard screen shot of a video.  With the Adaptive Images plugin instead of having to open up an image editor and make 9 different sized images, the plugin does it automatically whenever a large image is uploaded via the WordPress Media tab.

Who came up with the idea of Adaptive Images? Its an idea that has been evolving over many years. One of the lead thought leaders in this movement is web designer Matt Wilcox.  First came Adaptive Images and then that concept was built into a WordPress plugin.  It is a new plugin compared to other WordPress plugins with at time of this writing only 5000 downloads.  Considering that there are millions of blogs out there, I felt it was important to write an article that explains and demystifies this concept – and makes it practical for you and every other reader to start using this.

Here is how it works: You simply upload 1 image that is at the maximum width you’ll use in normal everyday circumstances.  The plugin goes thru and makes all the different sizes that computers need and organizes WordPress so that it fetches the images dynamically. This is what is called ‘Adaptive’

You can see the original image was 142K whereas all the other images are smaller. If you had to do this manually you’d have a lot of work ahead of you FOR EVERY picture you upload to your blog.

Challenges:  You need a FAST server because as you can imagine it takes quite a bit of horsepower to resize these images.  You’ll also need a lot more space to host these images.  We highly recommend that you consider moving your blog or website to a faster network and a faster server if you’re goal is to begin the journey of dynamic ‘adaptive’ images for your blog.   You’ll also need patience.  When you upload your image for the first time to your blog post you’ll notice that it will take up to a minute depending on the size of the image to upload and resize the pictures. Be Patient!   It is generating all those different sizes for you and storing them in your WordPress blog.

One more thing.   The plugin only works on NEW images.

Don’t expect that all your old images will somehow magically be resized when you plug it in.  It won’t.  You need to save each image, and RE-UPLOAD the images to your blog that you want dynamically sized.

Is it worth the effort?

Yes.  Because the big 3 search engines are all now looking to see how fast your web pages will load and that will be GREATLY influencing your rank and usability of your website.  This is a big factor in determining your Mobile Site Optimization. Without this in place, you’ll most likely receive the SEO penalty for your images being too large for the device.

Think about it. Mobile phones have small screens – in most cases they only need 300 pixels to display.  Why would you want to send a phone user a 142K big image when a 10K image will do?  This is the power of Adaptive Images.  It’s a great plugin but you need to be ready for it.

Here are my 7 steps to implement this.

  1. Move your blog to a faster server.  We recommend you go with Cloud Hosting from Serverpoint. Why do I recommend them? I have met both founders and they are a big company with a small business mindset. They also host Houzz.com and are probably the #1 experts in the world at caching and fast-loading images. To really use this plugin optimally you’ll need to add a powerful caching system for your blog so it loads even faster. The have fantastic support that will help you get it set up.
  2. Back up your images to your local computer.   They live in /wp-content/wp-uploads
  3. Install the Adaptive Images Plugin
  4. Re-Upload Images to your Blog Posts one -by-one
  5. Publish Your Blog post
  6. Test to make sure that it is working with View Mode.
  7. Resize your browser and do an ‘image info’

Repeat steps 4-7 until all your blog posts only have adaptive images as the ‘Featured Image’ and your content as well.

Advanced TIP: Once you have a faster network in place, ask them about CDN (Content Delivery Network) and a server-side application called ‘Varnish’. They can set that up for you. The adaptive images plugin supports this experimentally at the moment and it can be configured to load the images dynamically from different locations around the planet…even from locations closest to your customers.

Does it sound like a lot of work?

It is. If you’re willing to switch from WordPress to something else, there is a platform that I’ve been working with now for OVER A DECADE called Earthgrid SPACE Platform. It is a dynamic online cloud environment, and unlike WordPress it is a SAAS subscription service that bundles technology, tools and content delivery network for a low monthly fee. Earthgrid’s engineers have built a complete done-for-you adaptive image system within the Earthgrid Image Galleries and Slideshows. It an alternative to WordPress and your site is literally ‘built’ in the cloud.  You can upload a single ZIP file of all your images into a ‘Gallery’ and all the adaptive image manipulation is done by Earthgrid, behind the scenes, without you needing any special plugins.

What do I recommend? Both.  In some cases you’ll need the marketing lead generation abilities that WordPress offers and the ease of use and simplicity that Earthgrid SPACE sites offer: a full CDN (content delivery network) and all done-for-you. Link them both together and you’ll be on your way to mobile website optimization unlike any of your other competitors.

If you like this article, please share your comments and post it on Facebook. Having adaptive images is not only kind and considerate for your end-users, it also has huge SEO benefits.

Thanks for reading.

Viktor

Please visit our sponsor:

serverpoint hosting banner