mídia desempenha um papel crucial no aprimoramento do apelo visual e da eficácia do seu site. O uso adequado de imagens, vídeos e outros tipos de mídia pode envolver os visitantes, transmitir informações com mais eficiência e criar uma experiência de usuário mais dinâmica
-
Imagens, ícones, clipes de áudio e arquivos: até 15.000 imagens, clipes de áudio e arquivos combinados por site. Arquivos adicionais podem resultar em uma mensagem de erro. Cada arquivo não deve ter mais de 50 MB
Observe que, se você estiver em um plano de loja nativa Elite, o limite de arquivos será aumentado para 20.000.
-
Vídeos: até 100 por site. Arquivos adicionais podem resultar em uma mensagem de erro. Cada arquivo não deve ter mais de 200 MB. Arquivos maiores podem resultar em uma mensagem de erro ou não concluir o upload. Se forem necessários vídeos adicionais, o YouTube ou o Vimeo podem ser opções possíveis
-
Não há suporte para espaços nos nomes dos arquivos. É possível fazer upload de arquivos com espaços, mas isso pode resultar em um comportamento inesperado com o arquivo.
-
Depois que você excluir um arquivo, o nome dele pode permanecer armazenado em cache por algum tempo. Dê um nome diferente aos novos arquivos enviados; caso contrário, você poderá receber a mensagem de erro Nome já existe ou o arquivo excluído poderá continuar aparecendo.
-
Tipo de arquivo SVG: SVGs são arquivos de imagem que contêm código HTML, ou seja, quando você adiciona um ícone SVG ao seu site, você também está adicionando linhas de código. Vários SVGs complexos podem adicionar milhares de linhas de código e fazer com que seu site carregue lentamente. Se você precisar usar vários ícones SVG na mesma página, recomendamos transformar alguns deles em imagens comuns (.png, .jpeg etc.) para evitar problemas de carregamento
-
Arquivos de qualquer tipo não podem ser enviados para a pasta raiz de um domínio.
-
Os metadados do arquivo (incluindo dados EXIF) não são suportados e serão removidos após o upload.
proporção é a relação entre a largura e a altura da mídia e representa o valor numérico de sua forma (normalmente, a proporção é mais importante em imagens e vídeos). O tamanho da mídia não muda necessariamente sua proporção. Por exemplo, tanto 1280x720px quanto 3840x2160px têm a mesma
Se a proporção de um arquivo de mídia for significativamente diferente da forma da seção ou elemento em que ele será usado, ele poderá parecer cortado. Dependendo do widget ou elemento, alterar a proporção do arquivo pode ser a melhor maneira de corrigi-lo. Para imagens, o Editor de Imagens incorporado pode ser usado para alterar a proporção cortando-a. Se um vídeo precisar ser editado, isso precisaria ser feito com uma ferramenta externa.
Nota
-
O limite de tamanho do arquivo é de 50 MB por imagem.
-
Os arquivos de imagem contribuem para o limite de 15.000 arquivos.
Os seguintes tipos de arquivo de imagem são suportados:
png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon, webp
O editor otimiza as imagens sob demanda, adaptando-as ao dispositivo que está sendo usado e ao tamanho visível no site.
Observe que o tamanho da imagem enviada nunca é aumentado e somente as imagens exibidas no site menores do que a original são otimizadas. Por exemplo, se você fizer upload de uma imagem com 2.000 px de largura, mas ela for usada em uma área que exija apenas 1920 px, a imagem será otimizada para 1920 px. No entanto, se você fizer upload de uma imagem com 100 px de largura, ela não será otimizada e poderá aparecer pixelizada se exibida em uma
Embora o editor possa otimizar imagens de qualquer tamanho, é recomendável fazer upload de imagens próximas ao tamanho máximo em que elas aparecerão no site. Por exemplo, se a imagem for uma miniatura com uma largura de 160 px, considere fazer o upload de uma imagem com uma largura máxima
Além da otimização, todas as imagens do site são veiculadas no formato WebP. Esse formato permite tamanhos de arquivo menores e, ao mesmo tempo, preserva a qualidade da imagem, contribuindo para um desempenho mais rápido do site sem sacrificar a clareza visual
Nota
DudaA otimização de imagem funciona somente em imagens JPG e PNG. Se você estiver carregando um TIFF, GIF ou outros formatos de imagem, Duda talvez não consiga otimizá-lo.
A otimização pode ser desativada para imagens de fundo, o widget Imagem e o widget Galeria de Fotos.
Para obter mais informações, consulte os seguintes artigos:
Atenção
Desativar a otimização de imagem pode afetar a velocidade e/ou o desempenho da página.
proporção é a proporção do atributo de largura e altura de uma imagem e está essencialmente associada à forma da imagem. Uma proporção de 16:9 pode ser uma imagem de 16x9 px ou uma imagem de 1600x900 px. É basicamente qualquer resolução de imagem que tenha a proporção de 16:9.
Visualizando as duas proporções mais comuns:
A resolução de uma imagem se refere à quantidade de detalhes que uma imagem contém, especificamente o número de pixels que compõem a imagem e é essencialmente o detalhe e a clareza da imagem.
Embora as imagens sejam otimizadas em seu site, na verdade, elas não redimensionam o design das imagens em seu site. Se você usar uma imagem na área de trabalho com uma proporção de 16:9, ela ficará perfeita na área de trabalho, pois o dispositivo desktop é amplo. Um dispositivo móvel, no entanto, é muito menor e, portanto, uma proporção de 16:9 às vezes parece pequena
Para compensar, você pode usar o recurso ocultar no dispositivo para criar versões específicas para esses dispositivos ou redimensionar as dimensões da imagem na área de design do widget. As alterações no tamanho são independentes do dispositivo para a maioria dos elementos.
A proporção recomendada depende de onde ela será usada e de como você gostaria que fosse exibida.
Se uma imagem for usada na orientação paisagem, um exemplo de proporção recomendada pode ser 16:9, pois isso indicaria que ela será mais larga do que alta. Seria o oposto de retrato, 9:16.
Para recomendações de tamanho, em geral, é melhor manter a largura da imagem igual ou um pouco maior do que o tamanho otimizado. Por exemplo, se a imagem for usada em um widget de imagem no desktop, a largura máxima recomendada é de 1920 px ou apenas um pouco maior. Imagens maiores exigem mais otimização, o que pode afetar a qualidade da imagem. Se a otimização estiver desativada, imagens maiores não sofrerão em qualidade, mas deixarão o site mais lento devido ao tamanho.
Proporções e tamanhos comuns
Quando uma imagem ocupará toda a largura do site:
-
Proporções comuns para desktop: 16:9, 3:4
-
Tamanhos de resolução comuns (px) para desktop: 1600x900, 1280x720, 1280x960
Os dispositivos móveis geralmente têm a proporção oposta em comparação aos dispositivos desktop. Talvez seja necessário usar o recurso ocultar no dispositivo para exibir os controles deslizantes móveis corretamente.
A proporção e o tamanho da imagem de um widget podem variar com base no tamanho, localização e configurações do widget. Embora existam diretrizes gerais, não há padrões fixos.
Widgets de galeria e widgets que oferecem layouts de galeria
Esses widgets incluem o seguinte:
-
Galeria de fotos
-
Galeria de produtos
-
Controle deslizante de mídia
-
third party store widgets de página
A proporção das imagens nesses widgets deve refletir como você deseja que elas sejam exibidas.
-
Por exemplo, galerias de estilo quadrado devem ter uma proporção de imagens de 1:1.
-
Galerias de estilo de imagem altas devem ter proporções de altura maiores, como 2:5, ou 200px por 500px.
-
As proporções da imagem devem ser as mesmas para garantir a consistência do design. Deixe um pouco de espaço na imagem para usar o efeito de foco para que suas imagens não sejam cortadas
-
Tamanhos de resolução comuns (px): qualquer resolução, mas, quando possível, não maiores que 1500 px para a velocidade da página.
Todos os layouts disponíveis vêm com proporções definidas que não serão alteradas, embora as opções de layout com tamanhos de imagens uniformes tenham a opção nas configurações de design de alterar a altura. Quando a altura desses layouts for alterada, as proporções mudarão com base no tamanho do widget
As proporções definidas para os layouts de mosaico (as opções com imagens de tamanhos variados) variarão dependendo do layout e do número de colunas definidas nas configurações de design.
Embora o widget na página da categoria ofereça uma variedade de opções, a imagem na página do produto tem uma proporção de 1:1.
Para ver as opções disponíveis para o widget na página da categoria:
-
No painel lateral, clique em Armazenar.
-
Clique Armazenar páginas.
-
Clique Página da categoria (se a loja não tiver categorias configuradas, a página ficará acinzentada e não estará disponível para ser editada).
-
Clique com o botão direito do mouse no widget que exibe as categorias e selecione Editar design.
-
Clique Produtos.
-
Clique na miniatura abaixo Layout para ver as opções de layout disponíveis.
-
Para ver as proporções disponíveis, role para baixo na seção Produtos até o Proporção da imagem opção.
Por padrão, a proporção da maioria dos elementos substituirá a proporção da imagem, resultando em partes da imagem sendo cortadas. No entanto, alguns elementos incluem uma configuração que permite que a imagem inteira seja exibida sem ser cortada
|
Imagem original |
Imagem no widget com proporção predominante |
|---|---|
|
A proporção é de 3:2 |
Um exemplo de proporção possível pode ser 3:1 (apenas a parte da imagem que não está coberta pelas caixas brancas) |
Ao usar o Capa opção nas configurações de design do elemento, a proporção do elemento substituirá a proporção da imagem. Se as proporções não corresponderem, partes da imagem serão cortadas.
Além disso, alguns elementos, como linhas e seções, se ajustam ao tamanho da tela do dispositivo. Como resultado, a proporção do elemento mudará com base no tamanho da tela que está visualizando o site no momento.
Uma técnica para evitar que a imagem seja cortada é usar o Imagem completa opção nas configurações de design do elemento. Observe que nem todos os elementos terão essa opção.
Para obter mais informações sobre planos de fundo, consulte Planos de fundo do elemento.
Alguns widgets oferecem uma configuração que permite que a imagem inteira seja exibida sem ser cortada.
Widgets que oferecem a configuração para exibir a imagem completa:
-
Imagem (no Editor 2.0; no Editor Clássico, o widget sempre aderirá à proporção das imagens)
-
Controle deslizante de mídia
-
Galeria de fotos
A área total de uma imagem não pode exceder 3.145.728 pixels. É improvável que alguma de suas imagens ultrapasse esse limite, mas você pode verificar rapidamente multiplicando a largura do pixel pela altura
Cada arquivo não deve ter mais de 50 MB. Arquivos maiores podem resultar em uma mensagem de erro ou não concluir o upload
O upload de uma imagem maior que o limite pode resultar nos seguintes erros:
-
Falha no upload das imagens.
-
As imagens são carregadas, mas as miniaturas no seletor de imagens não são exibidas.
-
As imagens não são carregadas no editor.
-
As imagens não são carregadas no site ativo.
É recomendável usar o formato SVG para imagens de logotipo, pois os arquivos SVG não são otimizados da mesma forma que outros arquivos de imagem, portanto, mesmo que o logotipo enviado seja pequeno, você não perderá qualidade.
Nota
SVGs são arquivos de imagem que contêm código HTML, ou seja, quando você adiciona um ícone SVG ao seu site, você também está adicionando linhas de código.
Diretrizes de tamanho
O intervalo para a largura do logotipo quando incorporado ao cabeçalho ou rodapé está entre 250 px e 400 px. Normalmente, a altura não é uma preocupação e será determinada pela proporção do logotipo.
Carregar a maior resolução para o seu site garante que as imagens do seu site sejam de alta resolução para seus clientes e consumidores. No entanto, lembre-se de que imagens grandes também têm um efeito drástico na velocidade da página. Como as imagens de alta resolução são reduzidas, os usuários normalmente não notam a diferença na resolução. É melhor fazer upload de imagens que sejam tão grandes quanto a forma como devem ser usadas. Por exemplo, se você tem uma imagem de 300 px por 300 px em seu site, não deseja carregá-la como uma imagem de 4000 px por 4000 px
Para otimizar os tamanhos das imagens para seu site:
-
Faça upload apenas de imagens do tamanho pretendido para serem usadas (por exemplo, se a imagem aparecer como 300px por 300px no site, não faça o upload como uma imagem de 4.000px por 4.000px).
-
O tamanho máximo da imagem não pode exceder 3.145.728 pixels.
-
Esteja atento às proporções, pois as imagens 16:9 ficam ótimas no desktop, mas parecem muito pequenas no celular. Nesse caso:
-
Use o Ocultar no dispositivo recurso para criar versões específicas da imagem para cada dispositivo.
-
Redimensione as dimensões da imagem (proporção) para ajustá-las - as alterações de tamanho são independentes do dispositivo.
-
A área total de uma imagem não pode exceder 3.145.728 pixels. É improvável que alguma de suas imagens ultrapasse esse limite, mas você pode verificar rapidamente multiplicando a largura do pixel pela altura
Nota
-
Para obter informações e diretrizes sobre ícones de sites, consulte Configurações de SEO do site.
-
Os arquivos de ícones contribuem para o arquivo limite de 15.000.
O tipo de arquivo, SVG, é o único tipo de arquivo compatível com essa guia.
-
Proporções comuns: geralmente 1:1, mas qualquer proporção funcionará.
-
Tamanhos de resolução comuns (px): 200x200, 80x80 ou qualquer resolução. SVGs podem ter qualquer resolução
Atenção
SVGs são arquivos de imagem que contêm código HTML, ou seja, quando você adiciona um ícone SVG ao seu site, você também está adicionando linhas de código. Vários SVGs complexos podem adicionar milhares de linhas de código e fazer com que seu site carregue lentamente ou potencialmente quebre. Se você precisar usar vários ícones SVG na mesma página, recomendamos transformar alguns deles em imagens comuns (.png, .jpeg etc.) para evitar problemas de carregamento
Os vídeos podem ser hospedados nos arquivos do site, enviando-os para o gerenciador de mídia ou gravando diretamente usando a câmera e o microfone do seu computador. Além disso, vídeos do YouTube, Vimeo ou Dailymotion podem ser adicionados a partes específicas do site usando o widget de vídeo ou como plano de fundo para elementos que suportam vídeo. Esses vídeos externos só estarão disponíveis no local em que foram adicionados e não estarão disponíveis no editor.
Nota
Até 100 vídeos podem ser enviados por site. Arquivos adicionais podem resultar em uma mensagem de erro. Cada arquivo não deve ter mais de 200 MB. Arquivos maiores podem resultar em uma mensagem de erro ou não concluir o upload. Se forem necessários vídeos adicionais, o YouTube ou o Vimeo podem ser opções possíveis
Para obter informações detalhadas sobre onde e como os vídeos podem ser incorporados ao site, consulte estes artigos:
-
Os vídeos podem levar tempo e largura de banda para serem carregados e podem distrair os usuários de links ou textos importantes em sua página, então use vídeos com moderação.
-
Os vídeos do YouTube não são compatíveis com dispositivos móveis, pois não são reproduzidos automaticamente em dispositivos iOS.
-
Os iPhones com bateria no modo de baixa energia não reproduzirão vídeos automaticamente em um site e, em vez disso, mostrarão um botão de reprodução.
-
Vídeos em segundo plano não reproduzirão som.
-
Ao adicionar um vídeo do Dailymotion que faz parte de uma playlist, certifique-se de adicionar apenas o link direto ao vídeo (e omitir o parâmetro playlist, que se parece com isso:? lista de reprodução = x1x2f3). Se o URL do seu vídeo tiver esse parâmetro, basta removê-lo. Por exemplo:
https://www.dailymotion.com/video/x60ktex?playlist=x5x6f2seriahttps://www.dailymotion.com/video/x60ktex
Pode haver várias causas pelas quais um vídeo não será carregado. Aqui estão algumas técnicas para tentar solucionar problemas
-
Verifique o tamanho do arquivo para garantir que esteja abaixo de 200 MB.
-
Revise os vídeos atuais enviados para garantir que haja menos de 100.
-
Tente fazer o upload de um vídeo diferente.
-
Se outro vídeo for carregado, provavelmente está relacionado ao arquivo do vídeo. Criar um novo arquivo a partir da fonte original pode corrigi-lo.
-
Se outro vídeo não for carregado, ele pode estar relacionado a algo local do seu computador, por exemplo, a velocidade da página ou relacionado ao navegador. Se for local no seu computador, algumas técnicas a serem testadas podem ser:
-
Limpando o cache do navegador
-
Experimentando um navegador diferente
-
Experimentando uma rede diferente
-
Reiniciando seu computador
-
-
Nota
Os arquivos de áudio contribuem para o limite de 15.000 arquivos.
áudio pode ser hospedado nos arquivos do site enviando-os para o gerenciador de mídia ou gravando diretamente usando o microfone do seu computador. Além disso, o áudio do SoundCloud ou do Mixcloud pode ser adicionado a partes específicas do site usando o widget de áudio. O áudio externo só estará disponível no local em que foi adicionado e não estará disponível no editor.
Para obter detalhes sobre como incorporar áudio em um site, consulte Widget de áudio.
Nota
-
Os arquivos na guia de arquivos do gerenciador de mídia contribuem para o limite de 15.000 arquivos.
-
Você não pode fazer upload de arquivos para sua pasta raiz.
A guia de arquivos no gerenciador de mídia oferece suporte a praticamente qualquer tipo de arquivo. Os arquivos enviados aqui podem ser vinculados usando o seletor de links, mas não podem ser usados diretamente em nenhum widget (para obter mais informações sobre o seletor de links, consulte Seletor de links). Por exemplo, uma imagem enviada para essa guia não estará disponível para uso com nenhum widget de imagem
Os nomes dos arquivos podem permanecer em cache por um tempo. Se um arquivo com o mesmo nome foi excluído recentemente, é provável que ele ainda esteja armazenado em cache e você precisará usar um nome diferente
Um arquivo com o mesmo nome pode ter sido excluído recentemente. Os nomes dos arquivos podem permanecer em cache por um tempo. O arquivo precisaria ser renomeado
Para renomear um arquivo, abra o Media Manager, selecione o arquivo e clique em Renomear. Se estiver usando uma biblioteca ou seletor, ative a Gerenciar opção para a biblioteca ou seletor.
Provavelmente, isso se deve a um arquivo existente com o mesmo nome ou a um arquivo excluído recentemente. Os nomes dos arquivos podem permanecer em cache por um tempo, portanto, renomear o arquivo pode ser a melhor opção se você encontrar esse problema
Para renomear um arquivo, abra o Media Manager, selecione o arquivo e clique em Renomear. Se estiver usando uma biblioteca ou seletor, ative a Gerenciar opção para a biblioteca ou seletor.
Exclua o arquivo do Gerenciador de Mídia ou de uma biblioteca ou seletor com a opção Gerenciar ativada. O arquivo será removido imediatamente da mídia do seu site.
Se alguém já tiver o link direto do arquivo, ainda poderá abri-lo por algum tempo, pois cópias do arquivo podem permanecer no cache. Não há um prazo definido para quanto tempo isso dura.