Upload de imagens

É possível usar diferentes tipos de imagens, como o logo da empresa, imagens de produtos, apresentações de slides, banners e imagens de posts de blog. Também é possível transformar as imagens com ações de corte e redimensionamento e personalizar as configurações de mídia no tema para alterar a borda ou a sombra em todas as mídias exibidas na loja.

Para exibir as imagens na loja virtual exatamente como você quer, é preciso usar a proporção da imagem correta. As imagens são otimizadas automaticamente para a vitrine virtual com a Shopify Content Delivery Network (CDN).

Fazer upload de uma imagem no editor de temas

É possível adicionar imagens ao tema no editor de temas. Também é possível fazer upload de imagens na seção Conteúdo > Arquivos do admin da Shopify. Para saber mais, consulte Fazer upload e gerenciar arquivos.

Etapas:

Adicionar imagens com metacampos

Se você tiver metacampos configurados para as imagens, poderá usar o seletor de fonte dinâmica para adicionar uma imagem à loja virtual. Para saber mais sobre metacampos e formatos de imagem compatíveis, consulte Adicionar valores a metacampos.

Definir um ponto focal em uma imagem

É possível usar pontos focais para definir a parte mais importante de uma imagem na sua loja virtual. Ao definir um ponto focal, você o torna a área de foco. Os pontos focais sempre aparecem no enquadramento, mesmo que o tema corte a imagem para se ajustar ao layout. Os pontos focais dão mais controle sobre a forma como a imagem é exibida em diferentes tamanhos de tela e nos casos em que os temas usam proporções diferentes.

É possível ter apenas um ponto focal por imagem, mas você pode alterá-lo ou removê-lo a qualquer momento.

Compatibilidade do ponto focal com temas gratuitos da Shopify

É possível definir um ponto focal nas seguintes versões dos temas gratuitos da Shopify:

• Todos os temas da família Horizon
• Versão 3.0.0 e posteriores do Colorblock
• Versão 5.0.0 e posteriores do Craft
• Versão 5.0.0 e posteriores do Crave
• Versão 7.0.0 e posteriores do Dawn
• Versão 1.0.0 e posteriores do Origin
• Versão 1.0.0 e posteriores do Publisher
• Versão 2.0.0 e posteriores do Refresh
• Versão 3.0.0 e posteriores do Ride
• Versão 1.0.0 e posteriores do Rise
• Versão 5.0.0 e posteriores do Sense
• Versão 0.0.1 e posteriores do Spotlight
• Versão 4.0.0 e posteriores do Studio
• Versão 4.0.0 e posteriores do Taste
• Versão 1.0.0 e posteriores do Trade

Se você usa um tema de terceiros, consulte a documentação do tema para saber se ele é compatível com o uso de pontos focais.

Adicionar um ponto focal a uma imagem

Se você adicionar um ponto focal a uma imagem e usá-la em vários locais da loja virtual, o mesmo ponto focal será aplicado em todos os lugares.

Dependendo de como o tema corta e redimensiona as imagens, o ponto focal pode nem sempre ficar visualmente centralizado.

Etapas:

1. Clique em uma imagem em um dos seguintes locais no admin da Shopify:
   • Na seção “Conteúdo” > “Arquivos”.
   • No editor de temas.
   • Na seção “Mídia” das listagens de produtos, na seção “Produtos”.
   • No editor de e-mail do Shopify Messaging.
   • Na seção “Metacampos” de qualquer recurso que tenha um metacampo do tipo “Referência de arquivo” para adicionar uma imagem.
2. Para selecionar a parte da imagem em que você quer definir um ponto focal, clique na imagem ou arraste o ponto azul.
3. Clique em “Salvar”.

Remover um ponto focal de uma imagem

Etapas:

1. Clique em uma imagem em um dos seguintes locais no admin da Shopify:
   • Na seção “Conteúdo” > “Arquivos”.
   • No editor de temas.
   • Na seção “Mídia” das listagens de produtos, na seção “Produtos”.
   • No editor de e-mail do Shopify Messaging.
   • Na seção “Metacampos” de qualquer recurso que tenha um metacampo do tipo “Referência de arquivo” para adicionar uma imagem.
