A 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.
-
Todos os arquivos (texto, imagem, vídeo e áudio) carregados no sistema estão disponíveis ao público. Não faça upload de nenhuma informação pessoal e/ou confidencial. Para excluir totalmente o arquivo, apague-o do Media Manager.
-
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.
-
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.
-
Os arquivos e seus nomes podem ser armazenados em cache por um tempo. Se um arquivo for excluído, ele provavelmente permanecerá disponível por algum tempo. Isso inclui o nome do arquivo, o que significa que você pode encontrar o erro " O nome já existe " ao tentar usar o nome de um arquivo excluído recentemente.
-
Devido ao armazenamento em cache, não é recomendável fazer upload de um arquivo com o mesmo nome de um arquivo excluído recentemente, pois o arquivo excluído pode continuar aparecendo por algum tempo.
-
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 ou funcionalidade.
-
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.
A 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 proporção de 16:9.
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 do 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 for necessário editar um vídeo, isso terá de ser feito com uma empresa externa tool.
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, ícone x, 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 área maior.
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 de cerca de 200 px.
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
A otimização de imagens do Website Builder funciona somente em imagens JPG e PNG. Se o senhor estiver carregando um TIFF, GIF ou outros formatos de imagem, o Website Builder talvez não consiga otimizá-lo.
A 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 no seu site, ele não redimensiona o design das imagens no site. Se você usar uma imagem na área de trabalho com uma proporção de 16:9, ela aparecerá perfeita na tela do computador, já que o desktop é amplo. Um dispositivo móvel, no entanto, é muito menor e, portanto, uma proporção de 16:9 poderá parecer pequena.
Para compensar, o senhor pode usar o recurso de ocultar no dispositivo para criar versões específicas para esses dispositivos ou pode 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 é 1920px 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 de aspecto 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 diferente em comparação aos dispositivos de desktop. Você pode ter que usar o recurso Ocultar no dispositivo para exibir os sliders móveis corretamente.
A proporção e o tamanho da imagem de um widget podem variar de acordo com o tamanho, o local e as configurações do widget. Embora existam diretrizes gerais, não há padrões fixos.
Gallery widget e widget que oferecem layouts de galeria
Essas widget incluem o seguinte:
-
Galeria de Fotos
-
Galeria de Produtos
-
Controle deslizante de mídia
-
Página da loja de terceiros widget
A proporção das imagens nesses widget deve refletir como o senhor deseja que elas sejam exibidas.
-
Por exemplo, as galerias de estilo quadrado devem ter uma proporção de 1:1 de imagens.
-
As galerias de imagens com estilo mais alto devem ter proporções de altura maiores, como por exemplo 2:5 ou 200px por 500px.
-
As proporções de imagem devem ser as mesmas para manter a coerência do design. Deixe algum preenchimento na imagem para utilizar 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 for alterada para esses layouts, as proporções de aspecto serão alteradas 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.
Enquanto o widget na página da categoria oferece 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 Vender on-line.
-
Clique em Páginas da loja.
-
Clique em Category Page (se a loja não tiver categorias configuradas, a página ficará em cinza e não estará disponível para edição).
-
Clique com o botão direito do mouse no widget que exibe as categorias e selecione Edit Design.
-
Clique em Produtos.
-
Clique na miniatura em 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é a opção Proporção da imagem.
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 de aspecto substituível |
---|---|
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 a opção Capa 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 a opção Imagem inteira 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 sites widget oferecem uma configuração que permite que a imagem completa seja exibida sem ser cortada.
widgetque oferecem a configuração para exibir a imagem completa:
-
Imagem (no Editor 2.0; no Editor Clássico, o widget sempre se ajustará à proporção da imagem)
-
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 qualquer uma das 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 acima do limite pode dar os seguintes erros:
-
As imagens não carregam.
-
As imagens carregam, mas as miniaturas no seletor de imagens não aparecem.
-
As imagens não são carregadas no editor.
-
As imagens não são carregadas no site ativo.
Recomenda-se o formato SVG nas imagens do logotipo, pois arquivos SVG não são otimizados da mesma forma que outros arquivos de imagem; portanto, mesmo que o logotipo carregado tenha um tamanho pequeno, você não perderá qualidade.
Nota
SVG é um arquivo de imagem com código HTML; ou seja, ao adicionar um ícone SVG ao site, você também adiciona 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.
O envio com resoluções mais altas para o site garante que as imagens sejam apresentadas em alta resolução aos clientes. Entretanto, lembre-se de que imagens maiores também afetam drasticamente a velocidade da página. Como as imagens em alta resolução são reduzidas, normalmente os usuários não notam a diferença na resolução. É melhor carregar imagens que sejam do tamanho ideal para cada finalidade. Por exemplo, se você tiver uma imagem com 300 px por 300 px no site, não envie uma imagem de 4000 px por 4000 px.
Para otimizar o tamanho da imagem do 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 ciente das proporções, pois as imagens 16:9 ficam ótimas no computador, mas pequenas demais no celular. Nesse caso:
-
Use o recurso Ocultar no dispositivo 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.
-
Nota
-
Para obter informações e diretrizes sobre os ícones do site que podem ser encontrados na área SEO & Settings (Configurações de SEO) do editor, consulte Site SEO Settings (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 seja carregado lentamente ou potencialmente interrompido. 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 ou funcionalidade.
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, os 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.
-
Os vídeos consomem tempo e largura de banda para carregar e podem desviar a atenção dos usuários dos links importantes ou do texto de sua página, então use os 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.
-
iPhones com bateria no modo de economia de energia não reproduzem automaticamente os vídeos em um site; em vez disso, aparecerá um botão de reprodução.
-
Os planos de fundo de vídeos não reproduzirão som.
-
Ao adicionar um vídeo do Dailymotion que faz parte de uma playlist, adicione apenas o link direto do vídeo (e omita o parâmetro da playlist, que se parece com isso:?playlist=x1x2f3). Se o URL do seu vídeo tiver esse parâmetro, basta removê-lo. Por exemplo: https://www.dailymotion.com/video/x60ktex?playlist=x5x6f2 seria https://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:
-
Limpar 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.
O á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 Áudio widget.
Nota
-
Os arquivos na guia de arquivos do gerenciador de mídia contribuem para o limite de 15.000 arquivos.
-
Você não pode carregar arquivos para a sua pasta raiz.
A guia de arquivos no gerenciador de mídia oferece suporte a praticamente qualquer tipo de arquivo. Os arquivos carregados aqui podem ser vinculados usando o seletor de links, mas não podem ser usados diretamente em nenhum widget. Por exemplo, uma imagem carregada nessa guia não estará disponível para uso em 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 opção Gerenciar 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 opção Gerenciar para a biblioteca ou seletor.