Um cenário comum on-line é que você tem uma imagem em seu site que deseja vincular. Talvez você esteja codificando uma página em seu site e deseje adicionar essa imagem, ou talvez queira vinculá-la a partir de outro site, como uma conta de mídia social que você possui. Em ambos os casos, a primeira etapa desse processo é identificar a URL (uniform resource locator) dessa imagem. Esse é o endereço exclusivo e o caminho do arquivo para essa imagem específica na Web. Vamos dar uma olhada em como isso é feito.
Começando
Para começar, vá para a página com a imagem que você deseja usar. Tenha em mente, no entanto, que você deve usar uma imagem que você possui. Isso porque apontar para as imagens de outras pessoas é considerado roubo de largura de banda e pode causar problemas - até mesmo legalmente. Se você vincular uma imagem em seu site, estará usando sua própria imagem e sua própria largura de banda. Isso é bom, mas se você criar um link para o site de outra pessoa, estará sugando a largura de banda do site para exibir essa imagem. Se esse site tiver limites mensais de uso de banda, o que muitas empresas de hospedagem impõem, então você está comendo seu limite mensal sem o consentimento deles. Além disso, copiar a imagem de outra pessoa para seu website pode ser uma violação de direitos autorais. Se alguém licenciou uma imagem para usar em seu site, ela o fez apenas para seu site. Vincular a essa imagem e desenhá-la em seu site para que ela apareça na sua página fica fora dessa licença e pode abrir você a penalidades legais e multas. Bottom line, você pode vincular a imagens que estão fora do seu próprio site / domínio, mas é considerado rude na melhor das hipóteses e ilegal na pior das hipóteses, por isso evite esta prática todos juntos.
Por causa deste artigo, vamos supor que as imagens são legalmente hospedadas em seu próprio domínio.
Agora que você entende as "dicas" de vinculação de imagens, queremos identificar qual navegador você usará. Navegadores diferentes fazem as coisas de maneira diferente, o que faz sentido, já que são todas plataformas de software exclusivas criadas por empresas diferentes. Na maior parte, no entanto, todos os navegadores funcionam de maneira semelhante nos dias de hoje. No Google Chrome, isso é o que eu faria:
-
Encontre a imagem que você deseja.
-
Clique com o botão direito nessa imagem (Ctrl + clique em um Mac).
-
Um menu aparecerá. A partir desse menu, eu seleciono Copiar endereço da imagem.
-
Se você colar o que está agora na sua área de transferência, descobrirá que possui o caminho completo para essa imagem.
Agora, é assim que funciona no Google Chrome. Outros navegadores têm diferenças. No Internet Explorer, você clica com o botão direito na imagem e escolhe Propriedades. A partir dessa caixa de diálogo, você verá o caminho para esta imagem. Copie o endereço da imagem selecionando-o e copiando-o para a área de transferência.
No Firefox, você clica com o botão direito na imagem e escolhe copiar localização da imagem.
Os dispositivos móveis são ainda mais complicados quando se trata de encontrar um caminho de URL e, como há tantos dispositivos diferentes no mercado atualmente, criar uma lista definitiva de como encontrar um URL de imagem em todas as plataformas e dispositivos seria uma tarefa difícil. Em muitos casos, no entanto, você toca e segura uma imagem para acessar um menu que permite salvar a imagem ou encontrar seu URL.
OK, assim que você tiver o URL da imagem, poderá adicioná-lo a um documento HTML. Lembre-se, este foi o objetivo deste exercício, encontrar o URL da imagem para podermos adicioná-la à nossa página! Veja como adicioná-lo com HTML. Observe que você escreveria esse código em qualquer editor HTML que preferir:
Tipo:
Entre o primeiro conjunto de aspas duplas, você colaria o caminho para a imagem que deseja incluir. O valor do texto alternativo deve ser um conteúdo descritivo, explicando o que a imagem é para alguém que pode não vê-la na página.
Envie sua página da Web e teste-a em um navegador da Web para ver se sua imagem está no lugar!
Dicas úteis
Os atributos de largura e altura não são necessários nas imagens e devem ser excluídos, a menos que você sempre deseje que a imagem seja renderizada no tamanho exato. Com sites responsivos e imagens que refluem e redimensionam com base no tamanho da tela, isso raramente é o caso nos dias de hoje. É melhor você deixar a largura e a altura de lado, especialmente porque, na ausência de outras informações ou estilos de dimensionamento, o navegador exibirá a imagem em seu tamanho padrão.
