Какой оптимальный размер фонового изображения?

Question

[IIIu6ko]

Какого разрешения лучше использовать изображения для фона? 1080р или меньше? Или для каждого медиазапроса отдельную картинку? Если кто знает статьи какие-то хорошие на эту тему, то поделитесь :)
Изображение соответственно на всю ширину экрана пользователя.

Answer 1

[Андрей Б.]

1080р это вообще то видео разрешение.

Для фона лучше использовать как минимум 1920px т.к. основная масса мониторов в этом разрешении или 2560 если учитывать 27 дюймовые моники.
Если используете разные картинки в медиа запросах, помните, браузер будет грузить их все, что плохо.

Comments

[Игорь Перегудов]

как вариант использовать тег грузит картинки от размера экрана

[Андрей Б.]

Игорь Перегудов Ошибаетесь, тегом картинка будет загружена в своем оригинальном размере, если иной не указан явно. И автор я так полагаю спрашивает про background.

[IIIu6ko]

Андрей Б.: А как же быть с телефонами? Основная картинка будет по-любому подгружаться или разрешение будет подстраиваться под размер экрана?
И ещё один момент. Если я зайду на сайт с телефона, у которого фуллхд разрешения в горизонтальной развёртке, то он мне подгрузит самое большое разрешение или как-то иначе?

[Ankhena]

Александр Шибков: иначе
viewportsizes.com

Answer 2

[dom1n1k]

По ситуации нужно смотреть. Если сайт анаптивный под весь спектр устройств, то лучше иметь 2-3 картинки разных размеров - чтобы на больших экранах было качества, но при этом не насиловать мобильных пользователей фоном на мегабайт.

Answer 3

[Mark]

Тут спорный вопрос))
Возьмете большое изображение более 2000px например, будет долго грузиться у юзеров с плохим инетом.
Возьмите 1200 px и через css растяните на 100% по ширине.

Comments

[IIIu6ko]

Я взял с шириной 2560 уже. Весят по 360кб в среднем. Для мобильной версии сделаю изображение поменьше с примерном весом 50-100кб