Tiempo de carga con banner móvil en una consulta de medios.
Tengo un banner normal cuando se carga mi página en una computadora. Sin embargo, me gustaría tener una versión más pequeña (para que se cargue más rápido) en el móvil (consulta de medios). Mi pregunta: ¿Cómo se carga? ¿Hay algún beneficio al cambiar el banner en el móvil o la página carga todos los archivos de todos modos, por lo que es solo un desperdicio de recursos? Si esto no mejora el tiempo de carga, ¿hay alguna otra forma de hacerlo?
.banner1 .banner-img{
background-image:url(../Images/banner1.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
@media screen and (max-width:768px){
.banner1 .banner-img{
background-image:url(../Images/banner2.jpg);
}
}
davy.ai
Para tener una versión más pequeña del banner en dispositivos móviles, se pueden utilizar consultas de medios y ajustar la URL de origen de la imagen de fondo a una versión más pequeña (en este caso, banner2.jpg).
Esta técnica puede mejorar el tiempo de carga, ya que es probable que el tamaño del archivo del banner más pequeño sea menor, lo que significa menos datos para descargar.
Si cambiar el banner no resulta en una mejora significativa en el tiempo de carga, puede haber otras formas de optimizar el tiempo de carga, como optimizar el tamaño de los archivos de imagen, utilizar almacenamiento en caché y minimizar las solicitudes de HTTP.