Como melhor apresentar suas imagens online

Qualquer que seja o tipo de site que você tenha, é provável que seu conteúdo seja uma mistura de texto e imagens. Para fotógrafos, artistas e outros criativos, as imagens em seu site provavelmente formam a parte mais importante do seu conteúdo e, portanto, é vital saber apresentá-las adequadamente.

Claro, você pode ir em frente e fazer upload de fotos e gráficos através do painel do WordPress sem pensar mais, mas se você quiser ter certeza de que seu site está carregando rápido, fácil de ler e otimizado para mecanismos de pesquisa, você faria bem em ler isso pequeno guia de práticas recomendadas quando se trata de usar imagens em seu site.

Salvar e fazer upload de imagens

Embora o WordPress tenha tornado possível fazer upload de imagens enormes diretamente do seu computador e exibi-las automaticamente para caber na largura do seu blog, não recomendamos que você faça upload de imagens não processadas.

Qualquer navegador da Web é capaz de exibir imagens em um tamanho menor do que realmente são, se assim for instruído no código, mas isso não leva a uma redução no tamanho real do arquivo. Uma imagem de 500kb exibida em 50% de sua largura e altura total ainda terá 500kb. Os blogueiros que não são experientes com HTML e WordPress podem supor que, como suas imagens não aparecem grandes na tela, isso significa que o download será rápido, mas nem sempre é o caso.

Para verificar o tamanho da imagem, clique com o botão direito do mouse ou clique com a tecla Control pressionada em uma imagem em seu blog e escolha visualizar/abrir imagem no menu (o texto varia um pouco dependendo do navegador que você está usando). Se a imagem que abre for muito maior do que a que você vê no seu blog, isso significa que suas imagens não estão dimensionadas corretamente.

Se você tem um blog com muitas imagens e não redimensiona suas imagens antes de carregá-las, o tamanho combinado de sua página da web pode ser desnecessariamente grande.

Vale a pena gastar alguns minutos extras para redimensionar e compactar suas imagens antes de enviá-las. Isso pode ser feito facilmente no Photoshop ou em qualquer outro software de edição de imagem que você use. Você também pode usar ferramentas online gratuitas como o PicMonkey e o Image Optimizer do Dynamic Drive.

O redimensionamento manual das imagens oferece controle total sobre a compactação e reduzirá bastante o tempo de upload, mas, se desejar, você também pode optar por usar as imagens redimensionadas que o WordPress gera automaticamente a cada upload. Ao inserir uma imagem em uma postagem, você tem a opção de inserir imagens em tamanho real, grande, médio ou miniatura. Você pode editar esses tamanhos de acordo com o design do seu blog em Configurações > Mídia . Esteja ciente de que, se você escolher esse método, suas imagens originais em tamanho real estarão disponíveis para qualquer pessoa baixar gratuitamente em seu site - não é a melhor opção para fotógrafos e ilustradores!

Otimização de imagem e usabilidade

Além de garantir que suas imagens estejam dimensionadas e otimizadas adequadamente para o tempo de carregamento da página, você também deve certificar-se de que elas estejam devidamente marcadas para SEO (Search Engine Optimization). O SEO torna mais fácil para os mecanismos de pesquisa encontrar e indexar seu site e um site que utiliza boas técnicas de SEO provavelmente aparecerá mais alto nas páginas de resultados do mecanismo de pesquisa quando comparado a um site não otimizado.

Uma discussão completa sobre SEO vai além do escopo deste artigo (muitos temas do WordPress são amigáveis ​​para SEO imediatamente), mas otimizar suas metainformações de imagem é uma maneira fácil de impulsionar seu SEO no site e pode ajudar as pessoas a encontrar seu site por meio da pesquisa de imagens do Google e de outros mecanismos de pesquisa baseados em imagens.

A marcação adequada de suas imagens também é importante para a usabilidade, principalmente se as imagens ilustrarem informações importantes. No caso de uma imagem não carregar ou não poder ser vista (seja devido a uma conexão lenta com a Internet, porque as imagens estão desativadas ou para usuários com deficiência visual), é necessário fornecer uma descrição de texto alternativa.

1. Nome do arquivo

Em primeiro lugar, quando você salvar suas imagens, certifique-se de que elas tenham um nome de arquivo descritivo. Deixar suas imagens nomeadas como IMG_013445.jpg ou o que quer que elas sejam quando saem de sua câmera não dará aos mecanismos de busca nenhuma pista sobre o que elas estão retratando. Use palavras-chave descritivas apropriadas separadas por hífens, por exemplo, children-playing-ocean.jpg

2. Texto alternativo

Quando você carrega sua imagem por meio do Media Uploader, o WordPress oferece vários campos para descrições de arquivos. Embora estes possam ser deixados em branco (e muitos blogueiros fazem para economizar tempo), quanto mais campos você preencher, melhor para SEO e usabilidade. o mais importante deles é o texto alternativo, abreviação de “texto alternativo”.

Este é o texto que é exibido quando as imagens são desativadas ou não podem ser exibidas por algum outro motivo, portanto, deve funcionar como uma descrição do que é a imagem. Os mecanismos de pesquisa também lêem esse texto e o usam para decidir sobre o que é a página e onde colocar seu site nas listagens. Se você é um fotógrafo de casamento no Texas, por exemplo, você deve certificar-se de que o texto alternativo de todas as imagens do seu blog inclua muito texto descritivo, incluindo palavras-chave como “fotógrafo de casamento” e “fotografia de casamento Texas”. Embora esteja avisado de que, como no texto do seu blog, é importante não colocar palavras-chave em excesso nas descrições das imagens.

Pode ser tentador copiar e colar o mesmo texto alternativo em todas as suas imagens para economizar tempo, mas, idealmente, cada uma das suas imagens deve ter um texto alternativo exclusivo que a descreva corretamente.

3. Título da imagem

O título da imagem é semelhante ao texto alternativo, mas tem um propósito ligeiramente diferente. Em vez de fornecer informações alternativas à imagem, o título deve fornecer informações adicionais . O título da imagem é o texto de “dica de ferramenta” que aparece em uma caixa pop-up quando você passa o mouse sobre uma imagem. Esse texto é importante tanto para usabilidade quanto para SEO e deve fornecer informações rápidas e relevantes sobre a imagem ou para onde ela está vinculada.

O título da imagem deve ser ligeiramente diferente do texto alternativo e, novamente, deve ser exclusivo para cada imagem.

4. Legenda da imagem

Uma legenda é um texto que geralmente é exibido abaixo da imagem e fornece uma descrição adicional ou texto de suporte. O uso de legendas é opcional, mas pode ser útil para fornecer informações adicionais sobre sua imagem ou citar a fonte se você estiver usando imagens de outro site. Pense na legenda como uma etiqueta informativa em uma exposição de galeria de arte.

Vinculação de imagens

Por padrão, quando você insere uma imagem em uma página ou post, o WordPress irá vinculá-la a uma nova página com apenas a imagem nela. Não há nenhuma razão real para isso e pode até ser prejudicial para o seu site em termos de SEO.

Também pode ser um grande problema de usabilidade – se um usuário passa o mouse sobre sua imagem e vê que é um link, ele pode presumir que é um link para uma página com informações úteis. Clicar nessas páginas somente de imagem é uma perda de tempo para o visitante e pode até fazer com que você perca visitantes.

Para resolver esse problema, basta selecionar “Nenhum” como o campo “URL do link” quando estiver carregando uma imagem no WordPress, a menos que você realmente queira vinculá-la a uma página específica. Se você fizer isso, certifique-se de usar o título ou a legenda da imagem para indicar para onde a imagem está vinculada.

Posicionamento da imagem

Além de garantir que suas imagens sejam otimizadas para SEO e fáceis de usar, também é importante pensar em como elas se encaixam no seu texto por motivos estéticos e de legibilidade.

Você pode preferir usar imagens embutidas (menores que suas colunas principais para que o texto as envolva), imagens de largura total ou uma combinação de ambas. O que você deve evitar é usar imagens independentes que não sejam de largura total ou uma série de imagens de larguras variadas, pois isso parece pouco profissional e pouco atraente.

Para fazer isso, você deve garantir que suas imagens de retrato tenham a mesma largura que suas imagens de paisagem. Fique de olho na altura de suas imagens — se forem muito altas, podem transbordar em telas de resolução menor. Isso fará com que os usuários tenham que rolar para ver a imagem completa, o que deve ser evitado. Se suas imagens forem muito grandes para serem exibidas na largura total no formato retrato, você poderá fazer uma colagem de duas ou mais imagens retrato lado a lado.

As imagens inline podem fornecer um pouco de variedade ao seu conteúdo e ajudar a quebrar grandes paredes de texto. Eles também são uma boa opção para imagens menores ou estreitas que não são adequadas para serem exibidas na largura total.

Quando você estiver usando imagens em linha, novamente é melhor decidir sobre uma largura definida para consistência visual. Isso não deve ter mais do que a metade da largura da coluna de texto, pois imagens mais largas do que isso comprimirão o texto demais e dificultarão a leitura.

As imagens inline devem sempre ser alinhadas à direita e não à esquerda do texto, para não quebrar a margem esquerda e reduzir a legibilidade.

Embeleze seu blog com imagens

Usar imagens é importante para criar um blog interessante e visualmente atraente e elas são ainda mais vitais quando se trata de comercializar seu negócio criativo.

Siga as dicas que abordamos neste artigo para imagens bem otimizadas e bem apresentadas e seu site não apenas ficará bonito, mas também carregará rapidamente, será um prazer ler e será mais atraente para os mecanismos de pesquisa. Boa publicação!