El mejor tamaño de imagen para la imagen de fondo css receptiva

Estoy buscando una imagen de tamaño de px (ancho x alto) en particular que sería la mejor dimensión para usar si quisiera llamar a una sola imagen que podría llamarse como imagen de fondo para un dispositivo móvil usando retrato u paisaje.

¿Alguien tiene alguna idea sobre la mejor manera de mostrar una imagen de fondo en estas circunstancias?

Esta pregunta relacionada probablemente pueda serle útil

Respuestas (4)

Si desea usar una sola imagen para todos los dispositivos móviles y mostrarla en su resolución máxima, tendrá que usar una imagen enorme para acomodar el dispositivo más grande del mercado. Creo que es el iPad con pantalla retina que tiene 2048 x 1536 píxeles.

Habiendo dicho eso, no creo que este sea un muy buen enfoque.

  • Difícil de mantener : las dimensiones de la "pantalla más grande del mercado" pueden cambiar de la noche a la mañana con el lanzamiento de nuevos dispositivos, por lo que su objetivo de tener una imagen que se adapte a todos deberá ir acompañado de una investigación constante para averiguar si un nuevo dispositivo se ha lanzado que tiene una pantalla más grande que la que tenías en cuenta. El solo hecho de que esté haciendo esta pregunta aquí sugiere lo difícil que es averiguar cuál es la pantalla más grande del mercado.
  • Descargas innecesarias : obligará a los visitantes con pantallas pequeñas a descargar una imagen enorme, desperdiciando su cuota de descarga innecesariamente y arriesgándose a que sus navegadores no muestren una versión muy agradable de su imagen cuando la reduzcan.

Creo que un mejor enfoque es usar consultas de medios y proporcionar diferentes imágenes según el ancho máximo del dispositivo (o el ancho máximo del navegador, aquí las opiniones difieren). Básicamente, proporcionaría una imagen más pequeña para dispositivos más pequeños, una más grande para dispositivos medianos y una enorme para pantallas increíbles. Puedes configurar estas paradas donde quieras.

Respondí una pregunta similar aquí: Puntos en común para los tamaños de imagen cuando se usa Photoshop para guardar en la web

Esta es la respuesta exacta que no quería. :( Teniendo en cuenta que no puedo encontrar ninguna otra respuesta que sea suficiente, supongo que tendré que tener un gran script jquery después de todo.
Sí, es muy molesto: S Sin embargo, realmente no necesitas JQuery. Puede lograr esto utilizando CSS y consultas de medios siempre que asigne la imagen como fondo de un elemento y no como el atributo src de una imagen. Echa un vistazo al enlace al final de mi respuesta.
El guión que estoy escribiendo determina la imagen de fondo de lo que dice el contenido del artículo. No veo cómo se puede evitar esto a menos que los navegadores comiencen a admitir la etiqueta <imagen>. :(
¿Puede agregar lógica del lado del servidor (php, aspx, etc.)? Puede dejar que el servidor optimice el tamaño de la imagen antes de servirla según el ancho máximo del dispositivo.
Normalmente hago eso con cualquier cliente cuando desarrollo para ellos usando una máquina virtual para alojar su sitio web. Lamentablemente, este es un CMS con limitaciones en el back-end, ya que necesitarán saber cómo mantener el contenido ellos mismos. mmm , lo sé.

Estoy presentando una conjetura aquí sobre la intención de la pregunta original . Creo que la pregunta se relaciona con dos objetivos:

1) requisitos de tamaño para visualización completa en varios puertos de visualización 2) tamaños aceptables (mínimos) que facilitarían tener un tamaño de archivo más pequeño

Encontré un buen artículo en Smashing Magazine que también puede ser de interés para responder esta pregunta. Se dirige específicamente a sitios web receptivos http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/

no necesita hacer un gran jquery, puede hacerlo fácilmente en css, aquí le mostraré cómo hacerlo, pero tendrá que pensar cómo se aplica esto a su css ya que no sé cómo se llama su identificación de clase.

en el archivo 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);
}
}

eso es todo, también puede verificar la orientación de la misma manera.

echa un vistazo - http://viewportsizes.com/

Además, esta herramienta me ayuda a "ver" cómo se verán los diferentes sitios web en diferentes anchos de ventana gráfica, muy útil:

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

Hola increíble, ¿podrías explicar un poco más lo que encontraremos detrás del enlace que proporcionas y por qué responde la pregunta? De esa manera, su respuesta seguirá siendo valiosa en caso de que el enlace se rompa más adelante. Link rot es la razón principal por la que realmente no nos gustan las respuestas de solo enlace aquí. ¡Gracias por tu esfuerzo y sigue contribuyendo!
El mejor tamaño de imagen para la imagen de fondo css receptiva
RespuestasAquíPolítica de privacidad1y, 0v