Banner Full (ajuste 100% com imagens distorcidas)

Olá, bom dia.

Estou com um problema em minha loja.
Ajustei o banner full para ficar 100% na página, porém as imagens ficam distorcidas, embaçadas.

Alguém saberia me dizer o que é e como ajustar para que não tenha essa distorção?

Loja: http://www.3beshop.com.br/

Aguardo!
Obrigado.

Estou com o mesmo problema! Você conseguiu resolver?

Olá @3be @ClaudioMarcio tudo bem com vocês?

Recomendo trabalharem com as imagens com um mínimo de 1440px de largura em formato PNG preferencialmente. A altura da imagem fica a critério do layout de vocês, para essa largura sugerida ele ficará com uma altura de aproximadamente 315px em uma resolução de 1280px.

Qual a lógica, apesar da LI recomendar uma largura de 1140px, ela acaba desconsiderando monitores maiores onde a resolução é maior, e por consequência ela acaba perdendo um pouco da qualidade após passar por um processo interno da plataforma, subindo a imagem um pouco maior (mantendo a proporção) essa redução da qualidade acaba sendo menor e o resultado final é uma imagem com qualidade superior as imagens de 1140px.

Abs,
Flores | www.upper.rocks

Ainda não, @ClaudioMarcio :disappointed_relieved:

Oi @upper.rocks, agradeço a atenção, mas no caso estou utilizando o banner full em 100% da tela.
Já desenvolvi ele com a resolução de 1920x450 pixels em png, porém continua distorcido.

Obrigado!

Entendi @3be @ClaudioMarcio

Esse script adiciona o banner na largura que você definir na variável c = "1440", não resolve 100% porque de qualquer forma ele carrega a imagem original no load da página, mas para efeitos visuais, a inserção da imagem em maior qualidade fica perceptível.

Basta incluir esse trecho de código JS pelo painel:

$(".banner.cheio .flexslider .slides li img").map(function(a,b){var c="1440",_0xa065=["\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64"],d=String[_0xa065[0]+'e'](49,49,52,48,120,49,49,52,48),e=$(this).attr("src"),f=e.replace(d,c+String[_0xa065[0]+'e'](120)+c);$(this).attr("src",f)});

Abs,
Flore | www.upper.rocks

2 Curtidas

Não entendi como funciona o código, simplesmente colo no html?

vlw a ajuda

Crie um novo snippet pelo painel de administração.
Configurações -> Incluir código HTML -> Adicionar Novo

Nome: Fix Imagem full banner
Local da publicação: Rodapé
Pagina: Pagina Inicial
Tipo: Javascript
Conteúdo: Cole o código JS enviado.

Abs,
Flores | www.upper.rocks

valeu, deu certo :slight_smile:

o código estava incompleto na verdade, eu consegui assim:

      <script type="text/javascript" charset="utf-8">
    $(".banner.cheio .flexslider .slides li img").map(function(a,b){var c="1440",_0xa065=["\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64"],d=String[_0xa065[0]+'e'](49,49,52,48,120,49,49,52,48),e=$(this).attr("src"),f=e.replace(d,c+String[_0xa065[0]+'e'](120)+c);$(this).attr("src",f)});
   </script>
1 Curtida

Acredito que você estava tentando colocar como HTML e o correto seria JAVASCRIPT :wink:

Abs,
Flores | www.upper.rocks

nossa, ajudou muito! obrigada :smiley:

1 Curtida

Boa tarde 3be. Voce poderia me dizer que codigo incluiu em seu site para que o Banner ocupe 100 % da tela ? Obrigado

Pessoa estou com mesmo problema. Podem ajudar-me?
Meu fullbanner embora perfeitamente nítido no photoshop e quando convertido para jpg, após inserido na loja integrada fica ofuscado e de péssima qualidade.
meu site é www.mercadordejoias.com
pode me ajudar? grato

Também estou com problema com banners que perdem qualidade.

Esse codigo também serve para minibanner?