Fazer upload de imagens

Use muitos tipos diferentes de imagens em sua loja virtual, como o logo da empresa, imagens de produtos e de posts do blog, apresentações de slides e banners. O serviço Imagery da Shopify gerencia esses recursos, garantindo que o melhor formato possível seja exibido no local apropriado na loja.

Fazer upload de imagens

Há dois lugares diferentes por meio dos quais você pode carregar imagens para sua loja virtual:

Envie imagens pela página Arquivos

É possível fazer o upload de imagens na página Arquivos do admin da Shopify. Dessa forma, você consegue acessar essas imagens enquanto edita um tema. Para saber mais, consulte Fazer upload de arquivos para o site.

Envie imagens pelo editor de temas

No editor de temas, você pode adicionar imagens a seu tema.

Etapas:

  1. Use o menu suspenso para selecionar o modelo a editar.
  2. Na barra lateral do editor de temas, clique na seção ou no bloco em que você quer incluir uma imagem.
  3. Clique em Selecionar imagem e siga um destes procedimentos:

    • Para carregar uma imagem do computador, clique em Fazer upload.
    • Para usar uma imagem gratuita do Burst, clique em Acessar imagens gratuitas.
  4. Clique em uma imagem para visualizar uma pré-visualização da imagem no seu tema. Após encontrar a imagem que deseja usar, clique em selecionar.

  5. Clique em Salvar.

Usar metacampos para adicionar imagens

Se houver metacampos definidos para as imagens, use o seletor de fonte dinâmica para adicioná-las. Para saber mais sobre metacampos e os formatos de imagem compatíveis, consulte Tipos de conteúdo e valores para os metacampos.

Banners de imagem

É possível criar banners de imagem com os seguintes elementos:

  • Uma ou duas imagens
  • texto
  • Um botão de ação

Nos computadores desktop, as imagens do banner são exibidas lado a lado. Como esse formato não é adequado para dispositivos móveis, é possível selecionar a opção Empilhar imagens no dispositivo móvel em Imagem do banner, nas configurações do tema. Para saber mais sobre banners de imagem e apresentações de slides, consulte as práticas recomendadas para banners de imagem e apresentação de slides.

Formatos de imagem

A Shopify suporta os seguintes formatos de imagem:

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

Quando usar imagens JPEG

As imagens JPEG são ideais para fotografias e outras imagens fixas com cores complexas. O formato JPEG tem uma paleta com milhões de cores. O JPEG também possui 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:

  • aliexpress.com
  • banners ou apresentações de slides
  • páginas e posts do blog

Quando usar imagens PNG

As imagens PNG são ideais para gráficos e ícones com cores chapadas e sem gradientes. O formato PNG também oferece suporte a transparência.

Use o formato PNG para os seguintes tipos de imagens:

  • logos
  • ícones
  • bordas e molduras

Compactar imagens e selecionar formatos de modo automático

Para manter o tempo de carregamento rápido, a Shopify compacta imagens quando elas são exibidas na loja virtual, ou seja, reduz o tamanho do arquivo para acelerar o processo.

Além disso, a Shopify escolhe automaticamente o melhor formato de arquivo possível para exibir imagens. Por exemplo, quando é detectado que o navegador da web do comprador é compatível com opções modernas, como WebP, a Shopify mostra a imagem nesses formatos.

Limites de envio

O envio de imagens para a Shopify tem restrições em termos de megapixels e tamanho de arquivo (medido em megabytes). Os megapixels são usados para indicar quantos milhões de pixels formam 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 encontrar os megapixels da imagem, é possível usar a seguinte equação: (pixel width x pixel height)/1,000,000. Por exemplo, uma imagem com uma resolução de 4900x6930 seria de 33,9 megapixels com base na equação: (4900x6930)/1,000,000 = 33.9 MP.

Perfis de cores

Quando você visualiza uma imagem na sua loja virtual, as cores da imagem podem parecer diferentes das cores da imagem original que você enviou para a Shopify. Isso pode ocorrer quando uma imagem tem um perfil de cores, que é um conjunto de dados armazenados em um arquivo com extensão .ICC ou .ICM. Os perfis de cores geralmente são incorporados em imagens para ajudar a padronizar a maneira como as cores aparecem 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 por alguns motivos:

  • Nem todos os dispositivos conseguem ler perfis de cores .ICC ou .ICM, portanto, mantê-los intactos pode resultar em falta de padronização de cores das imagens nos dispositivos.
  • Quando uma imagem enviada não inclui um perfil de cor, o sRGB (o perfil de cor mais comum usado para exibir imagens na web) é usado pelo navegador. Isso garante que suas imagens tenham a mesma aparência em todos os principais navegadores e dispositivos da web.
  • Os perfis de cores podem ocupar muito espaço em disco, o que pode resultar em longos tempos de carregamento.

Remover o perfil de cores de uma imagem

Você pode remover o perfil de cores da sua imagem salvando-a sem o perfil de cores antes de enviá-la para a Shopify. Este processo varia de acordo com o seu programa de edição de imagens.

Remover um perfil de cores usando o Adobe Illustrator ou o Adobe Photoshop

Para remover um perfil de cores usando o Adobe Illustrator ou o Adobe Photoshop:

  1. Clique em Editar > Atribuir Perfil.

  2. Selecione Não efetuar o gerenciamento de cores neste documento.

  3. Clique em OK.

Remover um perfil de cores usando o Adobe InDesign

Para remover um perfil de cores usando o Adobe InDesign:

  1. Clique em Editar > Atribuir Perfil.

  2. Para Perfil RGB e Perfil CMYK, selecione Descartar (Usar área de trabalho atual).

  3. Clique em OK.

Para obter informações mais detalhadas, você pode ver a documentação da Adobe sobre perfis de cores.

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

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

Se você usa um desses temas ou tem uma apresentação de slides grande ou uma imagem de fundo, é importante saber quais tipos de imagens ficarão melhores.

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

Recomendações

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

  • Alguns temas têm uma configuração de posição de imagem que você pode usar para especificar qual parte de uma imagem é o ponto focal. Se o seu tema não tiver essa configuração, certifique-se de que o ponto focal de cada imagem esteja no centro. Quando as suas imagens são cortadas em algumas telas, o ponto focal permanece visível, enquanto que as áreas ao redor ficam ocultas.

  • Imagens que você usa para apresentações de slides ou planos de fundo não podem conter texto. Se o texto fizer parte da própria imagem, ele pode acabar sendo movido, recortado ou ajustado com base no tema. Use o editor de temas para adicionar texto e links à suas apresentações de slides.

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

Imagens largas em telas altas

Imagens amplas podem ser cortadas à esquerda e à direita quando o dispositivo usado para exibi-las tiver uma tela alta (como um celular ou tablet):

Imagens largas em telas altas

Imagens altas em telas largas

Imagens altas podem ser cortadas em cima e embaixo quando o dispositivo usado para exibi-las tiver uma tela larga (como um laptop ou desktop):

Imagens altas em telas largas

Tudo pronto para começar a vender com a Shopify?

Experimente de graça