Imagens no WooCommerce – quase tudo o que você precisa saber

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br


As imagens de produtos de alta qualidade são um fator fundamental Para fazer seus clientes se apaixonarem e obter mais vendas em qualquer comércio eletrônico.

Se você procurar os melhores sites de comércio eletrônico ouBoas fotografias, onde a qualidade dos produtos realmente mostra, fazem a diferença.

E se não, basta ver como você compra, o que valoriza ao selecionar produtos Por que você prefere ver as imagens em detalhes antes de comprar algo, e isso dá pouca confiança quando elas oferecem apenas uma imagem em baixa resolução e qualidade?

Obviamente, isso deve ser acompanhado por uma boa otimização do comércio eletrônico, para que oferecer imagens de qualidade não significa comprometer a velocidade de carregamento, um valor também essencial para a compra.

Não preciso repetir muito sobre isso, já vimos o que um site está mais sobrecarregado, com dados, e já publiquei artigos sobre como otimizar seu WooCommerce, por isso não insistirei muito mais neste guia.

Então vamos com isso, a rota é simples.

Configure bem os tamanhos de imagem

Desde o Woocommerce versão 3.3 Os tamanhos das imagens são definidos no personalizador do WordPress.

Especificamente em

Apariencia > Personalizar > WooCommerce > Imágenes de producto

Imagens no WooCommerce - quase tudo o que você precisa saber 1

Você pode controlar vários parâmetros das imagens nessas configurações, que dependerão do tema ativo.

Por exemplo, em Vinte e dezenove e muitos outros temas que você pode configurar:

  • Largura da imagem principal.
  • Largura da miniatura
  • Recorte em miniatura.

Imagens no WooCommerce - quase tudo o que você precisa saber 2

No entanto, com Loja, as configurações disponíveis são:

  • Recorte em miniatura.

De qualquer forma, usaremos o exemplo de Vinte e dezenove, que é a mais difundida e oferece as larguras de imagem principal e em miniatura.

Se você alterar a largura da imagem ou a miniatura do original para outra, O WooCommerce redimensiona automaticamente as imagens em segundo plano, você não precisa de um plugin para regenerar miniaturas, já tem essa funcionalidade incluída.

Imagens no WooCommerce - quase tudo o que você precisa saber 3

De qualquer forma, você está ficando um pouco o mesmo, então vamos mais devagar, em partes.

Para começar, não importa o tamanho padrão que inicialmente aparece nas configurações, Para ver o que acontece, colocaremos a largura da imagem principal em 800 pixels.

E agora a explicação do que acontece …

Largura da imagem principal

Essa configuração controla A largura da imagem principal do produto na página simples do produto.

Logo depois de ser um observador, você terá notado que não há ajuste para alterar a altura da imagem Certo?

Isso ocorre porque o WooCommerce exibirá a imagem proporcionalmente, de acordo com a forma como foi carregada ou especificará a largura. Não há ajuste de altura porque não é necessário, ele se ajustará automaticamente à largura, de modo que seja proporcional.

Se quiser saber o tamanho da imagem atual, use o inspetor do navegador: Clique com o botão direito do mouse na imagem e selecione «Inspecionar».

Imagens no WooCommerce - quase tudo o que você precisa saber 4

Isso abrirá o console de desenvolvimento do Chrome, onde você verá que a imagem tem uma largura de 800 pixels, que é exatamente o que configuramos no personalizador.

Imagens no WooCommerce - quase tudo o que você precisa saber 5

Porém, se você observar o foco da imagem no lado esquerdo do inspetor, verá que o elemento que a contém tem apenas 347,59 pixels de largura. Este é a largura que temos no contêiner atual, dependendo do tamanho da janela ou dispositivo, o tema ativo.

Leia Também  Continue

Em outras palavras, isso mesmo se você especificar o corte de largura da imagem, o tema terá no máximo espaço para um tamanho menor.

E você sabe o que? graças a isso, é porque há funcionalidade de zoom no WooCommerce, porque ao passar o cursor pela imagem – de 800 pixels -, em um contêiner com menos de 400 pixels, o WooCommerce permite ver mais detalhes da imagem, algo que todos os clientes gostam.

