Google has a big mobile push on at the moment. If your website isn't fast and highly optimised for mobile devices you get kicked down the rankings from April 21st apparently. Tester here.

I have a wordpress website with responsive design css, but the images served to mobiles are still full size. I tried dynamically resizing images based on the client using .htaccess and a pretty cool php adaptive images script but as filenames don't change this isn't compatible with my CDN. The CDN (Cloudflare Free) is set to cache images (of course) and it caches the first image that comes back, whether it's desktop or mobile, so I'd need to turn off image caching and lose most of the advantage of the CDN. Doing it with Javascript to rewrite the page is kinda messy, and if you make substitutions apparently it can end up loading both sets of images.

I figure the cleanest way to do this is in PHP, detecting the user agent and generating/rewriting the html based on the user agent. The mobile site html can refer to smaller images, which will have to be generated somehow, in advance ideally, or cached. That means you can't cache html, but oh well. Does anyone know a good way to do this, maybe a wordpress plugin? Does anyone have any alternate suggestions?