Cómo añadir una imagen en HTML fácil y rápido (más trucos de expertos)

Si alguna vez has pensado en hacer tu propia web (o ya te has lanzado a ello) seguro que te has preguntado: "¿Cómo demonios añado una imagen en HTML?". Pues estás en el sitio adecuado. Nosotros también nos rompimos un poco la cabeza con esto al principio (tranquilo, es normal).

Hoy queremos explicártelo de forma clara, práctica y sin tecnicismos absurdos. Porque la verdad es que añadir imágenes a tu web no tiene por qué ser complicado… y además, si lo haces bien, tu página puede lucir espectacular.

Y como somos así de generosos, también te contaremos: ¿cómo añadir una imagen de fondo en HTML?, que da un toque súper pro a cualquier proyecto.

El primer paso: el elemento <img>

El corazón de todo esto es la etiqueta <img>. Es la forma más básica y directa de insertar una imagen en HTML.

El formato básico es:

<img src="ruta/de/tu/imagen.jpg" alt="Descripción de la imagen">

Donde:

• src es la ruta donde está la imagen (puede ser una URL o una ruta interna).

• alt es un texto alternativo que describe la imagen (muy importante para la accesibilidad).

Así de simple. Aunque, como todo en la vida, la práctica y el detalle marcan la diferencia.

Consejo rápido: Si no añades el atributo alt, Google puede penalizarte un poquito en SEO. ¡Así que no te lo olvides!

¿Dónde conseguir imágenes optimizadas para web?

Aquí viene la pregunta del millón: ¿y de dónde saco imágenes buenas y optimizadas?

Te dejamos algunas webs que nosotros usamos muchísimo:

• Unsplash
• Pexels
• Pixabay

Todas ofrecen imágenes libres de derechos que puedes usar sin miedo. Eso sí, te recomendamos siempre optimizar el tamaño antes de subirlas. Puedes utilizar:

• TinyPNG para comprimirlas.

• Squoosh si prefieres algo más técnico.

¡No subas imágenes de 5MB a tu web o la velocidad se te va al garete!

Buenas prácticas al insertar imágenes en HTML

Aquí te dejamos unos consejos de la vieja escuela, pero que siguen funcionando de maravilla:

• Utiliza formatos modernos como WebP siempre que puedas.

• Incluye atributos width y height para evitar "saltos" de contenido.

• Nombra bien tus archivos (diseño-web-alicante.jpg es mejor que IMG1234.JPG).

• Añade lazy loading:

<img src="ruta.jpg" alt="Descripción" loading="lazy">

• Esto hará que la imagen se cargue solo cuando el usuario llegue hasta ella. ¡Más velocidad, mejor SEO!

Herramientas y extensiones que te ayudarán

¿Quieres ir un paso más allá? Hay algunas herramientas y extensiones de navegador que son súper útiles:

• Visual Studio Code: Editor de código brutal para escribir HTML de forma cómoda.

• Emmet (integrado en VS Code): Para escribir código más rápido.

• W3C Validator: Para validar que tu HTML es correcto: validator.w3.org.

• Lighthouse (extensión de Chrome): Te analiza la calidad de tu página, incluyendo imágenes.

Pro tip: Hay extensiones como Image Size Info (Chrome) que te muestran el tamaño real de las imágenes cargadas en cualquier web. Muy útil para espiar a la competencia, ejem…

Cómo añadir una imagen de fondo en HTML (con CSS)

Y ahora la gran pregunta secundaria: ¿cómo añadir una imagen de fondo en HTML?

Aquí es donde entra en juego el CSS. No usamos <img>, sino que aplicamos una imagen directamente a un contenedor.

Ejemplo básico:

<div class="fondo-personalizado">
  <h2>Texto encima de la imagen</h2>
</div>

Y en el CSS:

.fondo-personalizado {
  background-image: url('ruta/de/tu/fondo.jpg');
  background-size: cover;
  background-position: center;
  height: 400px;
}

¿Ves qué fácil? Puedes controlar:

• background-size: cover para que cubra todo el espacio.

• background-position: center para que esté centrada.

• height para darle el alto que quieras.

Esto se utiliza muchísimo en cabeceras de webs, sliders, secciones hero, etc.

Opciones avanzadas: fondos múltiples, parallax y overlays

Si quieres ponerte un poco más creativo, también puedes:

• Añadir varios fondos:

background-image: url('fondo1.png'), url('fondo2.jpg');

• Crear efecto parallax (fondo que se mueve a distinta velocidad):

background-attachment: fixed;

• Añadir un overlay oscuro encima del fondo (muy utilizado para mejorar la lectura):

background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('imagen.jpg');

Un pequeño truco de diseño que queda profesionalísimo.

Errores comunes al trabajar con imágenes en HTML

Y ya que estamos, te contamos algunos errores que vemos a diario:

• Imágenes demasiado grandes (¡ajusta resolución y tamaño!).

• No usar el atributo alt.

• No especificar dimensiones (width y height).

• Fondos con mal contraste respecto al texto.

• Usar rutas relativas mal puestas (../imagenes/foto.jpg vs /imagenes/foto.jpg).

¿Necesitas ayuda profesional con tu web?

Sabemos que todo esto puede parecer sencillo al principio, pero montar una web que funcione de verdad tiene mucha más miga. Si quieres asegurarte de que tu sitio esté bien diseñado, cargue rápido y posicione en Google, en Overant te podemos ayudar.

Te invitamos a visitar nuestra página de Diseño Web en Alicante y contarnos qué tienes en mente. ¡Estaremos encantados de echarte una mano!

Conclusión: ¡Hora de ponerlo en práctica!

Añadir imágenes en HTML no es solo cuestión de meter una etiqueta y listo. Es todo un arte si quieres hacerlo bien: optimización, accesibilidad, velocidad… ¡pero ahora ya sabes cómo hacerlo como un auténtico pro!

Así que, ¿a qué esperas? Prueba, experimenta, equivócate (un poco) y vuelve a intentarlo. Nosotros estaremos aquí para lo que necesites.