Как отображать различные эскизы/изображения в зависимости от браузера/платформы пользователя

Это общий вопрос для обсуждения подходов к фильтрации размеров изображений WordPress на основе браузера/платформы (например, смартфона, нетбука или настольного компьютера). Идея заключается в том, что на мобильном устройстве мы не хотим заставлять людей загружать изображение размером 100 Кб, когда 20 кб будет достаточно большим для их экрана, тем самым экономя их и себя, пропускную способность.

Результатом было бы сделать использование медиа-запросов CSS жизнеспособной альтернативой отдельной теме для мобильного версия сайта.

Есть несколько моментов, которые следует учитывать:

Пользовательский интерфейс

Каков был бы наилучший способ позволить пользователю управлять размерами миниатюр и средних изображений и т. Д.... Для разных платформ или просто для разных размеров экрана?

Обнаружение устройства

Какой наилучший способ определить возможности экрана устройства/UA на стороне сервера. Есть ли какие-либо плагины, которые уже делают это?

Реализация

Как бы вы поступили написание кода для создания различных эскизов, а затем для изменения вывода WPS в соответствии с размером устройства/экрана? В идеале это не зависело бы от темы, поэтому вызов the_post_thumbnail('medium') вернет соответствующий размер изображения для устройства/платформы.