O Guesty Websites otimiza automaticamente suas imagens para garantir que seu site carregue rapidamente em qualquer dispositivo. Ao fazer o upload de uma imagem, o sistema cria até cinco cópias menores e exibe o tamanho mais adequado para visitantes que acessam por computador, tablet ou celular.
Tamanho da imagem e requisitos do arquivo
Para garantir que suas imagens sejam carregadas com sucesso e exibidas corretamente, siga estes requisitos:
- Limite de arquivos: Faça o upload de até 15.000 arquivos por site, incluindo imagens, clipes de áudio, ícones e documentos.
- Tamanho do arquivo: Cada arquivo individual não deve exceder 50 MB.
- Resolução da imagem: A área total de uma imagem não pode exceder 3.145.728 pixels (multiplique a largura pela altura para verificar).
- Tamanho do arquivo de imagem: Embora o limite geral seja de 50 MB, mantenha as imagens com menos de 15 MB para obter o melhor desempenho.
- Formatos suportados: png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon e webp.
Suporte WebP
As imagens WebP são compatíveis com o Chrome, Android e as versões mais recentes do Safari/Mac. Para iPhone, use a versão 14 ou posterior.
Tamanhos de imagem otimizados por dispositivo
O sistema cria apenas cópias menores que a original. Por exemplo, se você enviar uma imagem com 2000px de largura, serão criadas cinco cópias otimizadas. Se você enviar uma imagem com 100px de largura, nenhuma nova versão será criada.
Tipo de imagem |
Largura da imagem |
|---|---|
| Fundo | 2880px |
| Área de trabalho | 1920px |
| Tablet | 1280px |
| Móvel | 640px |
| Miniatura do blog | 300px |
| Miniatura | 160px |
Desativar a otimização
Você pode desativar a otimização para imagens de fundo, o widget de Imagem e o widget de Galeria de Fotos. No entanto, isso pode reduzir significativamente a velocidade e o desempenho da sua página.
Diretrizes de imagem por widget
Siga as recomendações abaixo para garantir que suas imagens tenham uma aparência profissional e se adaptem ao design do seu site.
Slider
Os controles deslizantes geralmente se estendem por toda a tela, portanto, imagens largas funcionam melhor.
- Proporções de tela: 16:9 ou 3:4.
- Resoluções: 1600x900 ou 1280x720 px.
- Dica de design: Use imagens com bastante espaço livre para que o assunto principal não seja cortado quando o tamanho da tela mudar.
Galeria de fotos
A galeria é flexível e suporta vários layouts, como em mosaico ou com azulejos.
- Proporções: Use 1:1 para galerias quadradas ou 2:5 para galerias verticais.
- Resolução: Mantenha as imagens com menos de 1500px para garantir uma velocidade de carregamento rápida da página.
- Dica de design: Mantenha as proporções consistentes em toda a galeria para um visual limpo.
Ícones
Os ícones servem como marcadores visuais e podem ser carregados como PNGs, JPEGs ou SVGs com fundo transparente.
- Proporção da tela: Geralmente 1:1.
- Resoluções: 200x200 ou 80x80 px.
Complexidade SVG
Os SVGs são compostos de código. Usar muitos SVGs complexos pode adicionar milhares de linhas de código à sua página e causar lentidão no carregamento. Se estiver usando vários ícones, considere converter alguns para PNG ou JPEG.
Favicons
Os favicons aparecem na aba do navegador, e não na própria página. Use o formato ICO para obter os melhores resultados.
- Proporção da tela: 1:1.
- Resoluções: 24x24, 36x36 ou 48x48 px.
Logotipos
Use o formato SVG para logotipos. Como os arquivos SVG não são redimensionados como outros tipos de imagem, seu logotipo permanecerá nítido mesmo em tamanhos pequenos.
Melhores práticas para otimização de imagens
Entenda a diferença entre proporção e resolução
A proporção da imagem é a relação entre a largura e a altura. Uma proporção de 16:9 descreve o formato, seja a imagem de 16x9 px ou 1600x900 px. [Imagem: Comparação lado a lado de uma proporção quadrada de 1:1 e uma proporção widescreen de 16:9.]
Ajustar para dispositivos móveis
Uma imagem 16:9 fica ótima em um computador desktop com tela ampla, mas pode parecer muito pequena em uma tela vertical de celular. Para corrigir isso:
- Ajuste as dimensões da imagem especificamente para dispositivos móveis.
- Use a função "ocultar no dispositivo" para exibir uma versão diferente, cortada verticalmente, para usuários de dispositivos móveis.
Equilibrar qualidade e velocidade
Imagens de alta resolução ficam ótimas, mas deixam seu site muito mais lento. Os usuários raramente percebem a diferença entre uma imagem de altíssima resolução e uma com a escala correta. Faça o upload das imagens no tamanho para o qual foram projetadas. Por exemplo, se uma imagem é exibida com 300x300 px no seu site, não faça o upload de um arquivo de 4000x4000 px.
