Enviar imagens

Você pode usar muitos tipos diferentes de imagens em sua loja virtual, incluindo o logotipo da empresa, imagens de produtos, apresentações de slides, banners e imagens de artigos de blog. Dependendo de como e onde você deseja usar uma imagem, talvez seja melhor enviá-la em um determinado tamanho ou formato.

Formatos de imagem

A Shopify suporta os seguintes formatos de imagem:

  • JPEG ou JPG
  • JPEG progressivo
  • PNG
  • GIF

Se você enviar uma imagem em um formato incompatível, a Shopify a converterá em JPEG ou PNG. A maioria dos formatos de imagem é convertida em JPEG e os arquivos SVG são convertidos em PNG.

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:

  • produtos
  • banners ou apresentações de slides
  • páginas e artigos de 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:

  • logotipos
  • ícones
  • bordas e molduras.

Taxas de compressão

Para manter o tempo de carregamento rápido, a Shopify compacta imagens quando elas são exibidas em sua loja virtual. Compactar uma imagem significa reduzir o tamanho do arquivo para permitir um carregamento de página mais rápido. Com a compactação, mais imagens podem ser armazenadas em uma determinada quantidade de espaço em disco ou memória. Além disso, o tempo necessário para acessar as imagens diminui bastante. A compactação pode resultar em uma alteração na qualidade da imagem, dependendo do formato, do tamanho e da qualidade original da imagem.

Os níveis de qualidade de imagem da Shopify após a compactação são os seguintes:

  • JPEG: entre 65 e 90
  • PNG: 90
  • GIF: sem alteração na qualidade

Para imagens JPEG, o nível de qualidade de uma imagem compactada depende da qualidade da imagem JPEG original, bem como do tamanho da saída:

Qualidade original Tamanho de saída Qualidade de saída
86 ou mais Altura ou largura de 1024 pixels ou mais 85
Entre 65 e 85 Altura ou largura de 1024 pixels ou mais Qualidade original
64 ou menos Altura ou largura de 1024 pixels ou mais 65
76 ou mais Altura e largura menores que 1024 pixels 75
Entre 65 e 75 Altura e largura menores que 1024 pixels Qualidade original
64 ou menos Altura e largura menores que 1024 pixels 65

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

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 visualizar a documentação da Adobe sobre perfis de cores.

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

Muitos temas da Shopify destacam imagens grandes ou apresentações de slides que se ajustam à altura do navegador (Boundless e Brooklyn) ou se adaptam ao tamanho da tela (Venture).

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:

  • O "ponto focal" da imagem, ou a parte que você quer que os clientes vejam, deve estar no centro. Assim, se o seu tema não mostrar as extremidades da imagem, a parte importante ainda estará visível.

  • Imagens que você usa para apresentações de slides ou planos de fundo não devem 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):

alt

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 notebook ou desktop):

alt

Pronto(a) para começar a vender com a Shopify?

Experimente de graça