Динамические адаптивные фоновые изображения с WordPress

У меня есть вопрос с динамическими фоновыми изображениями, которые также являются отзывчивыми.

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

Затем я создал файл herostyle.php и добавил следующий код:

<?php

$absolute_path = explode('wp-content', $_SERVER['SCRIPT_FILENAME']);
$wp_load = $absolute_path[0] . 'wp-load.php';
require_once($wp_load);header("Content-type: text/css; charset: UTF-8");

$heroImage       = get_post_meta( 6, 'main_header_image', true );
$heroImageFull   = wp_get_attachment_image_src( $heroImage, 'herofull' );
$heroImageDesk   = wp_get_attachment_image_src( $heroImage, 'herodesk' );
$heroImageTab    = wp_get_attachment_image_src( $heroImage, 'herotab' );
$heroImageMobile = wp_get_attachment_image_src( $heroImage, 'heromobile' );

?>

.home-hero {
height: 500px;
background-image: url(<?php echo $heroImageMobile[0]; ?>);
}

@media screen and (min-width: 768px) {
.swb-hero {
background-image: url(<?php echo $heroImageTab[0]; ?>);
}
}@media screen and (min-width: 1024px) {
.swb-hero {
background-image: url(<?php echo $heroImageDesk[0]; ?>);
}
}

@media screen and (min-width: 1600px) {
.swb-hero {
background-image: url(<?php echo $heroImageFull[0]; ?>);
}
}

Затем я добавил эту таблицу стилей в свой файл functions.php со следующим кодом:

function my_new_styles() {
wp_enqueue_style( 'hero', get_template_directory_uri() . '/src/sass/herostyle.php', null, null );
}
add_action( 'wp_enqueue_scripts', 'my_new_styles' );

Поэтому я загружаю изображение шириной 2400 пикселей, а затем создаю четыре адаптивных изображения с помощью WordPress, используя следующий код в моем functions.php:

add_image_size( 'herofull', 2400, 4000, false);
add_image_size( 'herodesk', 1600, 4000, false);
add_image_size( 'herotab', 1000, 4000, false);
add_image_size( 'heromobile', 800, 4000, false);

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

Кто-нибудь знает, имеет ли это какие-либо преимущества? Есть ли лучшие решения этой проблемы? Единственное, что мне не нравится в этом, — это добавление еще одной таблицы стилей на сайт.

Спасибо за любую помощь / совет по этому вопросу!