Devemos usar o tamanho máximo do contêiner?

Você pode pensar, corretamente, que, por otimização, para carregar imagens menores, seria melhor alterar a configuração do WooCommerce e reduzir a largura da imagem principal ao máximo do contêiner do seu tema.

Imagens no WooCommerce - quase tudo o que você precisa saber 6

Mas você perderia o efeito de zoom, tendo aparado a imagem no tamanho exato do contêiner.

Também o valor da largura máxima do contêiner depende de cada tema e o dispositivo onde a página está sendo visualizada, mas, se desejar, verifique a documentação do tema, a folha de estilos ou peça ao desenvolvedor e altere a configuração de largura da imagem principal para a do contêiner do tema.

Você não deseja ampliar as imagens do seu WooCommerce? Aqui eu explico como desativá-lo, o que também é outra possibilidade.

Lembre-se, após cada alteração, a exibição não será imediata, o WooCommerce levará um tempo para regenerar as imagens, tudo.

Largura da miniatura

Nesta outra configuração configuramos a largura das imagens em miniatura da loja e dos arquivos de categoria do produto.

Além disso, também se aplica a imagens em produtos relacionados, vendas cruzadas e segmentadas.

Se, além disso, você usar códigos de acesso do WooCommerce para exibir produtos em outros lugares, ele também será aplicado lá.

Recorte em miniatura

As configurações que podemos selecionar aqui são:

  • 1: 1 – Torna as imagens em miniatura aparadas como quadrados. Corte as imagens verticais para cima e para baixo, ou a partir do centro, se entender melhor dessa maneira, o que as fará parecer muito ruins.
  • Custom – Aqui você pode configurar uma proporção do tipo 4: 3 (largura e altura), 16: 9 ou a que você mais gosta. Nesse caso, as imagens seriam mais largas que altas, ou se você preferir o contrário, por exemplo 3: 4 ou similar, que as tornaria mais altas que largas. Novamente, os cortes são feitos a partir do centro.
  • Não cultivado – Quase sempre, o mais aconselhável, pois mantém a proporção original das imagens, assim como você as carregou.

Na minha opinião, você não deve usar outra configuração além da sem aparar, já que você não tem controle total de como os cortes são feitos no WooCommerce.

Enfim, ao mesmo tempo, você deve ser consistente com os tamanhos de imagem enviados, Bem, se você enviar imagens na vertical e na horizontal, sua loja ficará horrível; no final, veremos como fazê-lo.

Faltam ajustes de imagem no personalizador

Se você perder os ajustes de imagem no personalizador, como vimos acima no exemplo de Lojaentão Seu tema para WooCommerce é configurar imagens usando código.

Assim, ao configurar os tamanhos das imagens a partir do código, a compatibilidade com o personalizador é removida. Eles fazem muitos temas … e plugins.

Se isso acontecer com você, entre em contato com o suporte do desenvolvedor do tema para descobrir quais ajustes são feitos nas imagens do código.

Como alterar os tamanhos da galeria de produtos

Neste ponto, você provavelmente já percebeu que ainda existem outras imagens nas quais não há ajuste onde definir seu tamanho, as imagens adicionais do produto, as da galeria.

Leia Também  Como alterar o texto "Adicionar ao carrinho" no WooCommerce (atualizado)

Imagens no WooCommerce - quase tudo o que você precisa saber 7
Imagens no WooCommerce - quase tudo o que você precisa saber 8

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br

Se você definiu as miniaturas como “Não aparadas”, as imagens serão exibidas proporcionalmente à forma como você as carregou originalmente.

E se você quiser ter mais controle sobre o tamanho das imagens em miniatura você pode ajustá-los através de um filtro. Você apenas precisa adicionar um código como o seguinte ao arquivo functions.php do seu tema ativo:

/* Cambiar tamaño miniaturas WooCommerce */
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', 'ayudawp_dimensiones_miniaturas_woo', 99 );
function ayudawp_dimensiones_miniaturas_woo( $size ) 
    return array(
        'width'  => 100,
        'height' => 120,
        'crop'   => 1,
    );

No código anterior, você deve alterar os parâmetros largura (largura), altura (alto) e colheita (aparar) ao qual você deseja aplicar.

