Strategies for making Wordpress featured images responsive?

Just find the class with the images in and set them to a percentage width and auto height. Job done.

If you want to get fancy, resize everything with jQuery while the page loads.

This is been overcomplicated somewhat. It's just targeting the image and doing normal CSS or jQuery stuff.

Wow! All good answers... it's gonna be tough picking a winner - haha! Swapping out images would be my strategy if I had more time and the site was the kind of site that requires it. For now, I think I'll sick to the media query strategy. Thanks y'all!

a combination of the advanced custom fields wp-plugin and the picturefill js plugin seem to work fine.

Making the featured images responsive is not a matter of tweaking the wordpress engine itself, but more about modifying your themes CSS. Adapting the featured image to different viewport sizes is done by writing media queries. You select you featured image's css class and write in what you want it to do at a given viewport size. so for example, at a desktop screen size you might want it to only span 300px and float left to leave the post's words wrap around the right side. At a mobile viewport size you might want the image to span 100% of the width and have the words beneath. If this is what you are trying to do, media queries are what you should look more into.

A media query doesnt replace the image, it just scales it differently depending on the viewport size (if you set different css width properties inside the media queries) so I am not sure what you are referring to in terms of multiple image versions and bandwidth, but I get part of your point. You are saying, "if the viewport is 400px, why send and image that is 800px wide scaled down 50% for mobile, the image served should be 400px to save on the image size" correct?

The Mobble plugin will not just automatically scale your images, it just provides you with helper functions to let you know if the device accessing the page is a mobile device or not. You will need to account for what your page does depending on that detection. Looking at the documentation, it looks like it has these helper functions: is_iphone(), is_mobile() and is_tablet() which I am guessing return a boolean depending on the device accessing, which you would then handle with a conditional.

I still think that the complexity vs page speed savings of using this purely for serving a different image size probably isnt much in comparison to just serving an optimized image, scaled with CSS Media queries depending on the view port size. Using something like Mobble would maybe be better to serve different html structure rather than just an image?

You can compress a 1.5mb image down to a few hundred kilobytes on a resolution of 1920x1080 and the quality is still great and load time is minimal.

The title and question are for responsive image sizes, that in my mind means pixel size.

So after some research, you may be looking for something similar to the purposed HTML5 picture element. It is not fully supported yet, but it looks promising for serving adaptive images based on screen resolution (retina) and viewport width (desktop vs mobile). You can actually use the element now, and browsers that dont support it will hit the fallback image property, however there is also a JS polyfill called picturefill that appears to do the job of the purposed picture element that will be cross-browser compatible. You can see a demo of it working, just pull the screen in to see it adapt, or pull the screen in and load the url to see it serve a smaller version of the file. This would be the best solution I could find for your issue, besides waiting till the picture element is supported by all major browsers.