2. Clique em “Remover”.
3. Clique em “Salvar como novo”.

Formatos de imagem

Os seguintes formatos de imagem são compatíveis:

• JPEG
• JPEG progressivo
• PNG
• GIF
• HEIC
• WebP

Usar imagens JPEG

As imagens JPEG são ideais para fotografias e outras imagens estáticas com cores complexas. O formato JPEG tem uma paleta com milhões de cores e também conta com compactação com perdas, o que pode ajudar a manter os tempos de carregamento da página rápidos sem uma perda perceptível na qualidade da imagem. Use o formato JPEG para os seguintes tipos de imagens:

• produtos
• banners ou apresentações de slides
• páginas e posts de blog

Uso de imagens PNG

As imagens PNG são ideais para elementos gráficos e ícones com cores sólidas e sem gradientes. O formato PNG também é compatível com transparência. Use o formato PNG para os seguintes tipos de imagem:

• logos
• ícones
• bordas e acabamentos

Compactação e seleção automática do formato da imagem

As imagens não são compactadas quando você faz o upload no admin da Shopify, o que ajuda a manter a qualidade original delas. No entanto, o seguinte pode ocorrer para que o tempo de carregamento da página seja rápido para os clientes:

• Quando as imagens são exibidas no tema da loja, elas podem passar por uma compactação própria para imagens de alta qualidade.
• A Shopify determina automaticamente o melhor formato de arquivo possível a ser usado ao exibir as imagens.
• Quando o navegador de um cliente é compatível com formatos de imagem modernos, como WebP e AVIF (formato de arquivo de imagem AV1), as imagens são exibidas nesses formatos.
• Os GIFs são convertidos automaticamente para o formato WebP animado para melhorar o desempenho, reduzindo o tamanho do arquivo.

Considere as seguintes ações para obter a melhor qualidade de imagem:

• Faça upload de imagens de resolução mais alta, de até 5.000 px x 5.000 px ou 25 megapixels.
• Escolha tipos de imagem com menos perdas, como PNG, para desenhos de linha, texto e elementos gráficos icônicos com transparência.
• Use JPEG para imagens de produtos ou apresentações de slides.
• Arquivos SVG são aceitos, mas têm limitações: não podem ser transformados (redimensionados, cortados etc.) sem que seja solicitado um formato rasterizado (JPEG, WebP, PNG).

Outros tipos de arquivo, como PSD (documento do Photoshop), TIFF (formato de arquivo de imagem com tag) e BMP (bitmap) são aceitos, mas serão convertidos para JPEG/PNG no upload.

Limites de upload de imagens

O upload de imagens para a Shopify tem restrições tanto em megapixels (MP) quanto em tamanho de arquivo, medido em megabytes (MB). Megapixels são usados para indicar quantos milhões de pixels compõem uma imagem. Megabytes são usados para indicar quantos milhões de bytes de memória ou espaço em disco uma imagem ocupa.

As imagens enviadas para a Shopify não podem exceder nenhum dos seguintes limites:

• 20 megapixels
• 20 megabytes

Para descobrir o valor de megapixels da imagem, use a seguinte equação:

(largura em pixels x altura em pixels)/1.000.000

Por exemplo, uma imagem com resolução de 4.900 px por 6.930 px tem 33,9 megapixels, com base na equação: (4.900 x 6.930)/1.000.000 = 33,9 MP.

Perfis de cores da imagem

Quando você visualiza uma imagem na sua loja virtual, as cores podem ser exibidas de forma diferente das da imagem original que você enviou para a Shopify. Isso pode acontecer quando uma imagem tem um perfil de cores, que é um conjunto de dados armazenados em um arquivo com a extensão .ICC ou .ICM.

