Carga de imagenes de fondo

[ElionTDA]

Me gustaría saber si alguien a comprobado que sale mejor en terminos de rendimiento, si cargar la imagen de fondo mediante css, y luego dependiendo del dispositivo, adaptar el tamaño a cadadispositivo (con cover o algo así)

O cargarla directamente con javascript con un evento onload, comprobar el tamaño del dispositivo, y meter el fondo de pantalla adecuado.


Y por otro lado, el tema de responsive con el resto de elementos, sale mejor usar min-width max-height, etc... O hacerlo mediante javascript, en el mismo momento del onload.

Muchas gracias de antemano.
ElionTDA

[CircuitoX]

Yo para cargar imagenes grandes lo hago via jquery, lo cargo solo después de que la pagina haya cargado por completo, no uso varias images según la resolución de pantalla.

Sobre el tema max-height o min-width, no lo uso en un fondo,

Generalmente uso max-width 100% y este se acomoda según la resolución de pantalla, poniendo directamente la imagen y no como fondo.

[Ramz]

Hay una forma muy sencilla para gestionar las imágenes en los distintos tamaños de pantalla.
El código más o menos sería:

Código CSS:

@media(max-width: 1920px)
{
    .imagen_1
    {
        background-image: url("../img/imagen_1_1920.jpg");
    }
}
 
@media(max-width: 1024px)
{
    .imagen_1
    {
        background-image: url("../img/imagen_1_1024.jpg");
    }
}
...