Разные экраны, разные разрешения фоновых картинок. Как?

При разработке веб-сайта или веб-приложения важной задачей является обеспечение качественного отображения фоновых изображений на разных разрешениях экранов.

Существует несколько подходов к решению этой задачи:

1. Медиа-запросы: С использованием CSS медиа-запросов, можно указать различные изображения для разных разрешений экранов. Например, если вы хотите использовать одно изображение для широких экранов (например, разрешение 1920x1080), и другое изображение для узких экранов (например, разрешение 768x1024), вы можете определить следующий CSS код:

body {
    background-image: url('background-wide.jpg');
}

@media (max-width: 768px) {
    body {
        background-image: url('background-narrow.jpg');
    }
}

2. Тег picture: HTML5 представляет новый тег <picture>, который позволяет указать несколько источников изображений и выбрать наиболее подходящий вариант, основываясь на разрешении экрана. Вот пример использования тега <picture>:

<picture>
  <source srcset="background-wide.jpg" media="(min-width: 768px)">
  <source srcset="background-narrow.jpg" media="(max-width: 767px)">
  <img src="fallback.jpg" alt="Background Image">
</picture>

3. JavaScript: Еще один подход - использование JavaScript для динамической загрузки и замены фоновых изображений, основываясь на размере экрана. Вы можете использовать библиотеку, такую как jQuery, для более простой манипуляции с элементами DOM. Вот пример:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    var width = $(window).width();
    if (width >= 768) {
        $('body').css('background-image', 'url(background-wide.jpg)');
    } else {
        $('body').css('background-image', 'url(background-narrow.jpg)');
    }
});
</script>

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

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