A otimização de imagens não é decoração. É estrutura. Quando tratas a otimização de imagens para a web como uma competência de negócio, fazes menos suposições caras e crias páginas que levam as pessoas a agir.
A otimização de imagens para a web reduz o tamanho dos ficheiros, mantendo uma qualidade visual aceitável. Este capítulo explica o que isto significa em linguagem simples, porque afeta o teu website e o teu marketing e como aplicar isto sem te perderes em jargão. Vais ver também como o tema «SEO de imagens» se encaixa no mesmo quadro. Vamos vê-lo passo a passo.
Otimização de imagens para a web na prática
A otimização de imagens para a web reduz o tamanho dos ficheiros, mantendo uma qualidade visual aceitável.
As imagens pesadas são uma das principais causas de páginas lentas no telemóvel.
Os tipos de ficheiro e as dimensões das imagens devem corresponder ao tamanho de apresentação, não à resolução da câmara.
Como aplicar a otimização de imagens para a web no teu site
Redimensiona as imagens para a largura máxima de apresentação antes de as carregares no teu CMS.
Começa por uma página, como a tua página inicial ou a landing page principal. Corrige primeiro o maior problema e depois leva o mesmo padrão para os outros modelos.
Combina este capítulo com imagens para websites, para a base, e com imagens de fundo para websites, para o passo seguinte neste módulo.
Lista prática que podes usar hoje
Redimensiona as imagens para a largura máxima de apresentação antes de as carregares no teu CMS.
Quando reveres uma página, pergunta-te se a otimização de imagens para a web aparece logo no primeiro scroll no telemóvel. Se não, reordena as secções antes de polires os detalhes.
Guarda capturas de ecrã antes e depois das alterações, para perceberes o que fez a diferença para a otimização de imagens para a web no teu site.
Partilha esta lista com quem atualiza o teu site, para que o tema «SEO de imagens» se mantenha consistente nas páginas novas.
Escolhe uma métrica para acompanhar este mês, como o tempo na página ou os formulários iniciados, para que as alterações de design se liguem aos resultados do negócio e não apenas ao gosto pessoal.
Como este tema se liga à tua marca em geral
As escolhas visuais raramente vivem numa só página. Os tipos de ficheiro e as dimensões das imagens devem corresponder ao tamanho de apresentação, não à resolução da câmara.
As tuas publicações nas redes sociais, os teus emails e as tuas peças impressas devem repetir a mesma hierarquia, as mesmas cores e as mesmas regras tipográficas que usas na web.
Quando os elementos visuais da marca se vão afastando uns dos outros, os clientes sentem uma discrepância subtil, mesmo que não saibam explicá-la.
Usa imagens de fundo para websites para comparares notas com um capítulo relacionado deste módulo.
As imagens pesadas são uma das principais causas de páginas lentas no telemóvel.
Perguntas que muita gente ignora
Termos secundários como SEO de imagens e tipos de ficheiro de imagem ajudam-te a procurar exemplos mais aprofundados e a comparar o teu trabalho com os padrões habituais.
Os tipos de ficheiro e as dimensões das imagens devem corresponder ao tamanho de apresentação, não à resolução da câmara.
Escreve uma alteração de antes e depois que vais testar numa página real esta semana. Pequenos ajustes medidos valem mais do que planos vagos.
Ensinar à tua equipa um vocabulário comum sobre a otimização de imagens para a web reduz os ciclos de revisão com designers e agências.
Ferramentas que facilitam as atualizações visuais
Não precisas de código à medida para resolver muitos problemas de layout e de estilo. Um editor visual permite-te ajustar espaçamentos, cores e tipografia enquanto vês a pré-visualização em telemóvel e em computador.
O WEMASY inclui um criador de websites com edição visual, para publicares alterações sem esperares por um programador a cada pequeno ajuste. Abre o criador de websites quando quiseres aplicar o que aprendeste.
Quando publicares atualizações, volta a ver imagens para websites e fotografia com espaço negativo, para que o módulo continue ligado na tua cabeça.
Já tens uma forma prática de olhar para a otimização de imagens para a web. Usa-a quando reveres o teu site, aprovares materiais de marketing ou briefares um designer. Continua com fotografia com espaço negativo e imagens de fundo para websites para manteres o ritmo neste módulo.
Perguntas frequentes
Quanto tempo leva a melhorar a otimização de imagens para a web?
A maioria das pequenas empresas vê páginas mais claras ao fim de algumas sessões focadas, depois de aplicar o essencial deste capítulo. Começa pela tua página inicial e depois estende as mesmas regras às páginas de serviços e de contacto.
Precisas de um designer para trabalhar na otimização de imagens para a web?
Um designer ajuda em rebrandings complexos, mas muitas correções relacionadas com a otimização de imagens para a web podem ser feitas por ti, quando sabes o que procurar. Usa imagens para websites em conjunto com este capítulo para teres orientações relacionadas.
O WEMASY pode ajudar-te a aplicar a otimização de imagens para a web no teu website?
O WEMASY inclui um editor visual no criador de websites, para ajustares o layout, as cores e a tipografia sem código. Abre o criador de websites para atualizares modelos e pré-visualizares as alterações no telemóvel.
Qual é o erro mais comum quando se trata da otimização de imagens para a web?
As pessoas tentam corrigir tudo de uma vez em vez de uma página de cada vez. Escolhe uma única prioridade, como a legibilidade ou o contraste, e depois vê fotografia com espaço negativo para a melhoria seguinte.
Como é que a otimização de imagens para a web se liga ao SEO?
Uma hierarquia visual clara e uma tipografia legível mantêm os visitantes mais tempo na página, o que reforça os sinais de envolvimento que os motores de pesquisa acompanham. Combina as correções de design com uma boa estrutura de conteúdo para obteres os melhores resultados.
Depois da otimização de imagens para a web, o que deves aprender a seguir?
Continua com imagens para websites e fotografia com espaço negativo neste livro, para construíres um sistema visual completo para a tua marca online.