Inserir imagens com HTML - como funciona
Se você deseja inserir uma imagem em seu site com HTML, use a tag img. Leia aqui como exatamente isso funciona e o que você deve observar.
Como inserir imagens com HTML - o básico
- Com o dia
pode inserir fotos. - A fonte da imagem é fornecida na tag:
insere o arquivo "testbild.webp" da subpasta "fotos" no site. - Fontes externas via URL também são possíveis:
integra o logotipo CHIP de nossos servidores.
Atributos HTML para imagens incorporadas
Inúmeros atributos podem ser adicionados na tag img:
- Use "width" e "height" para determinar o tamanho da imagem no site: A imagem
é exibido quadrado com um comprimento lateral de 100 pixels. - Com "alt", você define um texto alternativo que será exibido se a respectiva imagem não puder ser carregada. Você sempre deve definir esse atributo ao inserir imagens com HTML.
- O atributo "borda" especifica a espessura do quadro em pixels. Uma foto com
possui um quadro relativamente grosso com cinco pixels. - Use "alinhar" para alinhar o gráfico. Os valores para esse atributo são "inferior", "superior", "intermediário", "esquerdo", "direito" e "central".
- Com "hspace" e "vspace", você pode (horizontal e verticalmente) definir uma distância para a imagem.
Qual formato devo usar?
Existem vários formatos de imagem que você pode incluir no código HTML.
- JPG: as imagens no formato JPG são mais comumente usadas para páginas da web. Esse formato representa 16, 7 milhões de cores e, além disso, um JPG pode ser compactado muito bem. O arquivo de imagem pode, portanto, ser muito pequeno, o que permite um tempo de carregamento rápido.
- PNG: O formato PNG também pode exibir 16, 7 milhões de cores e pode ser compactado. A vantagem sobre o formato JPG é que a compactação é possível sem perdas.
- As áreas definidas no formato PNG também podem ser exibidas de forma transparente. No entanto, navegadores muito antigos têm problemas para exibir transparências.
- GIF: se você deseja inserir imagens em movimento com HTML, o formato GIF é adequado. Somente 256 cores são mostradas nesse formato e a compactação ocorre automaticamente sem nenhuma opção de configuração.
- O formato GIF é mais adequado para gráficos ou logotipos pequenos e animados. Para garantir que os logotipos se ajustem harmoniosamente a uma página, as transparências podem ser usadas no formato GIF como um PNG.
exemplo HTML
- Isso integra o logotipo CHIP em nosso site.
- É exibido com uma altura de 100 pixels e uma largura de 200 pixels.
- Se não puder ser carregado, "CHIP-Logo" será exibido como texto em branco.
- A imagem é enquadrada por um quadro de dois pixels.
- Ele está alinhado à direita e fica a 50 pixels dos outros elementos laterais.