How to best serve images optimised for mobile devices in WordPress

[Greywood]

Issue: Images too large for mobile devices in some articles, cannot be shrunk responsively, also should help reduce page size/improve site speed on small screen devices.

I am thinking of switching depending on the user-agent, such as iPhone / Android devices and serving up an optimised, rediced size image. I envisage this working in the background / ie. hidden from authors so it is easy.

Platform: WordPress

Would like a solution or some feedback on people's experiences with this problem. No good plugins found that can handle this so would probably need to be custom coded, but no processing overhead, unless it is generated upon publication of article.

Thanks peeps

Keith H

[bridget.randolph]

Hi Keith,

I'd recommend starting by compressing the images (if you haven't already). You mentioned that you've had trouble shrinking the images responsively, but you should be able to use a plugin like WP Smush.it. Compressing images is good for desktop site speed as well.

I'd agree with Bradley's CSS recommendation to fix the sizing issue; and for load time you can use CSS image sprites to combine multiple images.

I don't necessarily think that there's a problem with checking for the user-agent, and serving a different version of your images, but as Bradley pointed out, they still need to look good on a high res screen.

Cloud Four wrote a couple posts that go more in-depth into ways of dealing with responsive images (although these are not specifically Wordpress solutions):

• http://blog.cloudfour.com/responsive-imgs-part-2/ (from 2011)
• http://blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/ (from 2013)

You might also want to consider consolidating and minifying your CSS and Javascript files if you're concerned about page load time. Here's an article with these and a couple other tips: http://searchengineland.com/how-to-tune-up-responsive-design-websites-to-improve-mobile-seo-124370

Hope that helps!

[brad.s.knutson]

I'm a fan of using this CSS for responsive images:

image {
     max-width: 100%;
}

I personally wouldn't be a fan of running a check on the user-agent and serving up an optimized image because you would probably negate some of your load time optimization from shrinking down the image by running unnecessary server processing.

Also - by optimizing an image for mobile, you should actually be increasing the DPI because of higher resolution screens (Retina).  Shrunken down images might look awful on iPhones.

Just my .02