Immagine banner categoria: caricamento lento

[NoamH (Noam Huri)]

@awesomerobot

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

Ho usato questo CSS ma le immagini impiegano 3 secondi per caricarsi (la dimensione dell’immagine è 240k)
Suggerimenti?

[Canapin (Coin-coin le Canapin)]

Ciao Noam, scusa per la risposta tardiva, sto rivedendo l’argomento principale category-banners e ci sono alcune domande senza risposta che sto spostando in argomenti dedicati

Alla fine hai risolto il problema?

[NoamH (Noam Huri)]

No, il primo caricamento richiede ancora 3 secondi.

[Lilly (Lillian Louis)]

@NoamH

Ho usato questo CSS ma le immagini impiegano 3 secondi per caricarsi (la dimensione dell’immagine è 240k)
Qualsiasi suggerimento?

hmmm

hai provato a caricare l’immagine come risorsa caricandola in un tema (o componente del tema) e usando una variabile come questa?

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

[NoamH (Noam Huri)]

Sì, questo è il codice da parte nostra:

.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)]

Non c’è nulla di intrinseco nell’aggiungere un’immagine di sfondo come questa che dovrebbe rallentarla, quindi è difficile dirlo. Ci sono altre immagini che si caricano lentamente?

L’immagine potrebbe essere ottimizzata un po’ di più per ridurne le dimensioni del file; non sembra avere trasparenza, quindi un JPG potrebbe essere più piccolo di un PNG. Puoi anche ottimizzarla ulteriormente utilizzando uno strumento come ImageOptim (Mac) o uno strumento basato sul web come TinyPNG.