HTML, CSS, адаптивный: как использовать спрайт, содержащий изображения разных размеров?

На моем сайте мне нужны изображения разных размеров. Например:

• Изображения A, B, C: 320 x 320 пикселей
• Изображение D, E: 400 x 200 пикселей
• Изображение F: 20 x 16 пикселей.

Я хочу сделать один спрайт для всех изображений. Я хочу сделать его отзывчивым, поэтому я использую проценты для определения его высоты и ширины. Все методы, которые я нашел в Интернете, имеют высоту жесткого кода и не упоминают, как сделать его отзывчивым.

Текущий используемый метод:

Я объединил изображения одинакового размера в один спрайт

• Изображения A, B, C - sprite1.png
• Изображения D, E - sprite2.png
• Изображение F — без использования спрайтов

Я также создал прозрачные изображения (холдеры) для указанных выше размеров.

Причина, по которой я делаю это таким образом, заключается в том, что я понял, как заставить его работать и при этом оставаться отзывчивым:

<div class="type-1">
    <img src="transparent_img_320_320.png" class="image_a" />
    <img src="transparent_img_320_320.png" class="image_b" />
    <img src="transparent_img_320_320.png" class="image_c" />
</div>

<div class="type-2">
    <img src="transparent_img_400_200.png" class="image_d" />
    <img src="transparent_img_400_200.png" class="image_e" />
</div>

<div class="type-3">
    <img src="transparent_img_20_16.png" class="image_f" />
</div>

И в CSS я поместил свои изображения в качестве фонового изображения, как показано ниже (упомянув только одно для одного размера, но я повторяю то же самое и меняю положение в своем коде):

.image_a {
    background: url(../images/sprite1.png);
    background-size: 300% 100%;
    background-position: 100% 0;
}

.image_d {
    background: url(../images/sprite2.png);
    background-size: 400% 200%;
    background-position: 300% 0;
}

Проблемы:

• Необходимо создать уникальное прозрачное изображение для каждого файла.
• Проблематично работать со многими спрайтами.
• Приходится помещать каждое изображение в качестве фона, так как я не нашел решения, которое не использует жестко заданную высоту и ширину для файлов .
• растяжка прозрачных изображений для изображений разных размеров не работает. Есть ли способ избежать прозрачных изображений?

Любой другой способ сделать это приветствуется.

Требования: несколько изображений разного размера, адаптивной высоты и ширины.

дополнительный вопрос: должны ли большие изображения (например, фон всей страницы) быть частью спрайта, учитывая, что у меня есть 8 фоновых изображений.