Cristais de ametista sobre fundo branco, otimizados para uso em sites.
  • Save

Como otimizar as imagens para o site em 3 passos

Quando estamos a criar um site, uma das primeiras coisas que pensamos é nas imagens que esse site vai ter. No entanto, um dos maiores erros que podemos fazer é usar as imagens sem as otimizar para a web.

Porque devemos otimizar as imagens para o site

Um site onde as imagens não são otimizadas pode-se tornar lento, e por vezes impraticável de se usar! Isto não só é mau para os visitantes desse site, como é mau para o ranking nos motores de pesquisa. Um dos fatores usados para classificar um site é o peso das páginas, onde são verificados os tamanhos das imagens, e o seu peso (o tamanho que o ficheiro ocupa, e por consequência, o tempo que vai demorar a carregar).

Como preparar as imagens para a web em 3 passos

Formatos

Existem imensos formatos de imagem disponíveis, mas nem todos são adequados para colocar num site. Devemos ter o cuidado de escolher formatos que mantenham a qualidade de imagem, mas cujo tamanho final do ficheiro seja o mais pequeno possível. Conseguimos este equilíbrio com o formato JPG, para fotografias e imagens que não  necessitem de transparência, ou com o formato PNG para imagens que necessitemos que tenham transparências.

Como otimzar imagens para site imagem de uma ametista roxa Ana Sofia Santana Tech With a Pointy Hat
  • Save

Resolução ou Tamanho

A resolução de uma imagem, é o seu tamanho. Quando se diz que uma imagem tem resolução de 640 por 400, ou 640×400, que dizer que o seu tamanho ocupa um rectângulo com 640 pixels de largura, e 400 pixels de altura. 

Um pixel é o menor ponto que forma uma imagem digital.

Wikipedia

Quando estamos a criar imagens para colocar num site, é importante saber qual o tamanho que vai ser utilizado em cada local. Por exemplo, se a imagem é o ícone do site, tipicamente terá uma resolução de 512×512. É importante que a imagem utilizada para esse local em específico, seja do tamanho 512×512 e não de outro tamanho qualquer. Não só porque se forem imagens maiores irão ocupar maior espaço, como sendo do tamanho correcto não necessitam de ser redimensionadas por intermédio do código do site.

O tamanho correcto de cada imagem irá depender do tema WordPress utilizado, e do local onde a imagem vai ser colocada. Cada imagem deve ser criada de acordo com o local onde vai aparecer.

Otimização

Depois de se criar as imagens no formato e no tamanho correcto, há um último passo que não deve ser descurado. Por muito que os programas de criação de imagens permitam a sua otimização, há que passá-las por um último passo.

Existem vários sites para otimização das imagens, eu costumo utilizar o TinyPNG, que permite a otimização de imagens nos formatos JPG e PNG. O que este site faz é comprimir as imagens ao máximo, sem diminuir a sua qualidade, criando ficheiros otimizados e adequados para o teu site.

Conclusão

Usar imagens num site não só cria resultados visualmente agradáveis, como é essencial para que o site se torne mais fácil de utilizar. Já o ditado diz, que uma imagem vale por 1000 palavras! Mas essa mesma imagem pode também ser a razão pela qual as pessoas fogem de um site, ou os motores de pesquisa lhe darem menor classificação! Um site com imagens mal otimizadas pode tornar-se lento e desinteressante. É, por isso, essencial que se usem imagens no formato e tamanho corretos, e otimizadas para a web!

Um website de sucesso não se consegue com planeamentos “em cima do joelho”. São muitas peças que têm que ser montadas, em que a parte visual é apenas uma (e não é a mais importante).

Nesta checklist mostro-te quais os elementos em que tens que pensar, ainda antes de pensar na tecnologia e no design to teu site, e que vão definir o sucesso do teu site, e do teu negócio!

Recebe esta checklist website sem stress, updates, ofertas e informações relevantes. Respeitamos a tua privacidade.

1 pensamento acerca de “Como otimizar as imagens para o site em 3 passos”

  1. Pingback: Onde encontrar imagens para o website ⋆ Tech With a Pointy Hat

Deixe um Comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

Copy link