카테고리 배너 이미지가 느리게 로드됩니다

[NoamH (Noam Huri)]

@awesomerobot

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

이 CSS를 사용했는데 이미지가 업로드되는 데 3초가 걸립니다(이미지 크기는 240k).
어떤 제안이 있을까요?

[Canapin (Coin-coin le Canapin)]

노암, 늦게 답장해서 미안해. category-banners 메인 토픽을 검토하고 있는데, 답변이 없는 질문들이 있어서 이를 개별 토픽으로 옮기고 있어

결국 문제를 해결했어?

[NoamH (Noam Huri)]

아니요, 첫 번째 업로드도 여전히 3초가 걸립니다.

[Lilly (Lillian)]

@NoamH

이 CSS를 사용했는데 이미지가 업로드되는 데 3초가 걸립니다(이미지 크기는 240k).
어떤 조언이 있을까요?

음

테마(또는 테마 구성 요소)에 업로드하여 에셋으로 로드하고, 다음과 같은 변수를 사용해 본 적이 있나요?

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

[NoamH (Noam Huri)]

네, 여기는 우리 쪽 코드입니다:

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

이런 방식으로 배경 이미지를 추가하는 것 자체가 느려질 이유가 본질적으로 있는 것은 아니므로, 단정적으로 말하기는 어렵습니다. 다른 이미지들도 느리게 로드되고 있나요?

이미지를 조금 더 최적화하여 파일 크기를 줄일 수 있습니다. 투명도가 없는 것으로 보이므로, PNG보다 JPG 형식이 더 작을 수 있습니다. ImageOptim (Mac)과 같은 도구나 TinyPNG와 같은 웹 기반 도구를 사용하여 추가로 최적화할 수도 있습니다.