Масштабирование изображений в браузере с помощью CSS или переполнение стека на стороне сервера

Я создаю тему WordPress, которая будет использовать импортированные сообщения с другого сайта.
Эти сообщения имеют изображения, которые различаются по размеру и соотношению сторон.
В новой теме есть предопределенные области, в которые эти изображения должны помещаться, и заполнять область центрированием и без почтовых ящиков.
Не нарушая семантику тега img с помощью фоновых изображений, я собрал несколько методов, которые я видел в других местах, для масштабирования изображений и размещения / центрирования их на панели, например:

CSS:

.fillwidth {
width: 100%;
height: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.fillheight {
height: 100%;
width: auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
}

div {
border: 1px solid black;
overflow: hidden;
position: relative;
}

JS:

<script src="http://localhost/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">    </script>
<script>
(function($){
$('div').each(function() {
var fillClass = ($(this).height() > $(this).width())
? 'fillheight'
: 'fillwidth';
$(this).find('img').addClass(fillClass);
});
})(window.jQuery);
</script>

HTML:

<div>
<img src="test.jpg" />
</div>

Таким образом, в основном JS определяет соотношение сторон, изображение помещается в рамку, а преобразование центрирует его.

Теперь мой вопрос, на сайте WordPress с высоким трафиком, вы бы порекомендовали разрешить браузеру пользователя делать это с изменением размера во внешнем интерфейсе, или же тема должна создавать несколько версий загруженных изображений, чтобы заранее соответствовать разным панелям сайта? В современных браузерах, каково влияние запроса браузера на масштабирование и изменение размера изображений?