Performance
Qual o tipo de mídia usar no meu site?
10 de maio de 2025
|
12 min
|
Por Lucas Bastos

Índice
Índice
A plataforma
A Retail Hub tem como um dos seus principais objetivos proporcionar aos clientes ampla autonomia na gestão do front-end. Um aspecto essencial da composição de uma interface é o uso de mídias — sejam imagens, GIFs ou vídeos — que desempenham um papel fundamental na experiência visual e na comunicação eficaz com o usuário.
No entanto, a presença dessas mídias na interface não deve comprometer a fluidez da navegação. Uma gestão eficiente de imagens, GIFs e vídeos é essencial para manter um equilíbrio entre estética e desempenho, garantindo um carregamento rápido e uma experiência otimizada para o usuário. Pensando nisso, exploraremos agora as melhores práticas para que seu e-commerce ofereça alta qualidade visual sem sacrificar performance.
Compressão
Com o objetivo de impulsionar a performance, a plataforma Retail Hub possui uma tecnologia de compressão automática do conteúdo que vai ser utilizado na interface. A compressão padrão corresponde a 75% do modelo original, mas o usuário pode alterar este valor nos componentes de mídia e até desativar a funcionalidade.

Formato
A plataforma Retail Hub aceita múltiplos formatos, são eles:

A plataforma Retail Hub calcula o peso de todos os formato para a imagem e adota a que será mais leve com base na imagem enviada. Recomendamos o envio de JPG como imagem original.
Não há diferença entre JPG e JPEG, ambos representam o mesmo formato de imagem criado pelo Joint Photographic Experts Group (JPEG). Porém, opte sempre por usar JPG por questões de compatibilidade com sistemas antigos do windows.
Exibe uma versão inicial da imagem com baixa qualidade e, conforme mais dados são carregados, a qualidade melhora progressivamente. Isso proporciona uma experiência visual mais fluida, pois o usuário vê a imagem completa desde o início, mesmo que ainda esteja carregando.
Além disso, é praticamente obrigatório que as imagens sejam salvas nesse formato progressivo, especialmente em plataformas voltadas para e-commerce, como a Retail Hub. Isso garante um carregamento mais rápido, evitando que o usuário veja apenas partes da imagem enquanto o restante ainda está sendo processado. O uso de JPEG progressivo melhora a experiência do consumidor, tornando a navegação mais dinâmica e eficiente.

Apesar de a plataforma aceitar vídeos diretamente, é fortemente recomendado utilizar plataformas especializadas de streaming como YouTube ou Vimeo para hospedagem. Essas ferramentas oferecem melhor desempenho, controle de qualidade e carregamento rápido, além de evitar custos adicionais com tráfego de dados, que podem ocorrer ao servir arquivos grandes diretamente pela plataforma.
Cores
Nesta seção, vamos abordar como a cor interage com peso das imagens, impacto dos degradês, formatos de cor adequados para web e as melhores práticas para garantir qualidade sem comprometer a performance da plataforma.
Relação entre tamanho da mídia x cor
A quantidade de cores em uma imagem influencia diretamente o tamanho do arquivo. Quanto mais complexas forem as variações de cor e tonalidade, maior será o tamanho da imagem, o que pode afetar o carregamento da página.
Os degradês podem ser visuais atraentes, mas exigem cuidado na implementação, pois afetam o desempenho. Evite degradês com múltiplas transições de cor, pois aumentam a complexidade da renderização e podem tornar o carregamento mais lento.