Insertar imágenes con HTML: cómo funciona
Si desea insertar una imagen en su sitio web con HTML, use la etiqueta img. Lea aquí cómo funciona exactamente y qué debe tener en cuenta.
Cómo insertar imágenes con HTML: conceptos básicos
- Con el dia
Puede insertar imágenes. - La fuente de la imagen se proporciona dentro de la etiqueta:
inserta el archivo "testbild.webp" de la subcarpeta "imágenes" en el sitio web. - También son posibles fuentes externas a través de URL:
integra el logotipo de CHIP de nuestros servidores.
Atributos HTML para imágenes incrustadas
Se pueden agregar numerosos atributos dentro de la etiqueta img:
- Use "ancho" y "altura" para determinar el tamaño de la imagen en el sitio web: La imagen
se muestra cuadrado con una longitud lateral de 100 píxeles. - Con "alt" usted define un texto alternativo que se muestra si la imagen respectiva no se puede cargar. Siempre debe establecer este atributo al insertar imágenes con HTML.
- El atributo "borde" especifica el grosor del marco en píxeles. Una foto con
tiene un marco relativamente grueso con cinco píxeles. - Use "alinear" para alinear el gráfico. Los valores para este atributo son "bottom", "top", "middle", "left", "right" y "center".
- Con "hspace" y "vspace" puede (horizontal y verticalmente) establecer una distancia a la imagen.
¿Qué formato debo usar?
Hay varios formatos de imagen que puede incluir en el código HTML.
- JPG: las imágenes en formato JPG se usan más comúnmente para páginas web. Este formato representa 16, 7 millones de colores. Además, un JPG se puede comprimir muy bien. Por lo tanto, el archivo de imagen puede hacerse muy pequeño, lo que permite un tiempo de carga rápido.
- PNG: el formato PNG también puede mostrar 16, 7 millones de colores y puede comprimirse. La ventaja sobre el formato JPG es que la compresión es posible sin pérdidas.
- Las áreas definidas en formato PNG también se pueden mostrar de forma transparente. Sin embargo, los navegadores muy antiguos tienen problemas para mostrar transparencias.
- GIF: si desea insertar imágenes en movimiento con HTML, el formato GIF es adecuado. Solo se muestran 256 colores en este formato y la compresión se realiza automáticamente sin ninguna opción de configuración.
- El formato GIF es más adecuado para gráficos o logotipos pequeños y animados. Para garantizar que los logotipos encajen armoniosamente en una página, las transparencias se pueden usar en formato GIF como PNG.
ejemplo HTML
- Esto integra el logotipo de CHIP de nuestro sitio web.
- Se muestra con una altura de 100 píxeles y un ancho de 200 píxeles.
- Si no se puede cargar, "CHIP-Logo" se muestra como texto en blanco.
- La imagen está enmarcada por un marco de dos píxeles.
- Está alineado a la derecha y está a 50 píxeles de distancia de otros elementos laterales.