Quando você personalizar e salvar o código, precisará instalar, ativar e executar o plug-in Regenerar miniaturas para redimensionar todas as miniaturas das galerias do WooCommerce. Como você chegou por conta própria aqui, o WooCommerce não fará isso automaticamente. Ao concluir o processo de regeneração das miniaturas, você pode desativar e excluir o plug-in sem problemas, nem sempre ele deve ser instalado.

Quais tamanhos de imagem devo carregar para os produtos

Se continuarmos com o exemplo que vimos acima Devo enviar apenas imagens com 800 pixels de largura?

Pessoalmente, eu normalmente carrego imagens um pouco maiores normalmente, pois isso me permite mais flexibilidade Se eu quero mudar as coisas no futuro.

Com tamanhos de tela cada vez mais amplos, pode ser necessário incluir um ponto de interrupção adicional para telas maiores em algum momento. Isso aumentaria a largura da grade, o que também requer imagens maiores do produto.

Eu já vi alguns catálogos enormes do WooCommerce, com milhares de produtos, e todas as imagens foram carregadas muito pequenas. Quero dizer, tamanhos de 250 pixels de largura ou menos, o que simplesmente não parece bom.

Portanto, não cometa esse erro e, se você quiser seguir meu conselho, Carregue imagens de produtos com pelo menos 1200 pixels de largura.

Você sempre pode reduzir o tamanho das imagens mostradas no futuro, mas não pode aumentar o tamanho delas.

Além disso, se você fizer upload de imagens maiores, ele permite a flexibilidade de usar o recurso de zoom de imagem do WooCommerce, se desejar.

Prepare imagens do produto antes de fazer o upload

Como eu te disse antes, é importante que você seja consistente em tamanhos de imagem você envia:

  • Ou tudo em relação ao aspecto horizontal ou tudo na vertical, mas não a cada um dos aspectos.
  • Tudo com o mesmo tamanho de tela.

Ambos os pontos são igualmente importantes.. Uma loja com uma proporção diferente e tamanho da tela das imagens parecerá descolorida, pouco profissional e não o convidará para comprar.

Depois, direi como faço nas lojas que pago por mim e a recomendação que faço aos meus clientes e alunos; depois, você usa o programa e o aspecto que preferir, é claro.

Só mostro meu processo para que você entenda o que quero dizer e, acima de tudo, sua importância.

Definir e criar um tamanho de tela consistente

Abra seu programa de edição favorito e crie uma tela (tela se estiver em inglês), que será a base para onde irão todas as imagens da loja.

Quando você abre o aplicativo, ou mais tarde, defina um tamanho de tela que será o que você usará para todas as imagens de produtos na loja.

Imagens no WooCommerce - quase tudo o que você precisa saber 9
Imagens no WooCommerce - quase tudo o que você precisa saber 10

Você pode até salvar o tamanho se o seu aplicativo permitir.

Independentemente do tamanho de cada foto que você adicionar posteriormente aos produtos, todas elas devem ser adicionadas a essa tela, para que toda a sua loja mostre uma aparência consistente em seu catálogo.

Leia Também  Por que eu devolvi meu anel de noivado (mas aceitei a proposta)

Adicionar uma cor de plano de fundo à tela

É uma questão de gosto, mas acho que é sempre melhor definir um plano de fundo para todas as suas imagens, degradadas ou não, cinza, branco, preto ou a cor desejada. Aumentará a consistência da sua marca na loja.

Neste exemplo, adicionei um preenchimento em uma cor cinza neutra.

Imagens no WooCommerce - quase tudo o que você precisa saber 11

Adicione a imagem do produto à sua tela

Agora abra a imagem do produto, copie e cole na sua tela.

Se necessário, ajuste o tamanho para caber no tamanho da tela e quaisquer ajustes de imagem subsequentes que você considerar.

Imagens no WooCommerce - quase tudo o que você precisa saber 12

Exportar a imagem

Depois de fazer os ajustes de design necessários para o comércio eletrônico, exporte a imagem.

