[Dica] Aumentar a qualidade do Fullbanner

Layout
1

Fala povo, fiz uma mudança na loja de uma cliente(https://www.zuloja.com.br/) e acho que vocês podem aproveitar. Acaba sendo uma dica mais para quem tem conhecimento porque pode precisar de mais ajustes. Mas já é uma parte, né? Mande pro seu desenvolvedor.

O fullbanner já tem um tamanho relativamente pequeno(500kb) e a LI ainda carrega uma imagem menor ainda. Em monitores 2K ou 4K fica uma tragédia. Uma forma para resolver é usar o código abaixo em script do rodapé. Podem testar.

jQuery(document).ready(checkFullBannerImage);

function checkFullBannerImage() {
  $(".banner.cheio img").on("load", function () {
    currentSrc = this.currentSrc;

    if (currentSrc.indexOf("1140x1140") >= 0) {
      const newUrl = this.currentSrc.replace("1140x1140", "3840x1200");
      $(this).attr("src", newUrl);
    }
  });
}

Mas lembrem-se:

  • Façam com responsabilidade. Isso vai consumir mais banda da internet do seu cliente.
  • Essa loja usa o tema padrão da LI, não é tema comprado.
  • A imagem precisa ter boa qualidade.
  • O banner da LI por padrão não é fullwidth.

Antes:

Screen Shot 2020-11-13 at 22.30.51
Screen Shot 2020-11-13 at 22.30.513584×2278 653 KB

Depois:
Screen Shot 2020-11-13 at 22.31.53
Screen Shot 2020-11-13 at 22.31.533584×2278 721 KB

3 curtidas
2

Olá amigão… tudo bem? Essa barra de pesquisa redonda, como você colocou?
O código do banner citado, é em codigo css ou html? js?

3

Em Javascript. Mas isso não terá efeito no seu banner.

Barra com canto arredondando.

#cabecalho .atalhos-mobile {
    border-radius: 0 0 1rem 1rem;
    overflow: hidden;
    border: 0;
}
2 curtidas
4

Então não adianta né eu colocar? ou copia esse código que voce enviou?

5

No caso vi que as fotos também estão bem maiores. foi por código?

6

Não. Ele só serve pra quem usa fullbanner com largura total. Nesse caso, a imagem fica feia.

7

Sim. Tudo fez parte da customização que fiz pra ela.