Tienes que usar tu mejor criterio y lo que tus visitantes soportarán durante el tiempo de carga.
Si es un jpg con poco detalle o quizás incluso borroso, puede salirse con una imagen grande de alrededor de 1600px de ancho en resolución media a baja con un tamaño de archivo de alrededor de 100kb o menos. No debería tener un gran impacto en el tiempo de carga.
Si se trata de una imagen de alto detalle, trabaje duro para lograr un equilibrio entre la definición y el tamaño de archivo moderado. Como regla, trato de nunca usar una imagen de más de 200 kb.
- ¿Es mejor mostrar mi pieza de cartera en una ventana emergente modal o en otra página?
- ¿Qué marco / ecosistema es más popular y futurista para el aprendizaje, así como para desarrollar aplicaciones web y aplicaciones móviles multiplataforma en este momento (agosto de 2017): Angular 2.0 / 4.0 o React?
- Cómo construir mi propio sitio de transmisión de videos de suscripción tipo Netflix
- ¿Cuáles son algunas de las ventajas o desventajas de usar Google Firebase?
- ¿Nuestros navegadores web modernos realmente necesitan herramientas de inspección de páginas que se ejecutan al aire libre?
Si está creando un sitio receptivo, puede considerar consultas de medios para cambiar archivos más pequeños en pantallas más pequeñas como imagen de fondo.
Aquí hay un ejemplo de una forma en que podría intentarlo.
Primero hago 3 versiones del archivo:
huge.jpg = 1600px de ancho
medium.jpg = 960px de ancho
small.jpg = 600px de ancho
Escribe un poco de CSS:
# bg-cover-pic {
imagen de fondo: url (huge.jpg);
tamaño de fondo: cubierta;
-webkit-background-size: cubierta;
-moz-background-size: cubierta;
ancho: 100%;
altura: 100%;
posición: absoluta;
arriba: 0;
izquierda: 0;
índice z: -1;
}
Escriba algunas consultas de medios:
@media screen y (max-width: 960px) {
# bg-cover-pic {
imagen de fondo: url (medium.jpg);
}
}
@media screen y (ancho máximo: 599px) {
# bg-cover-pic {
imagen de fondo: url (small.jpg);
}
}
Por supuesto, eso es solo una sugerencia, ¡pero espero que ayude de todos modos!
