Адаптивный дизайн. Разные размеры для постеров новостей в зависимости от разрешения

Доброй ночи уважаемые!

Мне верстают адаптивный шаблон.
И возникла такая проблема. Постер что к новостям по умолчанию один на все разрешения и он уменьшается через цсс. Но если человек будет сидеть с телефона или планшета? Загрузка будет долгой так как постер весит в среднем 1 мегабайт. Ко всему этому уменьшение размеров на лету кушают ресурсы с апарата. Что не есть хоршо.

Так как знания php позволяют сделал загрузчик постеров, который при загрузке делает копии постера под все разрешения.

Mobile
193x96 размер картинки при разрешении = 240 x 320
273x135 размер картинки при разрешении = 320 x 240
273x135 размер картинки при разрешении = 320 x 480
273x135 размер картинки при разрешении = 320 x 533
273x135 размер картинки при разрешении = 320 x 568
313x155 размер картинки при разрешении = 360 x 640

Tablet

486x241 размер картинки при разрешении = 533 x 853
260x129 размер картинки при разрешении = 600 x 800
260x129 размер картинки при разрешении = 600 x 1024
263x130 размер картинки при разрешении = 609 x 966
427x212 размер картинки при разрешении = 768 x 1024
427x212 размер картинки при разрешении = 800 x 1280

Desktop
196x97 размер картинки при разрешении = 1024 x 600
196x97 размер картинки при разрешении = 1024 x 768
262x130 размер картинки при разрешении = 1280 x 800
262x130 размер картинки при разрешении = 1366 x 768
262x130 размер картинки при разрешении = 1440 x 900
402x199 размер картинки при разрешении = 1600 x 900
402x199 размер картинки при разрешении = 1680 x 1050
402x199 размер картинки при разрешении = 1920 x 1080
402x199 размер картинки при разрешении = 1920 x 1200


И вот сам вопрос.
Как мне при различных разрешения подменять директорию к картинке?

Пример:

/uploads/posters/196x97/poster-id1.jpg при 1024 x 600
/uploads/posters/262x130/poster-id1.jpg при 1024 x 768

и так далее.

Прошу помочь разобраться в данном вопросе.