Para isso, minha recomendação é a seguinte:

  • Sempre exportar como JPG (WebP, se o seu site tiver este formato registrado), pois é o formato mais compatível com todos os navegadores e com uma relação qualidade / peso muito boa.
  • Verifique se o peso máximo é de 100 Kb. Somente em casos muito especiais você precisará de mais peso, eu sempre aconselho você a tentar isso primeiro.
  • Use nomes de arquivos semânticos, isso significa alguma coisa e descreve a imagem, por exemplo:
    montainbike-amarilla-vector-1.jpg

    . Isso ajudará a gerar automaticamente bons títulos e também a fazer com que os mecanismos de pesquisa os indexem mais facilmente.

Não importa qual programa você use, sempre haverá uma opção para exportar, exportar para a Web ou como ele é chamado. O importante é que você mantenha uma qualidade suficiente com um peso controlado da imagem, para não danificar o tempo de carregamento.

Imagens no WooCommerce - quase tudo o que você precisa saber 13

Otimização de imagem

Se você usar uma estratégia de upload de imagens como a que acabei de descrever, já poderá enviar suas imagens, mas se por algum motivo isso não for possível, primeiro redimensione e otimize as imagens do produto o máximo possível.

Imagens no WooCommerce - quase tudo o que você precisa saber 14

Minha recomendação para essas tarefas é o site iloveimg, uma verdadeira jóia, totalmente em espanhol, com ferramentas online gratuitas para …

  • Converter em JPG
  • Redimensionar imagens
  • Cortar imagens
  • Compactar (otimizar) imagens
  • Adicionar marcas d’água
  • … etc

Você vai adorar, com certeza, e tem tudo de graça, até uma ferramenta para criar memes. De nada 🙂

Nos exemplos da seção anterior, usei Pixelmator, mas se você possui o Photoshop, também pode fazê-lo, ou eu já fiz isso com aplicativos de apresentação, como Keynote e Powerpoint, e depois exportando como uma imagem. Precisa fazer milagres.

De qualquer forma, não se esqueça da importância da tela, da consistência. O importante é o objetivo, não a ferramenta usada para alcançá-lo.

A trindade da otimização de imagens

Mas, voltando ao assunto da otimização de imagem, o que nunca prejudicará é a trindade da otimização de imagens:

  1. Cache
  2. CDN
  3. Cobrança diferida

Independentemente da estratégia que você seguiu antes de enviar as imagens, sempre aplique a tríade para ter uma loja online rápida e otimizada.

Dúvidas, reclamações, sugestões?

Embora este guia tenha a intenção de ser o mais completo possível e servi-lo como um manual para saber tudo o que você precisa sobre o uso, gerenciamento e otimização de imagens no WooCommerce, eu não gosto de ser excessivamente pretensioso, é por isso que o “quase”, porque não O artigo está completo sem a sua opinião.

Sinta-se à vontade para comentar sua opinião, levantar dúvidas, reclamar se não concordar com algo ou até contribuir com mais idéias. Abaixo você tem os comentários

A entrada Imagens no WooCommerce – Quase tudo o que você precisa saber foi publicado pela primeira vez por Fernando Tellado na Ajuda do WordPress. Não copie conteúdo, ele não diz nada de bom a você para seus leitores.

Blogs interessantes:

https://proverasfestas.com.br/modelo-ruim-como-nao-sabotar-seu-alcance/
https://responsibleradio.com/sera-que-as-empresas-de-tecnologia-ja-adotaram-a-etica-com-seriedade/

https://weeventos.com.br/escape-de-javascript-em-c-um-c-equivalente-para-o-escape-funktion/

https://draincleaningdenverco.com/sobre-por-mundo-virtual/

https://clipstudio.com.br/7-maneiras-de-melhorar-a-forma-como-voce-a-tomar-decisoes-na-vida/

https://teleingressos.com.br/aqui-esta-uma-maneira-indolor-de-receber-dinheiro-de-volta-para-as-mudancas-de-precos-em-suas-compras/

https://testmygeekstuff.com/o-novo-google-search-console-beta-insights-e-novos-recursos/

https://coniferinc.com/quais-sao-os-melhores-produtos-para-o-mercado-on-line/

https://multieletropecas.com.br/como-participar-de-um-evento-esportivo-como-um-adulto-equilibrado/

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br