Думаю вам надо изменить сам подход к вёрстке - нельзя верстать под конкретные разрешения, это тупиковый путь с бесполезными затратами времени.
Оптимальный workflow примерно такой:
1. Делаем максимально резиновую вёрстку. Всё что может быть резиновым - должно им быть, включая изображения. На этом этапе можно с картинками сильно не заморачиваться и делать просто { width: 100%; height: auto; }, перфекционизм - позже.
2. Расставляем брекпоинты. Обратите внимание: их надо расставлять не по "популярным" разрешениям экрана, а в соответствии с дизайном! Как пример - вывод товаров в каталоге в виде сетки. На большом экране будет четыре товара в ряд (25% ширины), потом - три, два и, наконец, для телефонов в портретной ориентации - один товар (100% ширины). Разрешение, при котором будет "перепрыжка" товаров с четырёх в строке на три (и прочие) надо определять визуально, лучше вместе с дизайнером. Результатом этого этапа должен быть сайт, который с максимального разрешения (допустим 2000 пикселей) до минимального (200?) красиво меняется в браузере при плавном изменении размера окна.
3. Тестируем на популярных разрешениях экрана. Заметьте, это практический последний этап. Если предыдущие этапы сделаны правильно, то на этом не остаётся никакой работы - просто проверка.
4. Наводим лоск. Здесь уже можно заняться оптимизациями и украшательставами. В частности - сделать разные источники для каждой картинки. Не буду подробно описывать технологии, руководств много в сети, по картинкам например вот: "
Отзывчивые изображения: примеры использования"
Средний
