Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

Como usar imagens em sites HTML de maneira correta

Agora que já vimos como usar a tag img para exibir imagens, como mudar altura e largura de uma figura e até mostramos como alinhar imagens e textos, em nossa apostila de HTML, vamos fazer algumas considerações finais sobre o uso de imagens em nossos sites.

Vamos falar de regras básicas e muito importantes, que todos os Webmasters devem ter conhecimento.
Daremos algumas dicas de SEO (Search Engine Optimization) importantes, que fará você se beneficiar do uso de imagens para conseguir boas visitas e ficar bem visto pelo Google.

Descreva sua imagem: nome do arquivo, title e alt

Se não colocar um nome otimizado, a imagem vai aparecer do mesmo jeito? Sim.
Se não colocar um título (atributo title), a imagem vai aparecer? Sim, também vai.
E se não preencher o atributo alt ? A imagem será exibida do mesmo jeito.
Então, para quê descrever e dar informações em texto para imagens?
Simples: porque o Google usa esses dados como critério para o rankeamento nos resultados de busca, e as imagens são uma importante aliada de todo Webmaster que ter sites bem visitados e de sucesso.

Vale lembrar que estas informações podem ser uma arma importante e poderosa para o sucesso de sua página. Você deve usar sempre suas keywords no título, meta tag descritption, ao longo de seu artigo e nas imagens. Isso mesmo, use suas keywords nas imagens.
Sempre que possível use uma imagem, mesmo que seja um simples desenho, um bonequinho qualquer ou modelos sorridentes.

Imagine que quer escrever sobe velas de barcos.
Fale sobre as velas no título do artigo: "Conheça as mais belas velas de navios".
Deixe claro sobre as velas na description: "Neste artigo iremos mostrar os principais tipos de velas encontradas em navios ao redor do mundo".

E aqui vem o que importa, desta seção sobre imagens: coloque o nome da imagem relacionado com o conteúdo da imagem "Vela-A-do-navio-x.png", "Vela-de-um-barco-no-Brasil.png".

Use também no atributo title da tag img "Vela tal, do navio tal, de 1500"

Use sempre, também, o atributo alt para fornecer uma descrição mais completa e reforçar o tema do artigo (velas de navios).

Além de ajudar para se posicionar bem no Google e receber muitas visitas, essas informações são importantes para o Google saber exatamente daquilo que você está falando, afinal, se alguém digitar "velas" no Google Imagens, poderá ter dois tipos de resultados:

Como usar imagens otimizadas para SEO
Usando SEO em imagens









E agora, como Google decide como vai classificar sua imagem de vela, como velas de uma caravela ou uma vela, daqueles que acendem em igreja?
Ora, pelo contexto. E isso inclui o artigo, os atributos title e alt e as palavras-chave de conteúdo.

Onde conseguir imagens - Direitos de imagem

Ok, já mostramos e convencemos você da importância de se usar imagens, bem como otimizá-las para SEO, através do preenchimento de atributos e usando nomes nos arquivos que façam sentido.
E as imagens, onde conseguir?

"Google Imagens, ué" é o que você provavelmente pensou. Mas aí é que a maioria cai em um grande erro, erro este que pode se tornar até criminal.

Já ouviu a TV, naqueles sites sobre famosos, de alguém que processou outro por direito de imagem?
Pois é, assim como fazer um site, escrever um livrou, artigo ou compor uma música, tirar uma foto ou criar uma imagem também faz do autor desse ato seu dono legal.

Ou seja, não se pode sair usando imagens do Google. O fato delas aparecerem lá não significa que você está livre para usar. Para isso, você terá que identificar o dono da foto e pedir autorização, ou pagar para ter direito de imagem.

Porém, pesquisando na internet, é fácil encontrar sites que ofertam imagens para uso geral.
O mais conhecido deles, que é o que o curso HTML Progressivo usa é o:

Algumas imagens exigem que você cite a fonte da foto, outras não, mas são todas liberadas.
Isso pode parecer 'chato', mas acredite: os donos das imagens podem te processar judicialmente por isso, ou mesmo denunciar para o Google e ele te punir.

Além do mais, assim como queremos que as pessoas respeitem quem cria conteúdo para internet, temos que respeitar o trabalho de quem tira fotos e das pessoas que criam imagens digitais.



HTML 4.01, HTML 5, CSS e XHTML

Não há como negar, vivemos uma época um pouco conturbada.
Durante anos foi usado e recomendado o uso do HTML 4.01, porém muitas tags já estão obsoletas (deprecated) e recomenda-se não usar.
Porém, zilhões e zilhões de sites ainda usam e os navegadores ainda aceitam tais tipos de tags.

Boa parte do que é ensinado nesta seção básica de HTML é sobre HTML 4.01 unicamente, e muita coisa já está sendo deixada de lado, principalmente para ser feita em CSS.
Outras coisas estão lentamente mudando para o HTML 5 e outras em XHTML.


A pior parte é: está tudo, sempre, em mudança e é complicado saber ao certo o que é mais recomendável para uso ou não. Alguns dizem que fazer isso e aquilo é o certo, mas quando você faz, o navegador X não conhece ou fica estranho no Y.

Este é o atual mundo do desenvolvimento Web em 2013. Porém as mudanças são por bons motivos, pois a internet está revolucionada e uma nova maneira de se comunicar está vingando.
O importante é sempre se manter informado, frequentar fóruns e grupos de HTML, CSS e outras linguagens.

Boa parte do que foi usado seção atual de nosso curso, sobre imagens e HTML, é feito, a prática, totalmente com CSS. Porém, como as coisas estão em fase de transição de um antigo para um novo modo, nós do HTML Progressivo achamos por bem explicar tudo para você, desde o HTML 4.01, passando pelo XHTML, CSS até HTML 5.

O estudo das 'antigas' do HTML é essencial para você se tornar um bom desenvolvedor Web.
Aos poucos iremos evoluindo e transitando para o CSS.

Um comentário:

Anônimo disse...

title e alt também são uteis em caso de acessibilidade para programas de deficientes visuais por exemplo para identificar sobre a imagem.

Tutoriais de HTML e CSS