Fazer upload de imagens

Use diferentes tipos de imagens, como o logo da empresa, imagens de produtos, apresentações de slides, banners e imagens de posts do blog. As imagens podem ser transformadas com ações de recortar e redimensionar. Também é possível personalizar as configurações de mídia no tema para alterar a borda ou a sombra de todas as mídias exibidas na loja.

Para exibir imagens na loja virtual exatamente da maneira que você quer, use a proporção correta da imagem.

Observação

Sempre faça upload das imagens de melhor qualidade que você puder fornecer. Sendo assim, elas não devem ser compactadas manualmente.

Enviar uma imagem pelo editor de temas

O editor de temas permite que você adicione imagens ao tema. Também é possível fazer upload de imagens pela página Arquivos do admin da Shopify. Para saber mais, consulte Fazer upload de arquivos para o site.

Etapas:

1. No admin da Shopify, acesse Loja virtual > Temas.
2. Ao lado do tema que você quer personalizar, clique em Personalizar.
3. Use o menu suspenso para selecionar o modelo que você quer editar.
4. Na barra lateral do editor de temas, clique na seção ou no bloco em que você quer incluir uma imagem.

5. 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.

6. 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.

7. Clique em Salvar.

Usar metacampos para adicionar imagens

Se houver metacampos definidos para as imagens, use o seletor de origem 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.

Definir um ponto focal na imagem do tema

Use pontos focais para definir uma área de foco, ou seja, a parte mais importante, em uma imagem no tema da loja virtual. Vale destacar que esses pontos sempre aparecem no quadro, mesmo se você tiver um tema que recorte a imagem para caber no layout. Além disso, os pontos focais dão a você mais controle sobre a maneira como a imagem é exibida em temas que usam diferentes taxas de proporção e em tamanhos varáveis de tela.

Cada imagem só pode ter um ponto focal, mas você tem a opção de alterá-lo ou removê-lo a qualquer momento.

A configuração de ponto focal está disponível nas seguintes versões dos temas gratuitos da Shopify:

• Craft na versão 5.0.0 ou mais recente
• Crave na versão 5.0.0 ou mais recente
• Colorblock versão 3.0.0 ou mais recente
• Dawn versão 7.0.0 ou mais recente
• Refresh versão 2.0.0 ou mais recente
• Ride versão 3.0.0 ou mais recente
• Sense versão 5.0.0 ou mais recente
• Studio versão 4.0.0 ou mais recente
• Taste versão 4.0.0 ou mais recente

Se você estiver usando um tema de terceiros, consulte a documentação para verificar se ele é compatível com pontos focais.

Adicionar um ponto focal a uma imagem

O ponto focal pode ser adicionado a uma imagem na seção Arquivos e no editor de temas. Se você aplicar em vários locais uma imagem que tem um ponto focal, esse mesmo ponto será usado em todos eles.

Um ponto focal só pode ser adicionado às imagens do tema, ou seja, não pode ser incluído em imagens de produtos, blogs ou coleções.

Desktop

Etapas:

1. No editor de temas, clique na seção ou no bloco que tem uma imagem.
2. Clique em Editar na imagem.
3. Clique em Adicionar ponto focal.
4. Para definir o ponto focal, clique e arraste o círculo azul ou clique na parte mais importante da imagem.
5. Clique em Pronto.

iPhone

Etapas:

1. No editor de temas, toque na seção ou no bloco que tem uma imagem.
2. Toque em Editar na imagem.
3. Toque em Adicionar ponto focal.
4. Toque na parte mais importante da imagem para definir o ponto focal.
5. Toque em Pronto.

Android

Etapas:

1. No editor de temas, toque na seção ou no bloco que tem uma imagem.
2. Toque em Editar na imagem.
3. Toque em Adicionar ponto focal.
4. Toque na parte mais importante da imagem para definir o ponto focal.
5. Toque em Pronto.

Observação

Para mover um ponto focal, abra a imagem de novo e clique em uma área diferente dela para definir o novo ponto.

Remover um ponto focal

Desktop

Etapas:

1. No editor de temas, clique na seção ou no bloco que tem uma imagem.
2. Toque em Editar na imagem.
3. Clique em Remover ponto focal.
4. Clique em Pronto.

iPhone

Etapas:

1. No editor de temas, toque na seção ou no bloco que tem uma imagem.
2. Toque em Editar na imagem.
3. Toque em Remover ponto focal.
4. Toque em Pronto.

Android

Etapas:

1. No editor de temas, toque na seção ou no bloco que tem uma imagem.
2. Toque em Editar na imagem.
3. Toque em Remover ponto focal.
4. Toque em Pronto.

Observação

Conforme a maneira como o tema corta e redimensiona as imagens, pode ser que nem sempre o ponto focal pode esteja visualmente centralizado.

Formatos de imagem

A Shopify suporta os seguintes formatos de imagem:

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

Observação

A Shopify detecta quais formatos de imagem são compatíveis com o navegador do cliente e, assim, exibe o melhor formato disponível de forma automática. Saiba mais sobre os recursos de transformação de imagem da Shopify.

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 cliente é compatível com opções modernas, como WebP e o formato de arquivo de imagem AV1 (AVIF, na sigla em inglês), a Shopify mostra a imagem nesses formatos.

Para reduzir o tamanho do arquivo e, assim, melhorar o desempenho, os GIFs são convertidos automaticamente para o formato WebP animado.

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:

• 25 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.

Observação

Existem limites específicos de tamanho para o upload de arquivos e imagens de produtos.

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:

• 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). No exemplo abaixo, se as pessoas são a parte mais importante da imagem, é possível colocar um ponto focal no lado direito da imagem:

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). No exemplo abaixo, se os calçados são a parte mais importante da imagem, é possível colocar um ponto focal na parte inferior da imagem para evitar que eles sejam cortados: