Há diversos sites e blogs na internet que, quando colocam imagens nos seus artigos aparecem a ultrapassar os limites da área de texto. Isso causa um impacto negativo no aspeto visual e dá uma impressão de menor profissionalismo, o que poderá levar a uma quebra no número de visitas do seu blog.

imagens

Se você é daqueles que não sabe ou não quer estar sempre a otimizar e dimensionar imagens corretamente sempre que cria um novo artigo, esta dica é para você! Você pode definir que as imagens fiquem sempre dentro dos limites através de CSS e, com isso, evitar estes pequenos percalços de que falei.

No entanto, perder um pouco de tempo a otimizar as imagens dos seus artigos e dimensioná-las num editor de imagens e não em CSS é uma boa prática que deve ter. Saiba mais sobre como otimizar as imagens do seu site no artigo seguinte:

O que acontece quando as imagens não estão dimensionadas corretamente?

Tal como referi em cima, as imagens não estando dimensionadas podem ultrapassar o limite da área do artigo e, dependendo da estrutura do seu layout, tapar uma parte da sidebar, por exemplo. Naturalmente que estas situações causam um impacto negativo aos seus visitantes que podem perder alguma credibilidade no seu projeto e em tudo o que você fala. Por isso mesmo, o melhor mesmo é prevenir e limitar as imagens à sua área.

 

imagem mal dimensionada

Pode ver pela imagem em cima o que acontece se não tiver cuidado com as imagens do seu site.

Como dimensionar as imagens?

Dimensionar as imagens é uma tarefa muito simples. Para que a imagem não distorça, é necessário que fixe ou a largura ou a altura, deixando o seu par livre. Se apenas limitar um deles, a imagem irá distorcer e, por exemplo, irá ver uma imagem esticada com a altura original e apenas a largura correta.

Por isso mesmo, vamos dividir em duas opções, ou fixa a altura, ou fixa a largura.

Se quiser fixar a altura, tem o seguinte código:

img{height:100%;width:auto;}

Já por outro lado, se quiser fixar a largura, temos:

img{height:auto;width:100%;}

Para que não tenha que adicionar o código a todas as imagens do seu site, pode definir a regra para todas as imagens do seu site colando um dos códigos em cima no seu style.css.

Agora já sabe como pode dimensionar as imagens do seu site e, mesmo que se esqueça de alguma, ela já não ficará visualmente mal para os seus leitores! No entanto, aconselhamo-lo a dimensionar as suas imagens diretamente no seu editor de imagens, para que possa poupar algums bytes e melhorar a velocidade do seu site. Recomendamos-lhe novamente que leia o seguinte artigo:

E para melhorar o posicionamento do seu artigo nas pesquisas do Google, leia:

Até já!