Tecnológico Nacional de México
Instituto Tecnológico de Tláhuac
Academia de Sistemas y Cómputo
Etiqueta HTML <img>: El elemento de imagen
La etiqueta <img> es un elemento HTML que permite añadir imágenes a páginas web. El elemento de imagen es
fundamental para añadir contenido visual a los sitios web.
Cómo utilizar la etiqueta HTML img
Para añadir una imagen en HTML con la etiqueta <img>, el atributo src debe especificar la ruta al archivo de imagen.
Al usar una imagen local, el atributo src debe especificar la ruta relativa al archivo HTML. Para añadir una imagen a
una página web HTML desde un recurso externo, src debe contener la URL completa.
Además, los elementos de imagen a menudo utilizan un alt atributo para proporcionar texto alternativo
para la accesibilidad.
Como etiqueta vacía, <img> solo tiene una etiqueta de apertura y no tiene etiqueta de cierre.
<img>: La etiqueta vacía en HTML para agregar una imagen a una página web.
src: El atributo HTML que define la ruta al archivo de imagen, ya sea como una ruta relativa o una URL
completa.
alt: El atributo para proporcionar una descripción alternativa basada en texto de la imagen.
Cuándo utilizar la etiqueta HTML img
Las imágenes hacen que las páginas web sean más atractivas y visualmente atractivas. Ya sea para un
artículo, una entrada de blog o la descripción de un producto, usar la etiqueta <img> es la forma más
sencilla de agregar imágenes.
Ejemplos de uso de la etiqueta de imagen HTML
Innumerables sitios web utilizan el elemento de entrada para aceptar diferentes tipos de entradas de los usuarios.
Aquí hay algunos ejemplos simplificados:
Contenido educativo
En los sitios web educativos, las imágenes pueden ilustrar conceptos complejos o acompañar tutoriales.
Listados de bienes raíces
Los sitios web inmobiliarios pueden usar imágenes con frecuencia para mostrar las propiedades. Cada anuncio
suele incluir varias imágenes de la propiedad.
Sitios web de recetas
Realizo: Ing. S.C. Erika Muciño Mancilla
Tecnológico Nacional de México
Instituto Tecnológico de Tláhuac
Academia de Sistemas y Cómputo
Las imágenes también son comunes en los sitios web de cocina. En una página de recetas, pueden mostrar tanto el
plato terminado como los pasos de su preparación.
Cambiar el tamaño de la imagen usando los atributos de ancho y alto
Puedes controlar el tamaño de las imágenes directamente configurando los atributos width y height de la etiqueta
<img>. Estos atributos aceptan valores en píxeles.
width: El atributo para especificar el ancho de la imagen en píxeles.
height: El atributo para especificar la altura de la imagen en píxeles.
Si solo width o height tiene un valor, el navegador redimensiona la imagen según la relación de aspecto original.
Para mantener la relación de aspecto original y permitir que las imágenes cambien de tamaño, puede utilizar
porcentajes en lugar de valores de píxeles.
También puedes usar las propiedades max-width y max-height para limitar el tamaño máximo de una imagen. Esto
puede ser especialmente útil para diseños adaptables.
Cambiar el tamaño de la imagen con HTML y CSS
También puedes controlar el tamaño de visualización de las imágenes mediante CSS . Por ejemplo, considera el
redimensionamiento adaptable. Puedes establecer el atributo width en 100% y el atributo height en auto.
Para mantener la coherencia entre varias imágenes, utilice una hoja de estilo independiente.
Realizo: Ing. S.C. Erika Muciño Mancilla
Tecnológico Nacional de México
Instituto Tecnológico de Tláhuac
Academia de Sistemas y Cómputo
Centrar imágenes con HTML y CSS
Para centrar una imagen horizontalmente en una página web, puedes envolverla en un div con text-align: center.
Para centrar un elemento de imagen HTML verticalmente, puedes usar propiedades CSS como position, top,
y transform.
Imágenes de fondo
En lugar de usar la etiqueta <img>, puedes aplicar imágenes como fondo a los elementos mediante CSS. Las imágenes
de fondo pueden colocarse detrás de otros elementos y te ofrecen un mayor control sobre su posición y tamaño.
Con CSS, puedes especificar propiedades como background-size, background-position, y background-repeat.
Por ejemplo, background-size: cover escala la imagen para cubrir todo el contenedor, manteniendo su relación de
aspecto. background-position: center Ayuda a centrar la imagen de fondo dentro de su elemento contenedor.
Finalmente, background-repeat: no-repeat evita que la imagen se repita si es más pequeña que el contenedor.
Uso de imágenes como enlaces
Envolver una etiqueta <img> dentro de otra etiqueta <a> permite convertir la imagen en un enlace
clicable. Esto puede ser útil para la navegación o las interfaces de usuario interactivas. Por ejemplo,
puede agregar un elemento de imagen HTML como un logotipo clicable que redirija a su página de
inicio.
Realizo: Ing. S.C. Erika Muciño Mancilla
Tecnológico Nacional de México
Instituto Tecnológico de Tláhuac
Academia de Sistemas y Cómputo
Carga diferida para optimizar el rendimiento
La carga diferida pospone la carga de recursos no críticos al cargar la página. La imagen solo se carga cuando está a
punto de ser visible en la ventana gráfica, lo que mejora significativamente el rendimiento de la página.
Formatos de imagen (extensiones)
Imágenes SVG en HTML
Los gráficos vectoriales escalables (SVG) ofrecen un formato de imagen independiente de la resolución, ideal para
ilustraciones y logotipos. Incluya una imagen SVG con la etiqueta <img> o incruste directamente el código SVG para
mayor control y flexibilidad.
Alternativamente, inserte el código SVG directamente:
<svg width="100" height="100" xmlns="[Link]
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
</svg>
Formatos de archivos de imagen
Elija el formato de imagen adecuado según su caso de uso. Estos son algunos formatos de archivo de
imagen comunes:
JPEG (Joint Photographic Experts Group): ideal para fotos con muchos colores y degradados
debido a su eficiente compresión.
PNG (Gráficos de red portátiles): útil para imágenes que requieren transparencia o calidad sin
pérdida.
Realizo: Ing. S.C. Erika Muciño Mancilla
Tecnológico Nacional de México
Instituto Tecnológico de Tláhuac
Academia de Sistemas y Cómputo
SVG (Gráficos vectoriales escalables): ideal para ilustraciones y logotipos que necesitan escalar
sin perder calidad.
WebP (Web Picture): ofrece compresión de alta calidad tanto para fotos como para gráficos.
Utilizando el elemento de imagen para la dirección artística
Este <picture> elemento permite definir múltiples fuentes para una imagen, lo que permite adaptar la
dirección artística al tamaño de la ventana gráfica. Esta técnica permite usar diferentes imágenes para
adaptarse a distintos tamaños de pantalla, lo que proporciona una experiencia de usuario optimizada.
Realizo: Ing. S.C. Erika Muciño Mancilla