A maioria dos incidentes com imagens desfocadas são causados pelo estilo do tema, o que significa que o design do tema tem dimensões de imagem em pixels que podem não funcionar bem com o WooCommerce.

Atualizar a partir do WooCommerce 3.3 Voltar ao início

WooCommerce versão 3.3 e superior vem com suporte para tornar os temas compatíveis com o WooCommerce e melhorias na renderização e corte do tamanho da imagem. Estas novas funcionalidades significam que:

• Não devem mais ocorrer imagens desfocadas causadas por incompatibilidade de temas ou código de anulação.
• Os proprietários das lojas podem controlar a largura e altura das suas imagens principais.
• O redimensionamento das miniaturas pode ser feito automaticamente ou manualmente.
• Imagens mostradas aos clientes ficam sempre óptimas por defeito, por isso os seus produtos continuam a vender-se! Gerir Produtos e Adicionar Imagens de Produtos e Galerias.
  

  Outras soluções Voltar ao início

  Se estiver a utilizar uma versão do WooCommerce antes da 3.3, recomendamos a actualização para a versão mais recente para tirar partido das funcionalidades descritas acima.

  Se, por algum motivo, você não quiser usar a versão mais recente ou atualizar para 3.3 não corrigir o problema que você está enfrentando, pode ser:

  • Suas configurações de tamanho de imagem são muito pequenas.
  • As suas imagens originais precisam ser de uma resolução superior.

  Para resolver isto:

  • As suas dimensões de imagem devem ser iguais ou superiores às do seu tema.
  • As suas imagens originais devem ser pelo menos 800 x 800px ou superiores para trabalhar para a maioria dos temas.

  Mostramos-lhe como encontrar o tamanho máximo de imagem que o seu tema pretende no vídeo e abaixo.

  Tipos de imagem Voltar ao início

  • Imagem de um único produto: Maior imagem na página de detalhes do produto individual e refere-se à imagem principal/característica.
  • Imagens do catálogo: Imagem de tamanho médio usada em loops de produtos, tais como a página Loja, páginas de Categoria de Produtos, Produtos Relacionados, Up-sells e Cross-sells.
  • Imagens de Miniaturas de Produtos: Imagem mais pequena comumente usada no Carrinho, Widgets e (opcional) imagens da Galeria por baixo da Imagem de Produto Único.

  Dimensões da imagem padrão Voltar ao início

  Na versão 3.2x e abaixo do WooCommerce, as configurações da Imagem do Produto podem ser encontradas em WooCommerce > Configurações > Produtos > Display > Imagens do Produto. Note que o primeiro número é largura e o segundo altura.

  

  As imagens que você carrega são redimensionadas para corresponder aos valores que você insere. Por exemplo, se as suas configurações forem 100×100 e você carregar uma imagem 300×600 ela é redimensionada para 100×200. Você também pode escolher ‘hard crop’ suas imagens, o que as força a ter o tamanho especificado nas configurações, independentemente da imagem bruta que você carregar, para que elas sejam cortadas em vez de distorcidas em escala.

  Se você alterar as configurações após carregar as imagens do produto, você precisará regenerar as miniaturas dentro do WordPress para que as alterações sejam aplicadas. Para fazer isso, recomendamos usar o plugin Regenerate Thumbnails.

  As do WooCommerce versão 3.3, Product Image settings can be found under the Customizer, in WooCommerce > Product Images:

  

  Find theme’s product image dimensions Voltar ao início

  The theme you chosen delegates the max size an image will be, so you need to know the dimensions in which it makes them to set those in WooCommerce.

  Fotos Catálogos Voltar ao topo

  Determine onde o seu tema torna as miniaturas do catálogo as maiores. Em alguns casos, esta é a página da loja; no tema Vinte e Onze, está no loop de produtos relacionados.

  Com as ferramentas de desenvolvimento habilitadas em seu navegador de escolha, você pode clicar com o botão direito na imagem e selecionar “Inspect” ou “Inspect Element”. Isto irá dizer-lhe as dimensões da imagem. Tome nota disto pois precisamos de as utilizar mais tarde.

  

  >Na Storefront (acima), as imagens do maior catálogo são renderizadas a 213 x 213px.

  Single Product Image Voltar ao início

  Repetir o processo para a imagem de um único produto – a maior imagem de uma página de produto.

  

  Em Storefront, a maior Imagem de Produto Único é renderizada a 298 x 298px.

  Miniatura de Produto Voltar ao início

  A menor é provavelmente a miniatura na galeria de produtos. Repita o processo de inspecção para obter as dimensões.

  

  Na Storefront, a imagem é renderizada a 43 x 43px.

  Ajustar as dimensões da imagem e regenerar as miniaturas Voltar ao início

  Agora que todos os tamanhos de miniaturas para o nosso tema específico sejam conhecidos, podemos adicionar estas novas dimensões ao WooCommerce para assegurar que os futuros tamanhos de imagem serão deste tamanho ou maiores.

  No WooCommerce > Configurações > Produtos > Exibir, certifique-se de que os tamanhos máximos de imagem são pelo menos tão grandes quanto as dimensões que o seu tema está renderizando para essas miniaturas. Então Salve as alterações.

  As imagens de produtos novos que são carregadas agora terão miniaturas nestas configurações, e devem aparecer sem distorção ou borrão.

  Nota: Salvar alterações não atualiza automaticamente todas as imagens de produtos carregadas anteriormente. Para actualizar imagens antigas, o WordPress precisa de regenerar as miniaturas. Um ótimo plugin que faz exatamente isso é o Regenerate Thumbnails.

  Retina support Back to top

  HiDPI displays comumente conhecidos como retina displays contêm o dobro de pixels, ou mais, do que displays mais antigos. Para imagens perfeitas de pixel nos ecrãs de retina, defina as suas miniaturas para terem o dobro do tamanho renderizado pelo tema. Por exemplo, se um tema renderiza imagens a 80 x 80px você quer que elas sejam de 160 x 160px.