Ao atualizar imagens de um site, a exibição em dispositivos móveis afeta diretamente a experiência do usuário. Para iniciantes, preparar os seguintes itens com antecedência pode evitar problemas comuns como imagens borradas, carregamento lento e exibição incompleta.
1. Confirmar tamanho e proporção das imagens
A largura da tela de dispositivos móveis geralmente é de 375-414px (pixels físicos), mas é necessário considerar a densidade de pixels do dispositivo (DPR). Recomenda-se preparar os seguintes tamanhos:
- Imagens de tela cheia: largura mínima de 750px (375px × 2), altura ajustada conforme a proporção.
- Imagens dentro do conteúdo: largura recomendada de 90% da largura da tela do celular, cerca de 340-370px, usando imagem 2x de 680-740px.
- Ícones ou imagens pequenas: preparar com o dobro do tamanho real de exibição, por exemplo, se exibir 50×50px, preparar 100×100px.
Evite redimensionar imagens grandes originais diretamente, pois isso desperdiça tráfego; também não use imagens pequenas esticadas, que causam borrão.
2. Escolher o formato de imagem adequado
Priorize a velocidade de carregamento e compatibilidade em dispositivos móveis:
- JPEG: adequado para fotos com cores ricas, alta taxa de compressão.
- PNG: adequado para ícones ou gráficos simples que precisam de fundo transparente.
- WebP: 25%-35% menor que JPEG, suporta transparência, mas alguns dispositivos antigos não suportam; recomenda-se fornecer um fallback em JPEG.
Para iniciantes, recomenda-se preparar versões JPEG e WebP, usando código para verificar o suporte do navegador. Se tiver limitações técnicas, use JPEG primeiro e otimize depois.
3. Comprimir imagens para controlar o tamanho do arquivo
Ambientes de rede móvel variam; arquivos de imagem grandes causam carregamento lento. Recomenda-se comprimir para os seguintes intervalos:
- Imagem grande da página inicial: abaixo de 200KB, idealmente abaixo de 100KB.
- Imagens de conteúdo: abaixo de 100KB, cerca de 50KB é ideal.
- Ícones: abaixo de 10KB.
Use ferramentas online como TinyPNG ou Squoosh para compressão, mantendo qualidade visual aceitável.
4. Escrever texto alternativo (alt) para imagens
Cada imagem em dispositivos móveis precisa de um atributo alt para mecanismos de busca e tecnologias assistivas (como leitores de tela). O texto alt deve descrever brevemente o conteúdo da imagem, por exemplo, "foto da área de recepção da empresa" em vez de "imagem1". Não é necessário empilhar palavras-chave; descreva naturalmente.
5. Preparar versões com diferentes resoluções
A densidade de tela de dispositivos móveis varia muito. Recomenda-se preparar pelo menos duas versões de resolução para cada imagem:
- 1x (resolução padrão): adequada para telas comuns.
- 2x (alta definição): adequada para telas Retina e outras de alta definição.
Se o tráfego for alto, considere versões 3x. Use CSS ou o atributo srcset para especificar diferentes versões, permitindo que o navegador carregue conforme necessário.
6. Testar a exibição das imagens em dispositivos móveis
Antes de atualizar, teste em um celular real ou simulador de navegador:
- A imagem é exibida completamente, sem esticamento ou corte distorcido.
- A velocidade de carregamento é aceitável; use o painel de rede do Chrome DevTools para verificar o tempo.
- Ao clicar na imagem, ela redireciona para o link esperado (se aplicável).
Se houver diferença de cor significativa entre iOS e Android, ajuste o perfil de cor para sRGB.
7. Fazer backup das imagens originais e registrar alterações
Iniciantes devem manter as imagens originais de alta resolução para futuras modificações. Registre o nome, tamanho, taxa de compressão e local de upload de cada imagem atualizada para facilitar a solução de problemas.
Seguindo o conteúdo acima, o processo de atualização de imagens em dispositivos móveis será mais suave, melhorando a experiência de navegação do usuário. Se tiver dúvidas sobre detalhes técnicos, consulte o provedor de serviços de construção de sites ou a documentação oficial.
