Con respecto al desarrollo web, ¿cómo hago para que una imagen de fondo grande se cargue rápidamente?

Aquí hay un par de cosas que puedes hacer:

1. No lo use e intente hacer la “imagen” como CSS. Siempre que pueda usar código sobre imágenes, hágalo. Obviamente, esto no siempre es posible, pero se sorprenderá de lo que puede lograr ahora con CSS.
2. Si tiene que usar una imagen, vea si puede convertirla en un SVG (gráfico vectorial) que se escalará y no se pixelará. Los SVG pueden ser complejos y pueden interpretarse como código.
3. Vea si las imágenes Base64 incrustadas en su HTML / CSS son una buena manera de hacerlo ( http://davidbcalhoun.com/2011/wh … – Ahora, lo curioso es que la especificación HTTP2 que ahora está fuera cambia muchas formas utilizamos para hacer cosas (agrupar archivos juntos ya no es un beneficio de rendimiento con la nueva especificación, porque HTTP2 descarga mejor simultáneamente varios archivos; sin embargo, HTTP2 aún no es totalmente compatible, hace que la ingeniería de rendimiento sea un rasguño de cabeza en este momento).
4. Si todo eso es demasiado trabajo, y se ve obligado a usar un JPG, PNG u otro formato de tipo “foto”, comprímalo en Photoshop lo mejor que pueda y haga que el tamaño de la imagen no sea mayor que el tamaño que necesitará para (es decir, no lo convierta en una imagen de 10,000 px por 10,000 px cuando una imagen de 2000 px x 2000 px podría hacerlo).

1. Si conoce GULP, puede usar complementos de minificación de imágenes. (no comprimirá la calidad, pero le ayudará a reducir el tamaño de su archivo al eliminar la metainformación).
2. Otra opción es Photoshop, guarde su archivo como la opción “guardar para la web”, luego elija el formato de archivo y vaya a todas las opciones, encontrará un menú desplegable de baja, media y alta calidad, también puede cambiar la calidad de 1 a 10 rango Vista previa de hit en la parte inferior izquierda y guardarlo.
3. También puede comprimir su archivo en línea dependiendo de sus extensiones de archivo.

Puede usarlo para archivos jpeg Comprimir imágenes JPEG en línea

Espero que te ayude. Si no, ¡por favor envíame un correo

No hay trucos brillantes. Puede ampliar una imagen más pequeña (debe ser múltiplo de 2) pero eso hará que la imagen tenga una resolución más baja.

Ancho funciona mejor que alto. A menudo ve una franja panorámica en la parte superior de una página de destino.

La compresión se puede ajustar, pero también es una compensación clara. No baje a ‘medio’ y espere que las cosas sean iguales. Invierta en una buena herramienta de compresión. Yo uso “Snap Converter” en mi Mac y me encanta.

Las consultas de medios CSS pueden ayudar. ¿Por qué cargar una imagen de 2000 píxeles de ancho en una ventana del navegador que solo tiene 900 píxeles de ancho?

En última instancia, utilice todos los trucos, con juegos de manos, para lograr el mejor efecto “percibido”.

Tratar

• No use un CDN para cargar la imagen. Use el mismo host que su sitio web. Empaquete su imagen de fondo si está utilizando un paquete. El uso de un CDN agregaría una dependencia adicional en su sitio web. Así que evite las CDN.
• Reduce el tamaño de tu imagen y agrega un efecto de desenfoque con CSS. Como se trata de una imagen de fondo, no necesita comunicar ninguna información de ella. Así que solo úsalo por estética. Como está destinado a monitores modernos de pantalla ancha, asegúrese de mantener una relación de aspecto de 16: 9 para esa imagen.

Deberías echar un vistazo a Amazon Cloud Front.

Amazon CloudFront es un servicio web que acelera la distribución de su contenido web estático y dinámico, como .html, .css, .php y archivos de imagen, a sus usuarios. CloudFront entrega su contenido a través de una red mundial de centros de datos llamados ubicaciones de borde.

Puede encontrar un tutorial útil para esto aquí: Tutorial: Cómo usar Amazon S3 y CloudFront CDN para servir imágenes de forma rápida y económica

Si realmente desea que sus usuarios tengan la experiencia completa de fondo, considere guardar una versión de calidad muy reducida en JPEG, y use una rutina de JavaScript para cargar la versión completa una vez que la página haya terminado de cargarse, más de 5 a 8 segundos .

De esta manera, si el usuario se aleja, la versión completa no se cargará. Y si se quedan, porque podrían ver el fantasma de la imagen, no parecerá que lleve tanto tiempo.

Puede usar las siguientes herramientas para completar esta tarea.

1. Optimizador de archivo
2. ALBOROTO
3. Cesio

y la lista continúa …

Sin embargo, debe usar las herramientas de compresión de imagen con cuidado para evitar degradar la calidad de la imagen.

No solo para jpeg, hay varias herramientas utilizadas para todos los formatos de imágenes.

Las 5 mejores herramientas de compresión de imágenes sin conexión

Cree imágenes amigables para SEO para WordPress: optimice imágenes para web

Utiliza el truco jpg de calidad cero.

Guarde su imagen a tamaño completo aproximadamente el doble del tamaño que aparecerá con la calidad jpg de cero, Sí, cero. Cortará su tamaño a la mitad o más y aún se verá bien.

He respondido a este antes con detalles sobre cómo hacerlo:

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

También busque gzipping y CDN, y pruebe el elemento de imagen HTML5, que puede ofrecer múltiples fuentes de imagen para diferentes anchos de ventana.

Si la interfaz de carga le molesta, existe la opción de agregar una pantalla de carga, para que todo se muestre solo después de cargarlo desde los servidores. Sin embargo, en realidad no puede hacer mucho si simplemente quiere que se cargue más rápido, supongo que puede descargar la imagen primero para que el contenido no se muestre antes que el fondo, pero esto solo pretende que todo se vea mejor.

Podrías precargar la imagen. Pero requeriría que agregue algún ingenioso Javascript. Hay muchas maneras de hacer esto. También puede mirar el almacenamiento en caché de la página desde el lado del servidor o el uso de la memoria caché de la página.

Hay muchas formas de hacerlo. Además, 1 MB para una imagen es bastante grande, incluso si es de alta resolución para la web. Hay bibliotecas por ahí que podrían reducir ese tamaño de archivo y mantener la calidad.

Lo haces menos grande.

Después de hacer todas las optimizaciones que pueda, si no es considerablemente más pequeño de lo que es ahora, simplemente es demasiado grande. Sí, las bellas imágenes nítidas de ancho completo se ven geniales, pero realmente debes considerar cómo afectará la usabilidad. Reduzca la resolución hasta que note un cambio significativo. También es posible que desee servir diferentes imágenes al móvil, ya que generalmente son conexiones mucho más lentas.

Puede intentar usar el codificador JPEG de Google: google / guetzli

Use TinyJPG: comprima imágenes JPEG de forma inteligente Reducirá el tamaño del archivo tanto como sea posible sin perder calidad.

Tendría que probar herramientas de compresión de imágenes sin pérdida en línea como esta: optimice y comprima sus imágenes y fotos para que haya menos datos necesarios para descargar.

Tienes más de una operación:

• Use Photoshop para cambiar el tamaño y comprimir y luego guardar para la web.
• La mejor manera de obtener imágenes HD con un tamaño muy bajo es SVG.

Intente cambiar todas sus imágenes a SVG y puede controlar el uso de CSS.

Hay algunas maneras.

Rechazar la calidad de la imagen es una opción. Una cosa genial que he visto hacer con imágenes grandes que son de menor calidad es usar una superposición de CSS que es cualquier otro píxel vertical. Una línea negra ayuda a ocultar la mala calidad y se ve ordenada. Los consejos de desarrollo del canal de Youtube tienen cosas geniales.

Su imagen de fondo no debería ser demasiado grande; debe reducirse para adaptarse a una pantalla estándar (1366 × 768), y eso es todo.

De todos modos, creo que su respuesta se encuentra aquí: ¿Cómo cargar las imágenes de fondo más rápido?

EDITAR: Lo siento, no leí los detalles de tu pregunta. La primera parte de mi respuesta es irrelevante ahora, pero el enlace aún debería ayudar.

Caché, primera carga de baja calidad y luego alta