Cómo insertar imágenes en HTML paso a paso para mejorar tu web

¿Quieres aprender cómo insertar imágenes en HTML paso a paso sin liarte con el código? Las imágenes son la parte visual de cualquier web y sin ellas, un sitio puede parecer un libro sin ilustraciones. El contenido se entiende, sí, pero falta ese toque que lo hace atractivo y fácil de recordar.

Piensa en una tienda online sin fotos de sus productos. ¿Comprarías algo solo leyendo la descripción? Seguramente no. Por eso, dominar el uso de la etiqueta <img> es tan importante como saber escribir un buen texto en tu página.

En esta guía veremos de forma clara y sencilla cómo añadir imágenes en HTML, desde lo básico hasta trucos prácticos que mejoran la accesibilidad y el SEO. Te mostraré ejemplos fáciles de aplicar y te daré consejos para evitar errores comunes.

Al final, tendrás las herramientas necesarias para que tus imágenes no solo se vean bien, sino que también hagan que tu web cargue rápido, sea accesible y aparezca mejor posicionada en buscadores.

Tabla de Contenidos:

Método básico para insertar una imagen en HTML

Para mostrar una foto en tu web usamos la etiqueta < img >. Es una etiqueta “vacía”, no lleva texto dentro ni tiene cierre. Piensa en ella como un marco que le dice al navegador dónde está la imagen y cómo debe mostrarla.

Dos piezas son imprescindibles: src y alt. src es la dirección de la imagen; alt es su descripción. ¿Por qué alt? Porque ayuda a la accesibilidad, al SEO y aparece si la imagen no carga. Como una etiqueta pegada al marco que explica lo que se ve.

Ejemplo práctico del código completo

<!-- Ruta relativa dentro del proyecto -->
<img src="img/producto-cargador-usb.jpg" alt="Cargador USB blanco con dos puertos" width="600" height="400">

<!-- Ruta absoluta desde otro dominio -->
<img src="https://cdn.ejemplo.com/imagenes/logo-marca.svg" alt="Logo de la marca Ejemplo">

• En el primer caso la imagen está en la carpeta img de tu web.
• En el segundo caso la imagen viene de una URL completa.

Consejo rápido: si puedes, guarda tus imágenes en una carpeta como /img/ y usa nombres claros. Evita espacios, tildes y la ñ.

Qué hace cada parte del código

Así lo recuerdas fácil: src es la dirección, alt es la etiqueta, width/height son las medidas del marco. Como colgar un cuadro en la pared: primero sabes dónde va, luego qué muestra y por último de qué tamaño lo cuelgas.

Cómo dar estilo y posición a las imágenes

Cuando insertas una imagen en HTML lo básico es que se vea, pero pronto surge la duda: ¿cómo hago para que quede centrada o para que no pegue tanto con el texto? Aquí es donde entra en juego el CSS.

Centrar una imagen en la página

En el pasado se usaba el atributo align="center", pero hoy ya no se recomienda. Con CSS tienes más control y la página se adapta mejor a móviles y pantallas de distintos tamaños.

Un ejemplo práctico:

<img src="img/foto.jpg" alt="Ejemplo de imagen" class="centrada">
.centrada {
  display: block;
  margin: 0 auto;
}

La lógica es sencilla: al poner la imagen como bloque y darle un margen automático, el navegador la coloca justo en el centro, como si ajustaras un cuadro en la pared para que quede recto.

Añadir márgenes y bordes con CSS

Si una imagen está pegada al texto, el resultado puede ser incómodo de leer. Con márgenes puedes darle aire alrededor.

img {
  margin: 20px;
}

Y si quieres destacar una foto, puedes añadir un borde:

img {
  border: 2px solid #0E76BE;
  border-radius: 8px;
}

Así consigues que la imagen se vea enmarcada, como si tuviera un marco real.

Diferencias entre HTML antiguo y HTML5

En versiones antiguas de HTML se usaban atributos como:

• align="left" o align="right" para colocar imágenes a un lado.
• border="1" para añadir un borde.
• hspace y vspace para dar espacio alrededor.

Hoy esos atributos están obsoletos. Todo ese trabajo lo hace CSS de forma más limpia y flexible.

<img src="..." align="center" border="1">

<img src="..." style="display:block; margin:0 auto; border:2px solid #ddd;">

Consejos para organizar las imágenes de tu web

¿Has intentado alguna vez buscar una foto en tu ordenador y no la encontrabas porque estaba perdida en una carpeta llena de archivos llamados IMG001.jpg, IMG002.jpg…? En una web pasa lo mismo: si no organizas tus imágenes, pronto tendrás un caos difícil de manejar y además no es bueno para el SEO.

Nombres de archivo claros y descriptivos

El nombre de cada imagen importa más de lo que parece. No solo te ayuda a ti a identificarla, también ayuda a los buscadores a entender su contenido.

• Usa palabras simples y descriptivas: mejor cargador-usb-blanco.jpg que IMG001.jpg.
• Separa palabras con guiones medios (-), no espacios ni guiones bajos.
• Evita tildes, ñ o símbolos raros.

Es como poner etiquetas a las cajas de una mudanza: si escribes “ropa invierno”, sabrás qué hay dentro; si solo pones “caja 1”, te tocará abrirlas todas.

Crea carpetas específicas para las imágenes

Tener todas las imágenes sueltas en la raíz de tu proyecto es un error común. Lo ideal es crear una carpeta principal, como /img/ o /images/, y dentro organizar por categorías si tu web es grande.

Ejemplo de estructura:

/img
   /productos
   /banners
   /iconos

