Как правильно работать с background?

Question

[Dmitry]

Какого размера (длина/ширина) должен быть файл jpg, используемый на странице как background? (Чтобы не было, например, "обрезаний" при разных разрешениях экрана или "дополнения" пустых мест его дублированием). Какие размеры файла желательны (в байтах)? Может быть есть хороший материал (статьи) по правильной работе с фоновыми картинками?

Comments

[Алексей Уколов]

Сколько рулонов обоев нужно на квартиру?

Answer 1

[Сергей delphinpro]

Без обрезки никак. Сами должны понимать. Если пропорции экрана отличаются от пропорций изображения, то обрезка будет по-любому.

Если это какой-то абстрактный фон, то без разницы. Берем несколько картинок разного размера (чтобы на мобилах не грузить лишнего) и подключаем их через медиа-запросы.

Если на фоне есть какой-то объект, то желательно, чтобы он был в центре (из-за обрезки по краям) и нужны два варианта изображения - вертикальное и горизонтальное. Так же через медиазапросы (portrait/landscape) подменяем. Плюс несколько размеров (2-3) под разрешение экранов, с учетом ретины - 2х.

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

Answer 2

[Ankhena]

Чтобы не было, например, "обрезаний" при разных разрешениях экрана или "дополнения" пустых мест его дублированием

Геометрия говорит нам, что если пропорции блока и изображения не совпадают, то возможны три варианта:
- поля
- обрезка лишнего
- искажение пропорций

Поскольку, без искажений пропорций из одного изображения так сделать невозможно, то остается один вариант - подгружать разные файлы.

Но кроме пропорций, есть ещё поддержка форматов и плотность пикселей. Так что, сложность тут не одна.

Какие размеры файла желательны (в байтах)?

Минимальные. При этом нужно сохранять достаточное качество.

Этот вопрос не имеет смысла, даже если вы скажете размер вьюпорта/блока, но не покажете картинку. Потому что одна сожмется прекрасно, а другая заметно потеряет в качестве.

Для ретины и разных форматов файлов используйте image-set
Для разных размеров - @media
Для оптимизации размеров - форматы webp, avif

Answer 3

[Михаил Лялин]

Либо обрезка при выводе либо переход на градиенты