¿Cuál es la mejor manera de tener una imagen de fondo a tamaño completo sin ralentizar la carga de la página?

Realmente no hay ninguna magia. Así es como se hace:

1) Estas imágenes no son realmente tan grandes, unos pocos cientos de KB. Este fondo de pantalla cuadrado es de hecho solo 136 kb, tomó mi computadora en una conexión rápida de 200 ms para tomarlo. Eso es un abrir y cerrar de ojos.
2) Use un CDN
3) Establecer encabezados de caché
4) Cargue primero los recursos importantes en su sitio web, como el texto “Deje su billetera en casa” y el formulario.
5) Asegúrese de no tener una tonelada de otros recursos pequeños que está cargando antes. Los navegadores generalmente pueden hacer aproximadamente media docena de conexiones a la vez. Asegúrate de usar esas conexiones sabiamente hasta que tengas todo el contenido realmente importante entregado.
6) Diferir todo lo que pueda.

Puede haber alguna optimización de la imagen aquí para que se vea bien pequeña, ese no es mi dominio. Pero creo que JPEG listo para usar hace un buen trabajo.

Lea las otras respuestas sobre el uso de un CDN, gzip, etc. para conocer los métodos de entrega, pero aquí hay un truco para reducir el tamaño de las imágenes grandes cuando las crea:

  1. Su imagen original debe tener el doble de ancho de lo que parece: 3000-4000 px de ancho. Dependiendo de la imagen y de cómo se va a estirar, es posible que pueda salirse con la más pequeña.
  2. Ábralo en PhotoShop y vaya a Guardar para Web.
  3. Guárdelo como jpg, pero tome el control deslizante de calidad y deslícelo TODO hasta CERO. Sí, 0. Presiona guardar.
  4. Encontrará la imagen que guarda a la mitad del ancho (2000 px en lugar de 4000 px) y una configuración de calidad decente (60-70) será más del doble (en tamaño de archivo) que la imagen de doble ancho y calidad cero . Debido a que la imagen se renderiza con al menos el doble de píxeles, no verá los artefactos jpg u otras cosas asquerosas que sucedan cuando se descarta toda esa calidad.
  5. Use la propiedad CSS-imagen de fondo para insertar su imagen al 100% de la ventana del navegador. Luego use consultas de medios para asegurarse de que las pantallas más pequeñas obtengan una imagen mucho más pequeña. La imagen se cargará solo si se cumple la condición de ancho, por lo que no desperdicia anchos de banda de pantallas más pequeñas. Sin embargo, podría discutir sobre dónde se detiene la pantalla pequeña y dónde comienza la grande.
  / * 
 ejemplo usa el atajo de cuerpo y fondo para abreviar
 la consulta de ancho mínimo establece pantallas más grandes que 801
 la consulta de ancho máximo establece pantallas de menos de 800 px
  * /

 @media screen y (ancho mínimo: 801px) {
   cuerpo {
   fondo: url (big-image-4000px.jpg);
   tamaño de fondo: 100%;
   } 
 } 

 @media screen y (ancho máximo: 800px) {
   cuerpo {
   fondo: url (small-image-1000px.jpg);
   tamaño de fondo: 100%; 
   } 
 } 

Tenga en cuenta los tamaños en la parte inferior de estas capturas de pantalla:

0 calidad, 2000 px de ancho = 98k

70 calidad, 1000 px de ancho = 183k

A veces los tonos de piel están un poco apagados, pero esta técnica es perfecta para aquellas imágenes que necesitan llenar el fondo. El ejemplo de Square que muestra también podría hacerse con 2 imágenes: un fondo borroso altamente comprimido y un png de la mano que superpone esa imagen.

Use una imagen muy pequeña y repita CSS (o lo que sea) 🙂 Así es como la mayoría de los sitios web representan imágenes de fondo grandes 🙂
Por ejemplo, para repetir una imagen verticalmente en toda su página, use:
cuerpo
{
imagen de fondo: url (‘bg.png’);
background-repeat: repetir-y;
}

Para un ejemplo en vivo, aquí hay uno directamente del encabezado de Apple.

#coupon_header {altura: 26px; ancho: 710px; background-image: url ( http://cdn.sendori.com/images/bg_header.png ); background-repeat: repeat-x;

¡Están usando una imagen de 1 píxel de ancho y la repiten a 710 píxeles!
Vea su imagen de fondo real aquí
http://cdn.sendori.com/images/bg … Ni siquiera puedes ver la imagen 🙂

Aquí hay algunos consejos que puede usar para acelerar la página:

  1. Use CDN
  2. Comprime la imagen. Si usa nginx, use el módulo gzip_static
  3. Establecer el encabezado de caché
  4. Use la imagen que se ajuste a la resolución, no use la imagen en bruto como la imagen de resolución 4k mientras la pantalla de destino será 1080p.
  5. Si está en Chrome, use la imagen webp.