As imagens são um componente indispensável de qualquer site. Incorporar recursos visuais melhora a experiência do usuário e facilita a navegação para hóspedes em potencial.
Este artigo inclui as diretrizes essenciais para gerenciar imagens no Cloudbeds Websites.
Gerenciar imagens para Cloudbeds Websites
- A otimização pode ser desativada para as imagens de plano de fundo, o widget de imagens e o widget de galeria de fotos.
- Desativar a otimização de imagens pode afetar a velocidade e/ou desempenho da página.
- Largura do plano de fundo: 2880px
- Desktop: 1920px
- Tablet: 1280px
- Dispositivos móveis: miniatura de 640px
-
Miniatura de blog:
- 160px
- 300px
- O Seletor de imagens permite que você faça edições rápidas nas imagens do seu site:
- Corte ou gire as imagens do seu site diretamente do Seletor de imagens
- Clique em uma imagem do site para abrir o Editor de conteúdo e clique em Editar
- Use o menu na parte inferior da imagem para enquadrar, adicionar texto, ajustar, cortar e focar a imagem.
- Quando estiver satisfeito com a imagem criada, clique em Salvar e fechar, e a imagem será salva na sua biblioteca e na página
Observações:
- Ao editar uma imagem com o Editor de imagens, ela é salva em Imagens do site.
- As imagens não são substituídas ao editá-las, são criadas novas versões.
- Alguns widgets permitem adicionar modificações adicionais, como sombras projetadas, bordas e sobreposições. Consulte as instruções relacionadas ao widget que você está usando para saber mais.
Diretrizes de imagens
Quando você carrega uma imagem, são criadas até 5 cópias em tamanho reduzido. O Criador de Websites insere automaticamente a imagem com o tamanho apropriado nos sites para desktop, tablet e dispositivos móveis, garantindo que os visitantes do site sempre vejam o tamanho correto para seus aparelhos.
Até 15 mil arquivos (incluindo imagens, vídeos, clipes de áudio e arquivos) podem ser carregados por site, e cada arquivo deve ter até 200 MB.
Requisitos do sistema para Webp
As seguintes versões são compatíveis com imagens Webp:
- iPhone: v14 e posterior
- 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 compatíveis:
- png
- jpg
- jpeg
- gif
- svg
- svg+xml
- ico
- x-icon
- webp
Tamanhos de imagem otimizados por dispositivo
- O tamanho da imagem carregada não é aumentado, e só são criadas imagens menores que a original.
- Por exemplo, ao carregar uma imagem com largura de 2000px, 5 novas cópias otimizadas são criadas. Se for carregada uma imagem com largura de 100px, não será criada nenhuma imagem nova.
- A área total de uma imagem não pode exceder 3.145.728 pixels. É improvável que uma imagem ultrapasse esse limite, mas você pode verificar rapidamente ao multiplicar a largura em pixels pela altura.
- O tamanho da imagem não pode exceder 200 MB.
- Fazer o upload de uma imagem maior do que esse limite pode causar os seguintes erros:
- Falha no upload das imagens
- O upload das imagens é concluído, mas as miniaturas no seletor de imagens não são exibidas
- As imagens não carregam no editor
- As imagens não carregam no site ativo
Controle deslizante
O widget Controle deslizante é normalmente usado com imagens de tamanho maior para um efeito dramático. Os controles deslizantes geralmente se estendem de uma ponta à outra, então é bom usar imagens mais largas para que caibam. Para controles deslizantes quadrados, use uma proporção uniforme, como 1:1.
É melhor escolher imagens com um bom preenchimento para que o conteúdo principal não seja cortado ao redimensionar. As proporções da imagem devem ser as mesmas no controle deslizante para a uniformidade do design.
- Proporções comuns: 16:9, 3:4
- Tamanhos de resolução comuns (px): 1600 x 900, 1280 x 720, 1280 x 960
Os dispositivos móveis geralmente têm a proporção oposta em relação a desktops. Você talvez precise usar o recurso Ocultar no dispositivo para exibir os controles deslizantes corretamente em dispositivos móveis.
Galeria de fotos
O widget Galeria de fotos é o mais flexível para usar com imagens, porque há muitas opções de layout. Por exemplo, você pode ter uma galeria lado a lado, com todas as imagens no mesmo tamanho, ou um mosaico, com imagens de tamanhos diferentes.
A proporção das imagens na Galeria de fotos deve refletir a exibição desejada.
- Por exemplo, as imagens em galerias de estilo quadrado devem ter uma proporção 1:1.
- Em galerias de imagens altas, as proporções de altura devem ser mais longas, como 2:5 ou 200px por 500px.
As proporções da imagem devem ser as mesmas para a uniformidade do design. Deixe um pouco de preenchimento na imagem para usar o efeito de transição ao passar o mouse e impedir que ela seja cortada.
- Proporções comuns: qualquer proporção.
- Tamanhos de resolução comuns (px): qualquer resolução de até 1500px para a velocidade da página.
Ícones
Os ícones são uma parte muito importante de qualquer site. Eles são marcadores visuais para informações e podem dar um visual moderno ao seu site. Você pode usar PNGs, JPEGs ou SVGs transparentes.
- Proporções comuns: geralmente, 1:1, mas qualquer uma funciona.
- Tamanhos de resolução comuns (px): 200x200, 80x80 ou qualquer outro. SVGs podem ter qualquer resolução.
- SVGs são arquivos de imagem que contêm código HTML, ou seja, quando você adiciona um ícone SVG ao site, também acrescenta linhas de código.
- Vários SVGs complexos podem adicionar milhares de linhas de código e fazer com que o site carregue lentamente. Se precisar usar vários ícones SVG na mesma página, recomendamos transformar alguns deles em imagens normais (.png, .jpeg etc.) para evitar problemas de carregamento ou funcionalidade.
Favicons
Os favicons não são usados no site, e sim exibidos na aba quando ele é aberto pelos usuários. É recomendável usar o formato ICO.
- Proporção obrigatória: 1:1
- Tamanhos de resolução permitidos (px): 24x24, 36x36, 48x48
Logotipos
É recomendável usar o formato SVG para imagens de logotipos, porque os arquivos SVG não são otimizados da mesma forma que outros arquivos de imagem. Assim, mesmo que o logotipo enviado seja pequeno, você não perderá qualidade.
Visualizando as duas proporções mais comuns:
- Proporção x resolução: a proporção é a relação entre os atributos de largura e altura da imagem. Uma proporção de 16:9 pode ser uma imagem de 16 x 9 px ou de 1600 x 900 px. É basicamente 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 nele. Se você usar uma imagem na área de trabalho com uma proporção de 16:9, ela ficará perfeita na tela, já que um computador desktop é largo. Um dispositivo móvel, no entanto, é muito menor. Portanto, uma proporção de 16:9 às vezes parecerá pequena.
Para compensar, você pode usar o recurso "Ocultar no dispositivo", criando versões específicas para esses dispositivos, ou redimensionar as dimensões, encaixando a imagem. As alterações no tamanho não dependem do dispositivo.
Considerações importantes
- O upload da maior resolução para seu site garante que as imagens dele tenham alta resolução para os clientes.
- Porém, 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 percebem a diferença na resolução.
- É melhor fazer upload de imagens que têm o tamanho pretendido para uso. Por exemplo, se você tiver uma imagem de 300px por 300px no seu site, não deve carregá-la como uma imagem de 4000px por 4000px.
Comentários
Por favor, entre para comentar.