Introdução#

A otimização de imagens é um fator crucial para garantir que suas páginas carreguem rapidamente e ofereçam uma boa experiência ao usuário. No construtor de páginas da Rockty, é essencial que as imagens sejam configuradas corretamente para garantir responsividade e performance.
​

Neste tutorial, abordaremos como otimizar suas imagens para uso no construtor da Rockty e melhorar o desempenho geral da sua página.

1. Limite de Tamanho das Imagens#

No construtor da Rockty, o tamanho máximo permitido para imagens é de 1 MB. Para garantir que suas imagens carreguem rápido, é ideal manter os arquivos bem comprimidos.

💡 Dica Importante: Utilize ferramentas de compressão de imagem que não causem perda de qualidade, como o TinyPNG ou Squoosh, antes de fazer o upload.

2. Formatos Recomendados#

O formato WebP é altamente recomendado para uso no construtor de páginas. Ele oferece compressão eficiente com qualidade visual elevada, garantindo que suas páginas carreguem mais rapidamente sem sacrificar a qualidade das imagens.

💡 Dica: Embora outros formatos como JPEG e PNG sejam comuns, o WebP é o preferido para otimização de performance. O Google PageSpeed penaliza o uso de formatos mais antigos.

📌 Observação: É importante que você adapte a imagem otimizada para todas as versões da página (desktop, tablet e mobile). Não adianta otimizar para desktop e usar um formato mais pesado no mobile, por exemplo.

3. Ajustes Manuais no Construtor#

O construtor da Rockty permite que você ajuste diversos aspectos das imagens de forma nativa, incluindo:

• Preenchimento e dimensões (largura e altura).

• Para imagens de fundo em seções, colunas e linhas, você pode configurar o:

  • Tamanho: Auto, expandido, ou contraído.

  • Alinhamento: Centralizado ou alinhado de forma específica.

  • Repetição: Ativar ou desativar a repetição.

  • Background: Fluido ou Fixo.

💡 Dica: Ao ajustar o background ou o tamanho da imagem, pense na responsividade e faça os ajustes manuais para cada versão da página (desktop, tablet e mobile).

4. Redimensionamento e Edição Externa#

É comum que os usuários façam upload de imagens que têm espaços ou margens desnecessárias, que impactam o ajuste no construtor. Para evitar isso, redimensione e edite as imagens corretamente antes de subi-las ao construtor.

💡 Dica Importante: Se a imagem possui elementos centrais importantes, certifique-se de cortar qualquer espaço desnecessário ao redor. Isso facilita o alinhamento e o ajuste no construtor, evitando problemas visuais e de desempenho.

5. Boas Práticas de Otimização#

Aqui estão algumas práticas recomendadas para garantir a melhor performance no uso de imagens:

• Compressão sem perda: Certifique-se de comprimir suas imagens para menos de 1 MB sem perder a qualidade visual.

• Tamanho correto: Ajuste as dimensões da imagem de acordo com o layout da página para evitar redimensionamentos excessivos pelo navegador, o que pode impactar negativamente o tempo de carregamento.

• Responsividade: Revise cada versão da página e carregue imagens otimizadas para desktop, tablet e mobile separadamente.

📌 Observação: Cada versão da página pode exigir imagens com tamanhos e configurações diferentes para maximizar a performance e garantir que a visualização seja perfeita em qualquer dispositivo.

Considerações Finais#

Imagens bem otimizadas são fundamentais para garantir uma experiência de usuário rápida e fluida. Ao seguir essas dicas, você pode garantir que suas páginas no construtor da Rockty tenham um excelente desempenho e sejam mais eficientes para todos os visitantes.

Precisa de Ajuda?#

Se tiver dúvidas ou precisar de suporte adicional, não hesite em entrar em contato com nosso suporte. Nossa equipe está sempre pronta para ajudar você a aproveitar ao máximo a Rockty!