Imagen del banner de categoría tarda en cargar

[NoamH (Noam Huri)]

@awesomerobot

.category-title-header {
  &.category-banner-example-category {
        background: url(example.jpg);
  }
}

Usé este CSS pero las imágenes tardan 3 segundos en cargarse (el tamaño de la imagen es de 240k)
¿Alguna sugerencia?

[Canapin (Coin-coin le Canapin)]

Hola Noam, disculpa la demora en responder, estoy revisando el tema principal de category-banners y hay algunas preguntas sin respuesta que estoy moviendo a temas dedicados

¿Resolviste el problema al final?

[NoamH (Noam Huri)]

No, la primera carga todavía tarda 3 segundos.

[Lilly (Lillian Louis)]

@NoamH

Usé este CSS pero las imágenes tardan 3 segundos en cargarse (el tamaño de la imagen es de 240k)
¿Alguna sugerencia?

hmmm

¿has intentado cargar la imagen como un recurso subiéndola a un tema (o componente de tema) y usando una variable como esta?

.category-title-header {
  &.category-banner-example-category {
        background: url($example);
  }
}

[NoamH (Noam Huri)]

Sí, este es el código de nuestro lado:

.category-title-header.category-banner-show-and-tell {background-size: cover !important; background: url(https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/business20/uploads/algosec/original/1X/b94301fb225b079d905143074e33c5140e151f19.png); }

[awesomerobot (Kris)]

No hay nada inherente a añadir una imagen de fondo como esta que debería hacerla lenta, así que es difícil decirlo. ¿Se están cargando lentamente otras imágenes en absoluto?

La imagen podría optimizarse un poco más para reducir el tamaño del archivo, no parece tener ninguna transparencia, por lo que un JPG podría ser más pequeño que un PNG. También puedes optimizarla aún más utilizando una herramienta como ImageOptim (Mac) o una herramienta basada en web como TinyPNG.