Category banner image slow to load

[NoamH (Noam Huri)]

@awesomerobot

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

I used this CSS but the images take 3 seconds to upload (the image size is 240k)
Any suggestions?

[Canapin (Coin-coin le Canapin)]

Ho Noam, sorry for the late reply, I’m reviewing the main category-banners topic and there are some unanswered questions I’m moving to dedicated topics

Did you figure out the issue in the end?

[NoamH (Noam Huri)]

Nop, the first upload still taken 3 sec

[Lilly]

@NoamH

I used this CSS but the images take 3 seconds to upload (the image size is 240k)
Any suggestions?

hmmm

have you tried loading the image as an asset by uploading to a theme (or theme component) and using a variable like so?

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

[NoamH (Noam Huri)]

Yep, this is the code from our side:

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

There’s nothing inherent to adding a background image like this that should make it slow, so it’s hard to say. Are other images loading slowly at all?

The image could be optimized a little more to reduce the file size, it doesn’t seem to have any transparency, so a JPG could be smaller than a PNG. You can also further optimize it using a tool like ImageOptim (Mac) or a web-based tool like TinyPNG.