Así, cuando insertes la ruta de una imagen, será mucho más fácil recordarla:
src="img/productos/cargador-usb-blanco.jpg"

Evita errores comunes con las rutas

El error típico es que la imagen no aparece en la página porque la ruta está mal escrita. Algunas recomendaciones:

• Comprueba siempre que el nombre del archivo coincide exactamente (las mayúsculas importan en algunos servidores).
• No uses espacios en los nombres. Si necesitas separar, usa guiones.
• Revisa si la ruta es relativa o absoluta según dónde esté tu archivo HTML.

Piensa en las rutas como las calles de una ciudad. Si das la dirección equivocada, el navegador nunca encontrará la “casa” donde vive tu imagen.

Optimización y SEO de las imágenes

Las imágenes no solo hacen que tu web sea más atractiva, también pueden marcar la diferencia en el posicionamiento en buscadores y en la velocidad de carga. Una imagen mal optimizada puede hacer que tu página tarde demasiado en abrirse, y eso a Google no le gusta nada.

Formatos recomendados para web

Elegir el formato correcto es clave. No todos sirven para lo mismo:

• JPG → Ideal para fotos. Buen equilibrio entre calidad y peso.
• PNG → Perfecto cuando necesitas transparencia o gráficos con pocos colores.
• SVG → Muy usado en iconos y logotipos porque no pierde calidad al escalar.
• WebP y AVIF → Formatos modernos que ofrecen gran calidad con un peso mucho menor. Google los recomienda porque ayudan a mejorar la velocidad.

Un ejemplo: una foto de producto en WebP puede pesar hasta un 70% menos que en JPG, y visualmente casi no notarás la diferencia.

Uso correcto del atributo alt en SEO

El atributo alt no solo sirve para accesibilidad. También es una señal importante para los buscadores.

• Describe la imagen de forma clara y sencilla.
• Incluye palabras clave solo si tienen sentido.
• Evita frases genéricas como “imagen1” o “foto bonita”.

Por ejemplo, en lugar de poner:
alt="foto"
Es mejor escribir:
alt="Cargador rápido USB tipo C color negro"

Así ayudas a que la imagen pueda aparecer en Google Imágenes y refuerzas el SEO de tu página.

Cómo optimizar el peso de las imágenes

El peso de cada archivo influye directamente en el rendimiento. ¿De qué sirve tener un diseño bonito si tarda 10 segundos en cargar?

• Comprime las imágenes antes de subirlas (herramientas como TinyPNG o Squoosh funcionan muy bien). Optimizar las imágenes es algo imprescindible.
• Ajusta el tamaño a lo que realmente necesitas. No subas una foto de 4000px si la mostrarás a 800px.
• Usa lazy loading (loading="lazy") para que las imágenes solo se carguen cuando el usuario llegue a esa parte de la página.

Ejemplo de imagen optimizada con carga diferida:

<img src="img/cargador-usb.webp" alt="Cargador rápido USB negro" width="600" height="400" loading="lazy">

Con estos pasos tu web será más rápida, más ligera y tendrá más posibilidades de aparecer arriba en Google.

Errores frecuentes al insertar imágenes en HTML

Aunque insertar una imagen parece sencillo, hay fallos muy comunes que pueden hacer que no se vea bien o incluso que tu web cargue lenta. Vamos a repasar los más habituales para que los evites desde el principio.

Imágenes que no cargan por rutas mal escritas

El error número uno es escribir mal la ruta de la imagen. Puede ser un detalle mínimo, como una mayúscula de más o un guion que falta.

Ejemplo incorrecto:

<img src="Img/Producto.jpg" alt="Cargador USB">

Ejemplo correcto:

<img src="img/producto.jpg" alt="Cargador USB">

👉 En algunos servidores (como los que usan Linux) Producto.jpg y producto.jpg no son lo mismo.

Usar imágenes demasiado grandes sin optimizar

Otro fallo clásico es subir imágenes enormes y mostrarlas pequeñas con HTML. Eso hace que tu web cargue lento aunque la veas a buen tamaño.

Ejemplo incorrecto:

<img src="img/foto-4000px.jpg" alt="Teléfono móvil" width="800">

Ejemplo correcto:

<img src="img/foto-800px.jpg" alt="Teléfono móvil" width="800">

👉 Lo ideal es ajustar la imagen antes de subirla, usando un editor o una herramienta de compresión.

Atributos obsoletos como align

Antes se usaba align para colocar imágenes a la izquierda o al centro, pero en HTML5 está obsoleto.

Ejemplo incorrecto:

<img src="img/logo.png" alt="Logo empresa" align="center">

Ejemplo correcto con CSS:

img {
  display: block;
  margin: 0 auto;
}

👉 Usar CSS te da más control y asegura que tu diseño funcione en todos los navegadores.

Conclusión

Insertar imágenes en HTML es un paso básico pero esencial para que una web sea atractiva, fácil de entender y esté optimizada. La clave está en usar la etiqueta < img > de forma correcta, acompañada de atributos bien definidos como src, alt, width y height.

No se trata solo de que la imagen se vea, sino de que cargue rápido, tenga el tamaño adecuado y ayude al SEO y a la accesibilidad. Un archivo mal nombrado o una foto demasiado grande puede hacer que tu web pierda visitas y posiciones en Google.

Si aplicas buenas prácticas como:

• Usar nombres descriptivos para los archivos.
• Organizar las imágenes en carpetas.
• Elegir el formato adecuado (JPG, PNG, WebP, AVIF, SVG).
• Optimizar el peso y aprovechar atributos como loading="lazy".

Tendrás un sitio más rápido, más profesional y con más posibilidades de destacar en buscadores.