[SOLUÇÃO/DEBATE] Full Banner HTML sem perder qualidade

Código CSS/HTML
5

Se quiser usar a própria imagem da Loja Integrada, pode fazer em 4K com qualidade de 50% pra ficar até 500kb. Depois chama o código abaixo pra forçar o carregamento da imagem original. Por padrão, a LI carrega imagem menores para otimizar carregamento.

  function increaseBannerImage() {
    const allImages = document.querySelectorAll(".banner.cheio .slides li img");

    let lengthImages = 0;

    allImages.forEach((element) => {
      if (element.src.indexOf("1140x1140") >= 0) {
        lengthImages = +1;
      }

      element.src = element.src.replace("1140x1140", "3840x1200");
    });

    if (lengthImages === 0) {
      return;
    } else {
      setTimeout(increaseBannerImage, 50);
    }
  }

  window.onload = increaseBannerImage();

O valor 3840x1200 pode ser de acordo com o tamanho do banner do seu tema.

No tema que uso na minha loja teste, eu refaço essa chamada em vários pontos da loja. Pode olhar os scripts no código fonte aqui: https://benove.lojaintegrada.com.br/

2 curtidas