Как сохранить качество фона картинки CSS?

Question

[kos_dev]

Здравствуйте, такая проблема:

Качаю картинку, устанавливаю ее как фон для странички в браузере background-size: cover, но жутко теряется качество.
Подскажите, как правильно устанавливать фон для элементов. Вот пример, которого я пытаюсь добиться: dinero.ru/#shop-slide

Всем заранее большое спасибо.

Answer 1

[Sanes]

В примере изображения FullHD. Про media-запросы еще почитайте.

Comments

[kos_dev]

Спасибо, FullHD изображения работают как следует. А вот с медиа запросами было бы больше мороки.

Answer 2

[Adikjoro]

Необходимо понимать само понятие слова "качество изображения". Оно определяется количеством пикселей на изображении.
Пиксель - это единица из которой состоит изображение. Общее количество пикселей изображения указывается: количеством пикселей по ширине и высоте, например, 1280 на 720, то есть по формуле нахождения площади S = a*b. Соответственно, чем выше эти значения, тем выше качество изображения. Качество изображения принято называть разрешением изображения.
Так же и экраны имеют свои разрешения. Если же разрешение изображения меньше, чем разрешение экрана, при масштабировании изображения во весь экран, происходит всего лишь увеличения размеров пикселей, отсюда они становятся заметными, что называется потерей качества изображения.

Тебе просто надо качать изображения с разрешением FullHD(1920x1080), это самое распространенное разрешение экранов в последнее время.

Comments

[riot26]

качество != разрешение

[Adikjoro]

riot26: Правильно подметил, "качество" - это относительное понятие. Изображение может применяться в разных размерах, для иконок малое разрешение может называться хорошим качеством, а для фона плохим.
Ну я так, не плавно перешел со слова "качество" на "разрешение".
Я исходил от распространенной ошибочной фразы: "Качество изображения 1920 на 1080".

[riot26]

Adikjoro: нет, ещё раз повторю: качество != разрешение. Есть ещё форматы, методы и уровни сжатия, шумы экспозиции, неправильный фокус и таких факторов ещё мешок с горкой.