Imagens de alta qualidade estabelecem a base estética de um site, valorizando o engajamento do usuário e impulsionando as conversões de reservas diretas.
Para simplificar a configuração, o criador de sites sincroniza automaticamente e preenche seus recursos visuais diretamente do Perfil da Propriedade e das configurações de Acomodação do seu PMS da Cloudbeds para a galeria de mídia do site.
Este artigo apresenta as principais especificações, critérios de dimensão e procedimentos de gerenciamento para mídias visuais dentro do Cloudbeds Websites.
Acessando o Gerenciador de Mídia
- No Menu Principal do PMS da Cloudbeds, acesse Marketing Digital e selecione a guia Websites;
- Clique em Editar meu site para abrir a interface do Editor do Site;
- No painel de ferramentas à esquerda do editor, selecione CMS e escolha Gerenciador de Mídia para visualizar as pastas de imagens da sua propriedade já preenchidas automaticamente.
Gerencie imagens do seu Cloudbeds Website
Tamanho por tipo de imagem
A otimização pode ser desativada para imagens de fundo, o Widget de Imagem e o Widget de Galeria de Fotos.
- Desativar a otimização de imagens pode impactar a velocidade ou o desempenho da página.
- Largura da imagem de fundo: 2880px
- Computador: 1920px
- Tablet: 1280px
- Celular: 640px Miniatura
-
Miniatura de blog:
- 160px
- 300px
Diretrizes para imagens
Requisitos e tipos de arquivos de imagem
Cada vez que você carrega uma imagem, até 5 cópias reduzidas da imagem são criadas. O criador de sites então insere automaticamente a imagem no tamanho adequado para as versões de computador, tablet e celular, garantindo que os visitantes do seu site sempre vejam a imagem no tamanho correto para o dispositivo.
Até 15 mil arquivos (incluindo imagens, vídeos, áudios e arquivos) podem ser carregados por site, e cada arquivo deve ter no máximo 200 MB.
Requisitos do sistema para Webp
As seguintes versões são compatíveis com imagens Webp:
- iPhone: v14 e posteriores
- Mac/Safari: versão mais recente
- Chrome: todas as versões
- Android: todas as versões
Os seguintes tipos de arquivos de imagem são suportados:
- png
- jpg
- jpeg
- gif
- svg
- svg+xml
- ico
- x-icon
- webp
Tamanhos otimizados de imagem por dispositivo
- O tamanho da imagem carregada não é aumentado e apenas imagens menores que a original são criadas.
- Por exemplo, se uma imagem de 2000px de largura for carregada, 5 novas cópias otimizadas serão criadas. Se uma imagem de 100px de largura for carregada, nenhuma nova imagem será criada.
Tamanho máximo da imagem
- 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 em pixels pela altura.
- O tamanho da imagem não deve exceder 200MB.
- Carregar uma imagem maior que o limite pode resultar nos seguintes erros:
- Falha no carregamento das imagens
- As imagens são carregadas, mas as miniaturas no seletor de imagens não aparecem
- As imagens não carregam no editor
- As imagens não carregam no site ativo
Diretrizes de tamanho de imagem por widget
Slider
O widget Slider normalmente é usado com imagens de tamanho maior para criar impacto visual. Os sliders geralmente ocupam toda a largura da tela, então é importante usar imagens mais largas para preencher o slider. Para sliders quadrados, utilize uma proporção igual, como 1:1.
O ideal é escolher imagens com boa margem para que o conteúdo principal da imagem não seja cortado ao redimensionar. As proporções das imagens devem ser iguais no slider para manter a consistência do design.
- Proporções comuns: 16:9, 3:4
- Tamanhos de resolução comuns (px): 1600x900, 1280x720, 1280x960
Dispositivos móveis costumam ter proporção oposta à dos computadores. Você pode usar o recurso ocultar em dispositivo para exibir sliders corretamente no celular.
Galeria de Fotos
O widget Galeria de Fotos é o mais flexível para uso de imagens, pois oferece diversas opções de layout. Por exemplo, é possível criar uma galeria em mosaico, onde todas as imagens têm o mesmo tamanho, ou uma galeria mosaico com tamanhos variados.
A proporção das imagens na Galeria de Fotos deve refletir como você deseja exibi-las.
- Por exemplo, galerias quadradas devem ter proporção 1:1 nas imagens.
- Galerias com imagens verticais devem ter proporções mais altas, como 2:5 ou 200px por 500px.
As proporções das imagens devem ser iguais para manter a consistência do design. Deixe uma margem na imagem para usar o efeito de hover e evitar que suas imagens sejam cortadas.
- Proporções comuns: qualquer proporção.
- Tamanhos de resolução comuns (px): qualquer resolução, mas não maior que 1500px para garantir velocidade de carregamento.
Ícones
Ícones são uma parte muito importante de qualquer site. Eles servem como marcadores visuais de informações e podem dar um visual moderno ao seu site. Você pode usar PNGs transparentes, JPEGs ou SVGs.
- Proporções comuns: geralmente 1:1, mas qualquer proporção funciona.
- Tamanhos de resolução comuns (px): 200x200, 80x80 ou qualquer resolução. SVGs podem ter qualquer resolução.
SVGs são arquivos de imagem que contêm código HTML, ou seja, ao adicionar 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 deixar seu site lento. Se precisar usar vários ícones SVG na mesma página, recomendamos converter alguns deles em imagens comuns (.png, .jpeg, etc.) para evitar problemas de carregamento ou funcionamento.
Favicons
Favicons não são exibidos no seu site, mas aparecem na guia quando os usuários abrem seu site. Recomenda-se usar o formato ICO. Para converter arquivos de imagem em ICO.
- Proporção obrigatória: 1:1
- Tamanhos de resolução permitidos (px): 24x24, 36x36, 48x48
Logotipos
Recomenda-se usar o formato SVG para imagens de logotipo, pois arquivos SVG não são otimizados da mesma forma que outros arquivos de imagem, então mesmo que o logotipo enviado seja pequeno, você não perde qualidade.
Visualizando as duas proporções mais comuns:
- Proporção vs Resolução: A proporção é a relação entre a largura e a altura de uma imagem. Uma proporção de 16:9 pode ser uma imagem de 16x9 px ou 1600x900 px. Ou seja, qualquer resolução de imagem que tenha a proporção de 16:9.
-
Proporções por dispositivo: Embora as imagens sejam otimizadas no seu site, isso não redimensiona o design das imagens. Se você usar uma imagem no computador com proporção 16:9, ela ficará perfeita no computador, já que o dispositivo é mais largo. Em dispositivos móveis, que são menores, uma proporção 16:9 pode parecer pequena.
Para compensar, você pode usar o recurso ocultar em dispositivo para criar versões específicas para esses dispositivos, ou redimensionar as dimensões da imagem para ajustar. Alterações de tamanho são independentes do dispositivo.
Considerações importantes
Carregar a maior resolução para o seu site garante que as imagens do seu site sejam alta resolução para seus clientes e hóspedes.
- No entanto, lembre-se de que imagens grandes também têm grande impacto na velocidade da página. Como as imagens em alta resolução são redimensionadas, os usuários normalmente não percebem diferença na resolução.
- É melhor carregar imagens do tamanho que serão usadas. Por exemplo, se você tem uma imagem de 300px por 300px no seu site, não é recomendado carregá-la como uma imagem de 4000px por 4000px.
Comentários
Por favor, entre para comentar.