Cómo insertar una imagen en HTML en 7 sencillos pasos

Saber cómo insertar una imagen en HTML es importante cuando necesitas colocar un logotipo o un gráfico en un lugar concreto, como la cabecera o el pie de página, y tu tema o editor de contenido no te permite hacerlo.

Añadir imágenes directamente con HTML te permite controlar mejor la presentación visual de tu web. Así puedes hacer que el contenido resulte más atractivo al intercalar imágenes entre el texto y reforzar la imagen de marca al colocar elementos como logotipos justo donde los necesitas.

Estos son los siete pasos principales para insertar una imagen en tu sitio web:

1. Prepara y sube la imagen. Prepara el archivo de imagen y súbelo al servidor de tu sitio web para obtener una URL accesible desde la web.
2. Abre el archivo HTML de tu tema. Busca el archivo de plantilla adecuado, como header.php o footer.php, donde quieras que aparezca la imagen.
3. Añade el atributo img src. Añade la etiqueta HTML básica <img> y usa el atributo src para indicar la URL de la imagen.
4. Indica las dimensiones de la imagen. Define el ancho y la altura para evitar que el contenido de la página se desplace mientras se carga la imagen.
5. Añade el atributo alt. Incluye un texto alternativo que describa la imagen para mejorar la accesibilidad y el SEO.
6. Comprueba si hay errores y guarda los cambios. Revisa el código para detectar posibles errores y guarda el archivo para aplicar los cambios.
7. Añade un enlace a la imagen. Haz que la imagen sea clicable incluyendo la etiqueta <img> dentro de una etiqueta de enlace (<a>) que dirija a tu página de inicio o a otra página relevante.

En resumen

• Para insertar una imagen en HTML, súbela a tu servidor o a la biblioteca de contenido multimedia y copia su URL.
• Abre el archivo HTML o de plantilla donde quieras que aparezca y añade una etiqueta <img> con los atributos src, width, height y alt.
• Guarda el archivo, comprueba que la imagen se muestre correctamente y envuelve la etiqueta <img> con una etiqueta <a> para que sea clicable.

1. Prepara y sube tu imagen

Antes de añadir una imagen mediante código, debes subirla a tu servidor web. En este paso, tendrás que optimizar el archivo y subirlo a una ubicación desde la que puedas acceder a él mediante una URL directa. Más adelante necesitarás esta URL para el atributo src.

Si utilizas WordPress, la forma más habitual de hacerlo es a través de la biblioteca de contenido multimedia:

1. Desde el panel de control de WordPress, ve a Contenido multimedia → Añadir nuevo.
2. Arrastra y suelta el archivo de imagen o selecciónalo para subirlo.
3. Una vez subido, haz clic en el botón Copiar el enlace al portapapeles situado junto a la imagen. Guarda esta URL, ya que la necesitarás en los siguientes pasos.

También puedes usar el gestor de archivos del panel de control de tu hosting. Este método resulta especialmente útil para sitios web estáticos o para guardar imágenes fuera de la carpeta de subidas predeterminada de WordPress.

Por ejemplo, si utilizas Hostinger, puedes subir el archivo con nuestro gestor de archivos. Esta herramienta te permite gestionar directamente la estructura de archivos de tu web. Solo tienes que acceder al directorio public_html o a una subcarpeta, como images, y hacer clic en el botón Subir para añadir el archivo.

2. Accede al archivo HTML de tu tema

Para que una imagen aparezca en todas las páginas, por ejemplo, como logotipo en la cabecera, tendrás que editar un archivo de plantilla que controle la estructura de tu web, como header.php o footer.php, en lugar de modificar una sola entrada.

Antes de modificar los archivos del tema, haz siempre un backup de tu sitio web. Un pequeño error podría hacer que tu web dejara de funcionar correctamente. Con un backup, podrás restaurarla rápidamente.

También te recomendamos hacer estos cambios en un tema hijo para evitar que las personalizaciones se sobrescriban cuando actualices el tema principal.

Una vez que tengas el backup, sigue estos pasos en el Editor de archivos de temas de WordPress:

1. Desde el panel de control de WordPress, ve a Apariencia → Editor de archivos de temas.
2. A la derecha, selecciona el tema activo.
3. Busca el archivo que quieras editar. Para añadir un logotipo a la cabecera, normalmente tendrás que editar header.php. Para añadir un elemento al pie de página, normalmente tendrás que editar footer.php.
4. Haz clic en el archivo para abrirlo en el editor.

3. Añade el atributo img src a la imagen

Para insertar la imagen, añade la etiqueta <img> al archivo HTML y utiliza el atributo src para indicar su URL. La etiqueta <img> indica al navegador que debe mostrar una imagen. Es una etiqueta vacía, por lo que no necesita una etiqueta de cierre como </img>.

El atributo src, abreviatura de “source” (fuente), indica al navegador dónde se encuentra la imagen. Aquí debes pegar la URL del archivo que copiaste de la biblioteca de contenido multimedia en el paso 1.

Busca el lugar del código donde quieras mostrar la imagen, por ejemplo, dentro de la sección <header> de header.php, y añade el siguiente fragmento. Sustituye la URL de ejemplo por la URL real de tu imagen:

