No HTML usamos basicamente três tipos de imagens: JPG, PNG e GIF. Cada uma tem uma característica única que a torna perfeita para diferentes finalidades:
JPG: A principal característica do formato JPG é seu tamanho reduzido, permitindo que a página carregue em alta velocidade. A velocidade de carregamento é uma das principais características que um site deve ter.
PNG: Esse formato tem como principal característica a capacidade de a imagem ficar transparente, permitindo efeitos que dão um aspecto mais profissional ao site.
GIF: Esse formato é famoso por permitir a exibição de imagens sequenciais, dando animação ao site de forma leve, sem pesar no carregamento.
Direitos Autorais
Ao trabalhar com imagens baixadas na internet, é importante nunca usar imagens com direitos autorais, pois isso pode gerar processos que podem facilmente acabar com uma carreira, além de gerar indenizações de alto valor.
Existem algumas formas de buscar imagens na internet sem direitos autorais ou com permissões bem brandas:
No próprio Google: pela opção de busca de imagens, você pode ir em Ferramentas → Direitos de Uso → Licenças Creative Commons. Assim, só aparecerão imagens que podem ser usadas para fins comerciais.
Sites especializados em imagens de domínio público:
UnSplash (Pesquisar somente em inglês)
Pexels
FreePik
Rawpixel
Pixabay
Libreshot
Wikimedia Commons
Tamanho das Imagens
É muito importante reduzir o tamanho das imagens para garantir que o site carregue rapidamente. Imagens grandes podem deixar o site lento, o que pode afastar os usuários. OBS.: Uma página deve carregar em no máximo 6 segundos; se demorar mais, o usuário pode desistir.
Para reduzir o tamanho das imagens, você pode usar programas de edição de imagens. Muitos são pagos, mas o GIMP é uma ótima opção gratuita que oferece todas as funcionalidades necessárias.
Resolução: As resoluções ideais são:
1200 pixels de largura para imagens que ocupam toda a extensão da tela
650 pixels de largura para imagens que acompanham textos
Tag para Imagens
Tag img
A tag <img> é usada para inserir imagens em uma página HTML. Ela é uma tag auto-fechada e possui os seguintes atributos principais:
src: Especifica o caminho da imagem. Para selecionar a imagem, pressione Ctrl+Espaço. Se a imagem estiver em uma pasta anterior, use ../ para voltar uma pasta.
alt: Fornece um texto alternativo que será exibido se a imagem não carregar. Esse texto também é lido por softwares de acessibilidade para pessoas com deficiência visual.
width: Define a largura da imagem. A altura será ajustada proporcionalmente.
height: Define a altura da imagem. A largura será ajustada proporcionalmente.
Se você usar height e width simultaneamente, poderá definir as proporções exatas da imagem.
Tag figure e figcaption
A tag <figure> é usada para agrupar uma imagem e sua legenda, que é definida pela tag <figcaption>. A tag <figcaption> descreve a imagem e é exibida junto com ela.
Veja um exemplo de código:
<figure>
<img src="../../imagens/escritorio 500 jpeg.jpg" alt="treino">
<figcaption>Imagem de 500px de largura</figcaption>
</figure>
Imagem de Link Externo
Você também pode usar imagens hospedadas em outros sites. Para isso, clique com o botão direito na imagem desejada, selecione "copiar endereço da imagem" e cole esse endereço no atributo src da tag <img>. Não se esqueça de preencher o atributo alt normalmente.
Note que essa prática cria uma dependência de um link externo. Se o endereço da imagem mudar, a imagem não será carregada corretamente no seu site.
Favicon
O Favicon é o símbolo que aparece no site ao lado do título, como na imagem abaixo mostrando o Favicon do Google:
Exemplo de Favicon
Para inserir um favicon em nosso site, é fácil. Basta ir em head e inserir a tag abaixo.
É importante lembrar que o favicon deve ser um arquivo .ICO, que é um formato de imagem específico para favicons.
Como criar seu favicon:
Existem alguns sites próprios para baixar imagens no formato .ICO, ou criar, ou até mesmo transformar imagens de .PNG para o formato .ICO. Alguns desses sites são:
Favicon.IO: Esse site é um dos melhores, pois dá a opção de criar um ICO a partir de uma palavra ou abreviação curta, ou criar um ICO a partir de um PNG ou até utilizar um emoji como favicon.
Favicon.cc: Nesse site você pode criar seu próprio ICO.
IconArchive: Aqui você já encontra os ICO prontos, basta pesquisar o tema que desejar e baixar o que mais te agradar.
