{"id":28250,"date":"2023-01-31T02:40:36","date_gmt":"2023-01-31T01:40:36","guid":{"rendered":"\/tutoriales\/?p=28250"},"modified":"2026-09-21T12:04:09","modified_gmt":"2026-09-21T10:04:09","slug":"insertar-imagen-html","status":"publish","type":"post","link":"\/mx\/tutoriales\/insertar-imagen-html\/","title":{"rendered":"C\u00f3mo insertar una imagen en HTML en 7 sencillos pasos"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Saber c&oacute;mo insertar una imagen en HTML es importante cuando necesitas colocar un logotipo o un gr&aacute;fico en un lugar concreto, como la cabecera o el pie de p&aacute;gina, y tu tema o editor de contenido no te permite hacerlo.<\/p><p class=\"wp-block-paragraph\">A&ntilde;adir im&aacute;genes directamente con HTML te permite controlar mejor la presentaci&oacute;n visual de tu web. As&iacute; puedes hacer que el contenido resulte m&aacute;s atractivo al intercalar im&aacute;genes entre el texto y reforzar la imagen de marca al colocar elementos como logotipos justo donde los necesitas.<\/p><p class=\"wp-block-paragraph\">Estos son los siete pasos principales para insertar una imagen en tu sitio web:<\/p><ol class=\"wp-block-list\">\n<li><strong>Prepara y sube la imagen<\/strong>. Prepara el archivo de imagen y s&uacute;belo al servidor de tu sitio web para obtener una URL accesible desde la web.<\/li>\n\n\n\n<li><strong>Abre el archivo HTML de tu tema<\/strong>. Busca el archivo de plantilla adecuado, como <strong>header.php<\/strong> o <strong>footer.php<\/strong>, donde quieras que aparezca la imagen.<\/li>\n\n\n\n<li><strong>A&ntilde;ade el atributo img src<\/strong>. A&ntilde;ade la etiqueta HTML b&aacute;sica <strong>&lt;img&gt;<\/strong> y usa el atributo <strong>src<\/strong> para indicar la URL de la imagen.<\/li>\n\n\n\n<li><strong>Indica las dimensiones de la imagen<\/strong>. Define el ancho y la altura para evitar que el contenido de la p&aacute;gina se desplace mientras se carga la imagen.<\/li>\n\n\n\n<li><strong>A&ntilde;ade el atributo alt<\/strong>. Incluye un texto alternativo que describa la imagen para mejorar la accesibilidad y el SEO.<\/li>\n\n\n\n<li><strong>Comprueba si hay errores y guarda los cambios<\/strong>. Revisa el c&oacute;digo para detectar posibles errores y guarda el archivo para aplicar los cambios.<\/li>\n\n\n\n<li><strong>A&ntilde;ade un enlace a la imagen<\/strong>. Haz que la imagen sea clicable incluyendo la etiqueta <strong>&lt;img&gt;<\/strong> dentro de una etiqueta de enlace (<strong>&lt;a&gt;<\/strong>) que dirija a tu p&aacute;gina de inicio o a otra p&aacute;gina relevante.<\/li>\n<\/ol><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-en-resumen\">En resumen<\/h2><ul class=\"wp-block-list\">\n<li>Para insertar una imagen en HTML, s&uacute;bela a tu servidor o a la biblioteca de contenido multimedia y copia su URL.<\/li>\n\n\n\n<li>Abre el archivo HTML o de plantilla donde quieras que aparezca y a&ntilde;ade una etiqueta <code>&lt;img&gt;<\/code> con los atributos <code>src<\/code>, <code>width<\/code>, <code>height<\/code> y <code>alt<\/code>.<\/li>\n\n\n\n<li>Guarda el archivo, comprueba que la imagen se muestre correctamente y envuelve la etiqueta <code>&lt;img&gt;<\/code> con una etiqueta <code>&lt;a&gt;<\/code> para que sea clicable.<\/li>\n<\/ul><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-1-prepara-y-sube-tu-imagen\">1. Prepara y sube tu imagen<\/h2><p class=\"wp-block-paragraph\">Antes de a&ntilde;adir una imagen mediante c&oacute;digo, debes subirla a tu servidor web. En este paso, tendr&aacute;s que optimizar el archivo y subirlo a una ubicaci&oacute;n desde la que puedas acceder a &eacute;l mediante una URL directa. M&aacute;s adelante necesitar&aacute;s esta URL para el atributo <strong>src<\/strong>.<\/p><p class=\"wp-block-paragraph\">Si utilizas WordPress, la forma m&aacute;s habitual de hacerlo es a trav&eacute;s de la biblioteca de contenido multimedia:<\/p><ol class=\"wp-block-list\">\n<li>Desde el panel de control de WordPress, ve a <strong>Contenido multimedia &rarr; A&ntilde;adir nuevo<\/strong>.<\/li>\n\n\n\n<li>Arrastra y suelta el archivo de imagen o selecci&oacute;nalo para subirlo.<\/li>\n\n\n\n<li>Una vez subido, haz clic en el bot&oacute;n <strong>Copiar el enlace al portapapeles<\/strong> situado junto a la imagen. Guarda esta URL, ya que la necesitar&aacute;s en los siguientes pasos.<\/li>\n<\/ol><div class=\"wp-block-image is-style-default\"><figure data-wp-context='{\"imageId\":\"6ace7b61edd78\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ace7b61edd78\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2026\/09\/Administracion-de-WordPress-Subir-nuevo-contenido-multimedia-Copiar-la-URL-al-portapapeles-Resaltado.png\/w=1024,h=1024,fit=scale-down\" alt=\"Bot&oacute;n Copiar el enlace al portapapeles resaltado en la p&aacute;gina de contenido multimedia de WordPress\" class=\"wp-image-56682\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p class=\"wp-block-paragraph\">Tambi&eacute;n puedes usar el gestor de archivos del panel de control de tu hosting. Este m&eacute;todo resulta especialmente &uacute;til para sitios web est&aacute;ticos o para guardar im&aacute;genes fuera de la carpeta de subidas predeterminada de WordPress.<\/p><p class=\"wp-block-paragraph\">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 <strong>public_html<\/strong> o a una subcarpeta, como <strong>images<\/strong>, y hacer clic en el bot&oacute;n <strong>Subir<\/strong> para a&ntilde;adir el archivo.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ace7b61ef4c6\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ace7b61ef4c6\" class=\"aligncenter size-large is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"271\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/07\/gestor-de-archivos-1.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-41219\" style=\"width:840px;height:auto\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/07\/gestor-de-archivos-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/07\/gestor-de-archivos-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/07\/gestor-de-archivos-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/07\/gestor-de-archivos-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><figure class=\"wp-block-image size-large\"><a aria-label=\"Mx\" href=\"\/mx\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-29291\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-2-accede-al-archivo-html-de-tu-tema\">2. Accede al archivo HTML de tu tema<\/h2><p class=\"wp-block-paragraph\">Para que una imagen aparezca en todas las p&aacute;ginas, por ejemplo, como logotipo en la cabecera, tendr&aacute;s que editar un archivo de plantilla que controle la estructura de tu web, como <strong>header.php<\/strong> o <strong>footer.php<\/strong>, en lugar de modificar una sola entrada.<\/p><p class=\"wp-block-paragraph\">Antes de modificar los archivos del tema, haz siempre un <strong>backup<\/strong> de tu sitio web. Un peque&ntilde;o error podr&iacute;a hacer que tu web dejara de funcionar correctamente. Con un backup, podr&aacute;s restaurarla r&aacute;pidamente.<\/p><p class=\"wp-block-paragraph\">Tambi&eacute;n te recomendamos hacer estos cambios en un <a href=\"\/mx\/tutoriales\/utilizar-child-theme\/\">tema hijo<\/a> para evitar que las personalizaciones se sobrescriban cuando actualices el tema principal.<\/p><p class=\"wp-block-paragraph\">Una vez que tengas el backup, sigue estos pasos en el Editor de archivos de temas de WordPress:<\/p><ol class=\"wp-block-list\">\n<li>Desde el panel de control de WordPress, ve a <strong>Apariencia &rarr; Editor de archivos de temas<\/strong>.<\/li>\n\n\n\n<li>A la derecha, selecciona el tema activo.<\/li>\n\n\n\n<li>Busca el archivo que quieras editar. Para a&ntilde;adir un logotipo a la cabecera, normalmente tendr&aacute;s que editar <strong>header.php<\/strong>. Para a&ntilde;adir un elemento al pie de p&aacute;gina, normalmente tendr&aacute;s que editar <strong>footer.php<\/strong>.<\/li>\n\n\n\n<li>Haz clic en el archivo para abrirlo en el editor.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ace7b61f33ae\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ace7b61f33ae\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2026\/09\/Administracion-de-WordPress-editar-temas-encabezado-php-seleccionado.png\/w=1024,h=1024,fit=scale-down\" alt=\"Archivo header.php seleccionado en el Editor de archivos de temas de WordPress\" class=\"wp-image-56681\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-3-anade-el-atributo-img-src-a-la-imagen\">3. A&ntilde;ade el atributo img src a la imagen<\/h2><p class=\"wp-block-paragraph\">Para insertar la imagen, a&ntilde;ade la etiqueta <strong>&lt;img&gt;<\/strong> al archivo HTML y utiliza el atributo <strong>src<\/strong> para indicar su URL. La etiqueta <strong>&lt;img&gt;<\/strong> indica al navegador que debe mostrar una imagen. Es una etiqueta vac&iacute;a, por lo que no necesita una etiqueta de cierre como <strong>&lt;\/img&gt;<\/strong>.<\/p><p class=\"wp-block-paragraph\">El atributo src, abreviatura de &ldquo;source&rdquo; (fuente), indica al navegador d&oacute;nde se encuentra la imagen. Aqu&iacute; debes pegar la URL del archivo que copiaste de la biblioteca de contenido multimedia en el paso 1.<\/p><p class=\"wp-block-paragraph\">Busca el lugar del c&oacute;digo donde quieras mostrar la imagen, por ejemplo, dentro de la secci&oacute;n <strong>&lt;header&gt;<\/strong> de <strong>header.php<\/strong>, y a&ntilde;ade el siguiente fragmento. Sustituye la URL de ejemplo por la URL real de tu imagen:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img src=\"https:\/\/your-domain.tld\/wp-content\/uploads\/2025\/11\/your-image.png\"&gt;<\/pre><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ace7b62020ce\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ace7b62020ce\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2026\/09\/Administracion-de-WordPress-editar-temas-img-src-resaltado.png\/w=1024,h=1024,fit=scale-down\" alt=\"L&iacute;nea con el atributo src de la imagen resaltada en el Editor de archivos de temas de WordPress\" class=\"wp-image-56677\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p class=\"wp-block-paragraph\">Esta URL completa se denomina &ldquo;ruta absoluta&rdquo; y es la opci&oacute;n m&aacute;s fiable al editar archivos del tema.<\/p><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-4-define-el-ancho-y-la-altura-de-la-imagen\">4. Define el ancho y la altura de la imagen<\/h2><p class=\"wp-block-paragraph\">Para definir el ancho y la altura de la imagen, a&ntilde;ade los atributos <strong>width<\/strong> y <strong>height<\/strong> directamente a la etiqueta <strong>&lt;img&gt;<\/strong>. Estos atributos son importantes para el rendimiento y la experiencia de usuario porque indican al navegador cu&aacute;nto espacio debe reservar para la imagen incluso antes de que se cargue.<\/p><p class=\"wp-block-paragraph\">De esta forma, se evita el Cumulative Layout Shift (CLS), un problema que hace que el contenido de la p&aacute;gina cambie de posici&oacute;n mientras se cargan las im&aacute;genes.<\/p><p class=\"wp-block-paragraph\">A&ntilde;ade los atributos <strong>width<\/strong> y <strong>height<\/strong> a la etiqueta <strong>&lt;img&gt;<\/strong> e indica las dimensiones originales de la imagen en p&iacute;xeles:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img src=\"https:\/\/your-domain.tld\/wp-content\/uploads\/2025\/11\/your-image.png\" width=\"180\" height=\"60\"&gt;<\/pre><p class=\"wp-block-paragraph\">Ten en cuenta que solo debes indicar los n&uacute;meros. No a&ntilde;adas <strong>px<\/strong> 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&oacute;n de aspecto original.<\/p><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-5-anade-un-atributo-alt-descriptivo\">5. A&ntilde;ade un atributo alt descriptivo<\/h2><p class=\"wp-block-paragraph\">El atributo <strong>alt<\/strong>, tambi&eacute;n conocido como texto alternativo, es una breve descripci&oacute;n de la imagen. Es importante principalmente por dos motivos:<\/p><ul class=\"wp-block-list\">\n<li><strong>Accesibilidad<\/strong>. Los lectores de pantalla utilizan el texto del atributo <strong>alt<\/strong> para describir la imagen a las personas con discapacidad visual, lo que ayuda a que tu web sea accesible para todo el mundo.<\/li>\n\n\n\n<li><strong>SEO<\/strong>. Los motores de b&uacute;squeda utilizan el texto del atributo <strong>alt<\/strong> para entender el contenido y el contexto de la imagen, lo que puede ayudar a que aparezca en los resultados de b&uacute;squeda.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">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 &ldquo;logotipo&rdquo;.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img src=\"https:\/\/your-domain.tld\/wp-content\/uploads\/2025\/11\/your-image.png\" width=\"180\" height=\"60\" alt=\"A cat image\"&gt;<\/pre><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-6-comprueba-si-hay-errores-y-guarda-los-cambios\">6. Comprueba si hay errores y guarda los cambios<\/h2><p class=\"wp-block-paragraph\">Revisa la etiqueta <strong>&lt;img&gt;<\/strong> para comprobar que no haya errores y, despu&eacute;s, haz clic en el bot&oacute;n <strong>Actualizar archivo<\/strong> del editor de WordPress. Un solo car&aacute;cter incorrecto o unas comillas sin cerrar pueden impedir que la imagen se muestre o alterar el dise&ntilde;o de la p&aacute;gina.<\/p><p class=\"wp-block-paragraph\">Comprueba una vez m&aacute;s la l&iacute;nea de c&oacute;digo. La etiqueta <strong>&lt;img&gt;<\/strong> completa deber&iacute;a tener un aspecto similar a este:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img src=\"https:\/\/your-domain.tld\/wp-content\/uploads\/2025\/11\/your-logo.png\" width=\"180\" height=\"60\" alt=\"A cat image\"&gt;<\/pre><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ace7b6205350\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ace7b6205350\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2026\/09\/Administracion-de-WordPress-editar-temas-img-src-anchura-altura-texto-destacado.png\/w=1024,h=1024,fit=scale-down\" alt=\"Etiqueta img completa con los atributos src, width, height y alt resaltados en el editor\" class=\"wp-image-56685\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p class=\"wp-block-paragraph\">Cuando hayas comprobado que todo es correcto, haz clic en el bot&oacute;n <strong>Actualizar archivo<\/strong> situado en la parte inferior del Editor de archivos de temas. Abre tu sitio web en una pesta&ntilde;a nueva o en una ventana de navegaci&oacute;n privada y vuelve a cargar la p&aacute;gina para comprobar que la imagen se muestra correctamente.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ace7b6207e3a\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ace7b6207e3a\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2026\/09\/imagen-de-cabecera-de-WordPress.png\/w=1024,h=1024,fit=scale-down\" alt=\"Nueva imagen de cabecera mostrada en un sitio web de WordPress despu&eacute;s de actualizar el archivo\" class=\"wp-image-56690\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-7-anade-un-enlace-a-la-imagen\">7. A&ntilde;ade un enlace a la imagen<\/h2><p class=\"wp-block-paragraph\">Para a&ntilde;adir un enlace a una imagen, incluye la etiqueta <strong>&lt;img&gt;<\/strong> dentro de una etiqueta de enlace (<strong>&lt;a&gt;<\/strong>). Una imagen situada en la cabecera o el pie de p&aacute;gina, especialmente si es un logotipo, casi siempre deber&iacute;a ser clicable.<\/p><p class=\"wp-block-paragraph\">Es habitual hacer clic en el logotipo de una web para volver a la p&aacute;gina de inicio. Por eso, convertirlo en un enlace facilita la navegaci&oacute;n y mejora la experiencia de usuario.<\/p><p class=\"wp-block-paragraph\">La etiqueta <strong>&lt;a&gt;<\/strong> utiliza el atributo <strong>href<\/strong> para indicar la URL de destino. As&iacute; puedes hacer que el nuevo logotipo enlace a la p&aacute;gina de inicio de tu sitio web:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">  &lt;a href=\"https:\/\/your-domain.tld\/\"&gt;\n   &lt;img src=\"https:\/\/your-domain.tld\/wp-content\/uploads\/2025\/11\/your-logo.png\" width=\"180\" height=\"60\" alt=\"A cat image\"&gt;\n&lt;\/a&gt;<\/pre><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ace7b620a5ae\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ace7b620a5ae\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2026\/09\/Administracion-de-WordPress-editar-temas-a-href-img-src-resaltado.png\/w=1024,h=1024,fit=scale-down\" alt=\"Etiquetas a e img con los atributos href y src resaltados en el Editor de archivos de temas de WordPress\" class=\"wp-image-56689\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p class=\"wp-block-paragraph\">Despu&eacute;s de a&ntilde;adir este c&oacute;digo, vuelve a hacer clic en <strong>Actualizar archivo<\/strong>. Cuando visites tu web, el logotipo no solo se mostrar&aacute;, sino que tambi&eacute;n funcionar&aacute; como enlace.<\/p><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-proximos-pasos-organiza-tus-imagenes-en-la-biblioteca-de-contenido-multimedia-de-wordpress\">Pr&oacute;ximos pasos: organiza tus im&aacute;genes en la biblioteca de contenido multimedia de WordPress<\/h2><p class=\"wp-block-paragraph\">Insertar manualmente una imagen con HTML es ideal para elementos del tema, como los logotipos. A medida que tu web crezca, tendr&aacute;s que subir decenas o incluso cientos de im&aacute;genes para tus entradas y p&aacute;ginas.<\/p><p class=\"wp-block-paragraph\">En ese caso, organizar bien el contenido multimedia es fundamental. Si la biblioteca de contenido multimedia de WordPress est&aacute; desordenada, ser&aacute; m&aacute;s dif&iacute;cil encontrar im&aacute;genes, reutilizar contenido y encontrar las URL que necesitas.<\/p><p class=\"wp-block-paragraph\">Para organizar la biblioteca de contenido multimedia de WordPress, puedes instalar un plugin como <strong>FileBird<\/strong> y crear carpetas virtuales. Despu&eacute;s, solo tienes que arrastrar y soltar los archivos de contenido multimedia en ellas.<\/p><p class=\"wp-block-paragraph\">Organizar el contenido multimedia en carpetas te permitir&aacute; trabajar de forma mucho m&aacute;s r&aacute;pida y fiable con el contenido que a&ntilde;adas en el futuro.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Saber c&oacute;mo insertar una imagen en HTML es importante cuando necesitas colocar un logotipo o un gr&aacute;fico en un lugar concreto, como la cabecera o el pie de p&aacute;gina, y tu tema o editor de contenido no te permite hacerlo. A&ntilde;adir im&aacute;genes directamente con HTML te permite controlar mejor la presentaci&oacute;n visual de tu web. [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/mx\/tutoriales\/insertar-imagen-html\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":190,"featured_media":48362,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"C\u00f3mo insertar una imagen en HTML en 7 sencillos pasos","rank_math_description":"Aprende a insertar una imagen en HTML en 7 sencillos pasos. Descubre c\u00f3mo usar las etiquetas img y alt, ajustar sus dimensiones y a\u00f1adir un enlace.","rank_math_focus_keyword":"insertar una imagen en HTML","footnotes":""},"categories":[14503],"tags":[],"class_list":["post-28250","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sitio-web"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-insert-an-image-in-html\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-inserir-imagem-html-no-site\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/inserer-une-image-html\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/insertar-imagen-html\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-memasukkan-gambar-di-html\/","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/xmlrpc-wordpress\/","default":0},{"locale":"ar-AE","link":"http:\/\/www.hostinger.com\/ae\/tutorials\/xmlrpc-wordpress\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-insert-an-image-in-html\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-insert-an-image-in-html\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-insert-an-image-in-html\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-insert-an-image-in-html\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-insert-an-image-in-html\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-insert-an-image-in-html\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-insert-an-image-in-html\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/insertar-imagen-html\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/insertar-imagen-html\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/insertar-imagen-html\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-inserir-imagem-html-no-site\/","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/bild-in-html-einfuegen","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/28250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/users\/190"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/comments?post=28250"}],"version-history":[{"count":11,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/28250\/revisions"}],"predecessor-version":[{"id":48361,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/28250\/revisions\/48361"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/media\/48362"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/media?parent=28250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/categories?post=28250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/tags?post=28250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}