Otimize as imagens do banner do herói para todos os dispositivos

Como funciona o Estandarte de Herói?

O GemPages redimensiona automaticamente as imagens do Hero Banner para melhorar a velocidade de carregamento da página em diferentes dispositivos:

• Visualização do tablet: A imagem é redimensionada para uma largura máxima de 1024 px.
• Exibição móvel: A imagem é redimensionada para uma largura máxima de 768 px.

Esse redimensionamento pode reduzir a qualidade da imagem quando a mesma imagem é usada tanto para desktop quanto para dispositivos móveis. Para garantir que seu Banner de Herói tenha a melhor aparência possível, você tem duas opções:

• Use o mesma proporção de imagem para todos os dispositivos.
• Uso imagens separadas para cada dispositivo.

Como otimizar as imagens do banner do herói para todos os dispositivos?

Opção 1: Usando uma única proporção de imagem para todos os dispositivos

Se você quiser usar a mesma imagem no desktop, tablet e celular, clique em Elemento Herói para abrir suas configurações e seguir estes passos:

Passo 1: Envie sua imagem para o Hero Banner. 

• De Configurações guia na barra lateral esquerda, role para baixo até a Contexto seção.
• Clique no botão "Adicionar ...”Botão ao lado do Imagem opção para expandir a configuração de fundo da imagem.
• Acertar Carregar uma nova imagem, e certifique-se de que a imagem tenha pelo menos 1920 px Largo.

Passo 2: Defina a proporção tamanho/banner para cada visualização do dispositivo.

• Encontre o quadro opção sob o Dimensões: seção.
• Escolha o Como fonte de banner da lista suspensa.

O banner será redimensionado automaticamente para se ajustar ao tamanho da tela, mantendo as proporções originais da imagem.

Opção 2: Usando imagens separadas para cada dispositivo

Para desktop e tablet:

Carregue sua imagem no Banner do Herói. Certifique-se de usar uma imagem com pelo menos 1920 px de largura. Isso garante visuais de alta qualidade em telas maiores.

Para celular:

Passo 1: Escolha a janela de visualização do dispositivo que você deseja otimizar.

Passo 2: Carregue uma imagem otimizada para dispositivos móveis. 

A imagem deve corresponder à proporção largura-altura do banner e ter uma largura mínima de 768 px.

Exemplo: Se a largura do seu banner for 375px e a altura do banner for 500px, a imagem carregada deverá manter a mesma proporção de 375:500, mas ter uma largura de 768px.

• Largura mínima = 768px
• Altura calculada = (768/375)×500=1024px
• O tamanho ideal para este exemplo seria 768×1024 px.