Лучший размер изображения для отзывчивого фонового изображения css

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

У кого-нибудь есть мысли о том, как лучше всего отображать фоновое изображение в этих обстоятельствах?

Этот связанный вопрос, вероятно, может быть вам полезен

Ответы (4)

Если вы хотите использовать одно изображение для всех мобильных устройств и отображать его с максимальным разрешением, вам придется использовать огромное изображение, чтобы вместить самое большое устройство на рынке. Я считаю, что это iPad с дисплеем Retina с разрешением 2048 x 1536 пикселей.

Сказав это, я не думаю, что это очень хороший подход

  • Трудно поддерживать : размеры «самого большого экрана на рынке» могут измениться в одночасье из-за выпуска новых устройств, поэтому ваша цель получить одно изображение, которое подходит всем, должна сопровождаться постоянными исследованиями, пытающимися выяснить, будет ли новое устройство был запущен с большим экраном, чем вы рассчитали. Сам факт того, что вы задаете здесь этот вопрос, свидетельствует о том, насколько сложно определить, какой из представленных на рынке экранов является самым большим.
  • Ненужные загрузки : вы будете вынуждать посетителей с маленькими экранами загружать огромное изображение, тратя их квоту на загрузку без необходимости и рискуя тем, что их браузеры могут не отображать очень хорошую версию вашего изображения, когда они уменьшат его.

Я думаю, что лучший подход — использовать медиа-запросы и предоставлять разные изображения в зависимости от максимальной ширины устройства (или максимальной ширины браузера, здесь мнения расходятся). По сути, вы бы предоставили меньшее изображение для небольших устройств, большее — для средних устройств и огромное — для потрясающих экранов. Вы можете установить эти остановки, где хотите.

Я ответил на аналогичный вопрос здесь: Общая основа для размеров изображений при использовании Photoshop для сохранения в Интернете.

Это именно тот ответ, которого я не хотел. :( Учитывая, что я не могу найти других ответов, которые были бы достаточными, я думаю, мне все-таки придется иметь огромный скрипт jquery.
Да, это очень раздражает: S Однако на самом деле вам не нужен JQuery. Вы можете добиться этого с помощью CSS и медиа-запросов, если вы назначите изображение в качестве фона элемента, а не в качестве атрибута src изображения. Взгляните на ссылку в конце моего ответа.
Сценарий, который я пишу, определяет фоновое изображение, исходя из содержания статьи. Я не вижу, как этого можно избежать, если браузеры не начнут поддерживать тег <picture>. :(
Можете ли вы добавить логику на стороне сервера (php, aspx и т. д.)? Вы можете позволить серверу оптимизировать размер изображения перед его обслуживанием на основе максимальной ширины устройства.
Я обычно делаю это с любыми клиентами, когда я разрабатываю для них виртуальную машину для размещения их веб-сайта. К сожалению, это CMS с ограничениями на серверной части, поскольку им нужно знать, как поддерживать контент самостоятельно. мда , я знаю.

Я выдвигаю здесь предположение о намерении исходного вопроса . Я считаю, что вопрос касается двух целей:

1) требования к размеру для полного отображения на различных портах просмотра 2) приемлемые размеры (минимальные), которые облегчили бы меньший размер файла

Я нашел хорошую статью в Smashing Magazine , которая также может быть интересна для ответа на этот вопрос. Он специально предназначен для адаптивных веб-сайтов http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/ .

вам не нужно делать огромный jquery, вы можете легко сделать это в css, здесь я покажу вам, как это сделать, но вам придется подумать, как это применимо к вашему css, поскольку я не знаю, как называется ваш идентификатор класса.

в css-файле

body {
background: #FFFFFF url(images/largebackground.jpg);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}

@media screen and (min-width: 400px) and (max-width: 1024px) {
.body {
    background: #FFFFFF url(images/mediumbackground.jpg);
}
}


@media screen and (max-width: 399px) {
.body {
    background: #FFFFFF url(images/smallbackground.jpg);
}
}

вот и все, вы также можете проверить ориентацию точно так же.

проверить - http://viewportsizes.com/

также этот инструмент помогает мне «увидеть», как разные веб-сайты будут выглядеть при разной ширине области просмотра, очень полезно:

http://bradfrost.com/demo/ish/

Привет, круто, не могли бы вы объяснить немного больше, что мы найдем по предоставленной вами ссылке и почему она отвечает на вопрос? Таким образом, ваш ответ по-прежнему имеет значение на случай, если ссылка сломается позже. Гниль ссылок — основная причина, по которой нам действительно не нравятся ответы, содержащие только ссылки. Спасибо за ваши усилия и продолжайте вносить свой вклад!
Лучший размер изображения для отзывчивого фонового изображения css
СпросиСетьПолитика конфиденциальности1y, 0v