<img src="https://your-domain.tld/wp-content/uploads/2025/11/your-image.png">

Esta URL completa se denomina “ruta absoluta” y es la opción más fiable al editar archivos del tema.

4. Define el ancho y la altura de la imagen

Para definir el ancho y la altura de la imagen, añade los atributos width y height directamente a la etiqueta <img>. Estos atributos son importantes para el rendimiento y la experiencia de usuario porque indican al navegador cuánto espacio debe reservar para la imagen incluso antes de que se cargue.

De esta forma, se evita el Cumulative Layout Shift (CLS), un problema que hace que el contenido de la página cambie de posición mientras se cargan las imágenes.

Añade los atributos width y height a la etiqueta <img> e indica las dimensiones originales de la imagen en píxeles:

<img src="https://your-domain.tld/wp-content/uploads/2025/11/your-image.png" width="180" height="60">

Ten en cuenta que solo debes indicar los números. No añadas px dentro de los atributos HTML. Aunque utilices CSS para que la imagen sea responsive, sigue siendo recomendable definir estos atributos HTML para establecer su relación de aspecto original.

5. Añade un atributo alt descriptivo

El atributo alt, también conocido como texto alternativo, es una breve descripción de la imagen. Es importante principalmente por dos motivos:

• Accesibilidad. Los lectores de pantalla utilizan el texto del atributo alt para describir la imagen a las personas con discapacidad visual, lo que ayuda a que tu web sea accesible para todo el mundo.
• SEO. Los motores de búsqueda utilizan el texto del atributo alt para entender el contenido y el contexto de la imagen, lo que puede ayudar a que aparezca en los resultados de búsqueda.

El texto del atributo alt debe ser breve y descriptivo. Si la imagen es el logotipo de tu empresa, utiliza el nombre de la empresa seguido de “logotipo”.

<img src="https://your-domain.tld/wp-content/uploads/2025/11/your-image.png" width="180" height="60" alt="A cat image">

6. Comprueba si hay errores y guarda los cambios

Revisa la etiqueta <img> para comprobar que no haya errores y, después, haz clic en el botón Actualizar archivo del editor de WordPress. Un solo carácter incorrecto o unas comillas sin cerrar pueden impedir que la imagen se muestre o alterar el diseño de la página.

Comprueba una vez más la línea de código. La etiqueta <img> completa debería tener un aspecto similar a este:

<img src="https://your-domain.tld/wp-content/uploads/2025/11/your-logo.png" width="180" height="60" alt="A cat image">

Cuando hayas comprobado que todo es correcto, haz clic en el botón Actualizar archivo situado en la parte inferior del Editor de archivos de temas. Abre tu sitio web en una pestaña nueva o en una ventana de navegación privada y vuelve a cargar la página para comprobar que la imagen se muestra correctamente.

7. Añade un enlace a la imagen

Para añadir un enlace a una imagen, incluye la etiqueta <img> dentro de una etiqueta de enlace (<a>). Una imagen situada en la cabecera o el pie de página, especialmente si es un logotipo, casi siempre debería ser clicable.

Es habitual hacer clic en el logotipo de una web para volver a la página de inicio. Por eso, convertirlo en un enlace facilita la navegación y mejora la experiencia de usuario.

La etiqueta <a> utiliza el atributo href para indicar la URL de destino. Así puedes hacer que el nuevo logotipo enlace a la página de inicio de tu sitio web:

  <a href="https://your-domain.tld/">
   <img src="https://your-domain.tld/wp-content/uploads/2025/11/your-logo.png" width="180" height="60" alt="A cat image">
</a>

Después de añadir este código, vuelve a hacer clic en Actualizar archivo. Cuando visites tu web, el logotipo no solo se mostrará, sino que también funcionará como enlace.

Próximos pasos: organiza tus imágenes en la biblioteca de contenido multimedia de WordPress

Insertar manualmente una imagen con HTML es ideal para elementos del tema, como los logotipos. A medida que tu web crezca, tendrás que subir decenas o incluso cientos de imágenes para tus entradas y páginas.

En ese caso, organizar bien el contenido multimedia es fundamental. Si la biblioteca de contenido multimedia de WordPress está desordenada, será más difícil encontrar imágenes, reutilizar contenido y encontrar las URL que necesitas.

Para organizar la biblioteca de contenido multimedia de WordPress, puedes instalar un plugin como FileBird y crear carpetas virtuales. Después, solo tienes que arrastrar y soltar los archivos de contenido multimedia en ellas.

Organizar el contenido multimedia en carpetas te permitirá trabajar de forma mucho más rápida y fiable con el contenido que añadas en el futuro.

Este artículo es una versión adaptada de How to insert an image in HTML in 7 easy steps, originalmente publicado en inglés.

Todo el contenido de los tutoriales en este sitio web está sujeto a los rigurosos estándares y valores editoriales de Hostinger.

El autor

Faradilla Ayunindya

Add Hostinger as a preferred source on Google

Faradilla, or Ninda, is a Content Marketing Specialist with a passion for technology, a curiosity for digital marketing trends, and a love for languages. When she's not writing Hostinger tutorials, you can find her learning about life sciences. Follow her on LinkedIn.

Más de Faradilla Ayunindya