Muitas vezes, os perfis de cores são incorporados às imagens para ajudar a padronizar a forma como as cores são exibidas em diferentes dispositivos. Quando as imagens são exibidas na sua loja virtual, seus perfis de cores são removidos.

Os perfis de cores são removidos pelos seguintes motivos:

• Nem todos os dispositivos conseguem ler perfis de cores .ICC ou .ICM, portanto, mantê-los intactos pode resultar em inconsistências nas cores das imagens entre os dispositivos.
• Quando uma imagem enviada não inclui um perfil de cores, o navegador da web assume o perfil sRGB (o mais comum usado para exibir imagens na web). Isso garante que as imagens sejam exibidas da mesma forma em todos os principais navegadores e dispositivos.
• Os perfis de cores podem ocupar muito espaço em disco, o que pode resultar em tempos de carregamento de página mais longos.

Remover o perfil de cores de uma imagem

É possível remover o perfil de cores da imagem salvando-a sem ele antes de fazer o upload para a Shopify. Esse processo varia de acordo com o programa de edição de imagem.

Consulte a documentação da Adobe sobre como Atribuir ou remover um perfil de cores (Illustrator, Photoshop) e Atribuir ou remover um perfil de cores (InDesign).

Práticas recomendadas para apresentações de slides, banners de imagem e imagens de largura total

Muitos temas da Shopify apresentam imagens ou apresentações de slides grandes que se ajustam à altura do navegador ou se adaptam ao tamanho da tela.

Se você usa um desses temas ou tem uma apresentação de slides grande ou uma imagem de fundo, precisa entender quais tipos de imagens são exibidos melhor.

Como as imagens grandes não cabem em todos os dispositivos, a Shopify às vezes exibe apenas parte da imagem, dependendo do dispositivo que você está usando. Se a sua apresentação de slides contiver muitas imagens grandes, talvez você descubra que partes das imagens não estão visíveis.

Considerações sobre o uso de imagens para apresentações de slides ou banners de imagem

Para garantir que as imagens funcionem bem com seu tema, lembre-se do seguinte:

• As imagens usadas em apresentações de slides ou planos de fundo não devem conter texto. Se o texto fizer parte da própria imagem, ele poderá ser movido, cortado ou ajustado com base no seu tema. Use o editor de temas para adicionar texto e links às suas apresentações de slides e planos de fundo.

• Para imagens usadas em apresentações de slides ou como planos de fundo, escolha imagens simples para que qualquer texto sobreposto seja fácil de ler.

Imagens largas em telas altas

Imagens largas podem ser cortadas à esquerda e à direita quando o dispositivo usado para visualizá-las tem uma tela alta, como um celular ou um tablet no modo retrato. No exemplo abaixo, se as pessoas são a parte mais importante da imagem, coloque um ponto focal no lado direito da imagem.

Imagens altas em telas largas

Imagens altas podem ser cortadas na parte superior e inferior quando o dispositivo usado para visualizá-las tem uma tela larga, como um laptop ou monitor de desktop. No exemplo abaixo, se os sapatos são a parte mais importante da imagem, coloque um ponto focal na parte inferior da imagem.

Comportamento de carregamento da imagem

Ao visitar uma página da sua loja virtual, você pode notar que as imagens parecem um pouco embaçadas no início e ficam nítidas em seguida. Esse é um comportamento esperado, que ajuda a melhorar a velocidade de carregamento da loja e a experiência do usuário.

Os temas da Shopify usam uma técnica chamada lazy loading, que carrega primeiro uma versão menor da imagem, enquanto a de resolução total é carregada em segundo plano. Isso permite que os clientes visualizem o conteúdo imediatamente, em vez de esperar que imagens grandes carreguem por completo. O processo geralmente leva menos de um segundo, mas cria a percepção de que a loja carrega mais rápido.

Essa técnica é particularmente benéfica para lojas com muitas imagens, pois melhora significativamente o tempo de carregamento inicial da página e fornece um feedback visual imediato aos clientes.

Solução de problemas com imagens