Change featured thumbnail based on screen size

As a rule of thumb, responsive design should not be handled on the server side. The two main reasons for this is:

1. The only kind of detection you can do on the server side is User-agent sniffing. Responsive design should be based on feature detection, not user agents.

2. It’s too easy to run into caching problems etc. (Ie. mobile users get a cached desktop version).

For responsive images, here’s what I normally do:

<img src="https://wordpress.stackexchange.com/questions/144908/small.jpg" data-lg="large.jpg" data-sm="https://wordpress.stackexchange.com/questions/144908/small.jpg"> and I use JavaScript to switch out the src attribute, depending on either window.screen or window.innerWidth.

You can also have two image tags and use CSS media queries to swap between them. but then, of course, you have two images where you should really just have one.

switching out the src of a single img tag most closely resembles what’s going on in the new picture element with srcset.