8 erros de imagem a evitar no seu site
Imagens grandes, galerias e designs pesados são uma grande tendência no design de sites. Para aproveitar ao máximo essa estética, verifique se todas as imagens no seu site se ajustam à exibição e representam bem sua marca.
Há muitos erros que os designers cometem ao longo do caminho, desde problemas técnicos até a qualidade da imagem. Mas você não precisa cair em uma dessas armadilhas ao trabalhar com imagens de sites. Aqui, veremos os erros de imagem e como corrigi-los ou evitá-los completamente. (Como bônus neste post, apresentamos uma coleção de imagens divertidas e ótimas da coleção de objetos recentes do Death to the Stock Photo.)
Erro: Upload de arquivos enormes
As imagens em tamanho real são lindas (e necessárias) quando se trata de trabalhos de impressão, mas podem apresentar problemas quando se trata da web. Imagens grandes carregam lentamente; tempos de carregamento lentos fazem com que os usuários abandonem seu site.
Infelizmente, é uma armadilha fácil de cair. Muitos programas de back-end permitem o upload de imagens grandes e, a menos que você esteja prestando atenção, talvez nem saiba que os arquivos estão sendo carregados em tamanhos incríveis. Imagens diferentes em usos diferentes requerem especificações de imagem diferentes. Consulte o guia da marca ou do site para saber quais são as dimensões das áreas comuns de imagem em seu site.
Ao pensar em imagens, o tipo de arquivo também é importante. Por favor, não use tiff para a web. Os formatos de arquivo mais comuns e utilizáveis são PNG (imagens geradas por computador, como gráficos ou logotipos ou quando a transparência é necessária), JPG (fotos) ou GIF (animações).
Solução: A solução simples é dimensionar as imagens para a dimensão do quadro em que elas aparecerão com uma resolução adequada da Web. Mas há um pouco mais. Salve cada imagem para uso otimizado em seu site e para compartilhamento social. (A largura de uma imagem do Pinterest, por exemplo, é de 600 pixels; se você deseja que a imagem seja compartilhável, deve ser desse tamanho.)
Erro: Esquecer de Cortar
O uso de arquivos enormes pode atrapalhar um site, assim como o uso de imagens em tamanho cheio que estão ocultas na tela. O corte ajuda a mostrar os recursos visuais que você deseja que os usuários criem um ponto focal definido que pode não estar lá com uma imagem em tamanho cheio.
A falta de corte de imagem também pode criar uma pilha de elementos visuais menos que dinâmica, todos com as mesmas formas e proporções. O uso de vários cortes e formas interessantes para imagens pode adicionar intrigas visuais a um site.
Solução: corte as imagens no tamanho ou dimensão apropriada antes de fazer o upload, para que todas as imagens sejam renderizadas conforme desejado.
Erro: esquecendo-se das miniaturas
Existem várias maneiras de lidar com o dimensionamento e redimensionamento de miniaturas. (Muitos dos quais dependem dos recursos de back-end, portanto, não discutiremos os méritos de cada um deles.) Mas você precisa se lembrar de atualizar e prestar atenção às menores imagens do seu site.
Com muita freqüência, os designers esquecem que miniaturas, visualizações de imagens e favoritos precisam ser atualizados com as alterações no conteúdo do site.
O outro grande erro? Usando uma imagem ruim no tamanho de miniatura, pois é o maior possível. Se a imagem estiver ruim, apenas não a use. Nenhuma imagem é melhor que uma imagem ruim.
Solução: remova miniaturas ou visualizações antigas quando as imagens mudarem e se seu favicon estiver atualizado.
Erro: nomes não pesquisáveis e metadados
As câmeras digitais salvam muitas informações em vários meta-campos que não são traduzidos para a web. Retire essas informações das imagens e troque-as por dados utilizáveis. Os mecanismos de pesquisa não conseguem ler o conteúdo das imagens; portanto, para torná-las pesquisáveis, as imagens devem incluir palavras descritivas no título, tags e conteúdo circundante.
Exemplos de nomes de imagens ruins:
- picture1.jpg
- DSCN00023.jpg
- glasses% and% watch.jpg
Um nome de imagem muito melhor inclui algumas palavras descritivas, como glasses-and-watch-and-plant.jpg. A referência da etiqueta para a imagem deve incluir uma descrição semelhante, como "itens em um balcão, relógio e planta". (E não se esqueça de escrever as palavras corretamente.)
Solução: use convenções de nomenclatura fortes para todas as imagens do site e emparelhe imagens com o conteúdo relacionado a cada visual. Os nomes das imagens devem incluir palavras descritivas separadas por hífens.
Erro: descamação ou alongamento inadequado
Nada parece mais estranho do que uma pessoa com o rosto esticado ou uma imagem inadequadamente dimensionada. O alongamento ou a escala não proporcional de imagens (que podem ser especialmente comuns quando ocorre uma alteração no tema ou no back-end) é um não-não. Toda imagem precisa ser dimensionada com uma proporção de 1 para 1, vertical e horizontalmente. Qualquer outra coisa danifica a integridade da foto.
Solução: observe todas as proporções de dimensionamento de perto e audite seu site periodicamente.
Erro: não planejando vários tamanhos de dispositivo
As estruturas de design responsivas vêm com algumas implicações para as imagens. A mudança de forma ou tamanho de dispositivo para dispositivo ou por orientação torna importante determinar como as imagens serão renderizadas entre dispositivos.
Uma das práticas mais comuns é usar consultas de mídia para planejar essas alterações por dispositivo. O CSS permite que estilos específicos sejam aplicados às imagens com base nas dimensões da tela e ajuda as imagens a renderizar-se bem sem "interromper" o design.
Solução: use consultas de mídia para estruturas responsivas e teste a renderização de imagens em vários dispositivos.
Erro: ignorando telas da retina
Houve um tempo, não muito tempo atrás, em que uma imagem padrão de 600 pixels de largura a 72 ppi era tudo o que você precisava para um site. Mas as telas estão melhorando a um ritmo em que esse não é mais o caso.
Dependendo da estrutura, todas as imagens podem incluir várias imagens salvas para diferentes tamanhos e resoluções de tela, incluindo telas de retina. (A resolução das telas da retina pode variar de acordo com o dispositivo, mas são significativamente mais altas que as telas padrão.)
Solução: inclua arquivos e consultas de mídia especificamente para exibições de retina. (Os truques CSS podem ajudar.)
Erro: Arte usada em excesso ou genérica
A fotografia de estoque pode ser uma ótima solução rápida, mas pode levar a algumas conseqüências não intencionais. As fotos usadas em muitos sites ou com uma aparência genérica não criarão um visual que estabeleça uma conexão com os usuários. (Você não quer que seu site se pareça com todos os outros por aí?)
Se você planeja usar fotografias, considere imagens com as quais possa editar ou trabalhar de maneiras interessantes. Evite imagens que se pareçam com coisas que você já viu em outros lugares (confira as imagens para todos os concorrentes ou sites semelhantes).
Solução: considere contratar um fotógrafo para criar um ótimo arquivo de imagem específico para o seu site. Inclua recursos visuais relacionados à sua empresa ou marca e reflita seu site da maneira certa.
Conclusão
Selecionar e criar imagens para um projeto de site pode ser uma das partes mais divertidas do processo de design. Tome cuidado com todas as imagens e pixels para garantir que seu site funcione bem e inclua imagens que envolvam os usuários.
Você tem dicas ou truques quando se trata de usar imagens para projetos de sites? Gostaríamos muito de saber o que são. Compartilhe-os nos comentários.
