{"id":11005,"date":"2025-09-03T08:50:00","date_gmt":"2025-09-03T06:50:00","guid":{"rendered":"https:\/\/www.loading.es\/blog\/?p=11005"},"modified":"2025-09-01T10:51:49","modified_gmt":"2025-09-01T08:51:49","slug":"insertar-imagenes-en-html","status":"publish","type":"post","link":"https:\/\/www.loading.es\/blog\/insertar-imagenes-en-html\/","title":{"rendered":"C\u00f3mo insertar im\u00e1genes en HTML paso a paso para mejorar tu web"},"content":{"rendered":"\n<p>\u00bfQuieres aprender <strong>c\u00f3mo insertar im\u00e1genes en HTML paso a paso<\/strong> sin liarte con el c\u00f3digo? Las im\u00e1genes son la parte visual de cualquier web y sin ellas, un sitio puede parecer un libro sin ilustraciones. El contenido se entiende, s\u00ed, pero falta ese <strong>toque que lo hace atractivo<\/strong> y f\u00e1cil de recordar.<\/p>\n\n\n\n<p>Piensa en una <strong>tienda online sin fotos de sus productos<\/strong>. \u00bfComprar\u00edas algo solo leyendo la descripci\u00f3n? Seguramente no. Por eso, dominar el uso de la etiqueta <code>&lt;img&gt;<\/code> es tan importante como saber escribir un buen texto en tu p\u00e1gina.<\/p>\n\n\n\n<p>En esta gu\u00eda veremos de forma clara y sencilla c\u00f3mo <strong>a\u00f1adir im\u00e1genes en HTML<\/strong>, desde lo b\u00e1sico hasta trucos pr\u00e1cticos que mejoran la accesibilidad y el SEO. Te mostrar\u00e9 ejemplos f\u00e1ciles de aplicar y te dar\u00e9 consejos para <strong>evitar errores comunes<\/strong>.<\/p>\n\n\n\n<p>Al final, tendr\u00e1s las herramientas necesarias para que tus im\u00e1genes no solo se vean bien, sino que tambi\u00e9n hagan que <strong>tu web cargue r\u00e1pido<\/strong>, sea accesible y aparezca mejor posicionada en buscadores.<\/p>\n\n\n\n<p><strong><em>Tabla de Contenidos:<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-aioseo-table-of-contents\"><ul><li><a href=\"#aioseo-metodo-basico-para-insertar-una-imagen-en-html\">M\u00e9todo b\u00e1sico para insertar una imagen en HTML<\/a><ul><li><a href=\"#aioseo-ejemplo-practico-del-codigo-completo\">Ejemplo pr\u00e1ctico del c\u00f3digo completo<\/a><\/li><li><a href=\"#aioseo-que-hace-cada-parte-del-codigo\">Qu\u00e9 hace cada parte del c\u00f3digo<\/a><\/li><\/ul><\/li><li><a href=\"#aioseo-como-dar-estilo-y-posicion-a-las-imagenes\">C\u00f3mo dar estilo y posici\u00f3n a las im\u00e1genes<\/a><ul><li><a href=\"#aioseo-centrar-una-imagen-en-la-pagina\">Centrar una imagen en la p\u00e1gina<\/a><\/li><li><a href=\"#aioseo-anadir-margenes-y-bordes-con-css\">A\u00f1adir m\u00e1rgenes y bordes con CSS<\/a><\/li><li><a href=\"#aioseo-diferencias-entre-html-antiguo-y-html5\">Diferencias entre HTML antiguo y HTML5<\/a><\/li><\/ul><\/li><li><a href=\"#aioseo-consejos-para-organizar-las-imagenes-de-tu-web\">Consejos para organizar las im\u00e1genes de tu web<\/a><ul><li><a href=\"#aioseo-nombres-de-archivo-claros-y-descriptivos\">Nombres de archivo claros y descriptivos<\/a><\/li><li><a href=\"#aioseo-crea-carpetas-especificas-para-las-imagenes\">Crea carpetas espec\u00edficas para las im\u00e1genes<\/a><\/li><li><a href=\"#aioseo-evita-errores-comunes-con-las-rutas\">Evita errores comunes con las rutas<\/a><\/li><\/ul><\/li><li><a href=\"#aioseo-optimizacion-y-seo-de-las-imagenes\">Optimizaci\u00f3n y SEO de las im\u00e1genes<\/a><ul><li><a href=\"#aioseo-formatos-recomendados-para-web\">Formatos recomendados para web<\/a><\/li><li><a href=\"#aioseo-uso-correcto-del-atributo-alt-en-seo\">Uso correcto del atributo alt en SEO<\/a><\/li><li><a href=\"#aioseo-como-optimizar-el-peso-de-las-imagenes\">C\u00f3mo optimizar el peso de las im\u00e1genes<\/a><\/li><\/ul><\/li><li><a href=\"#aioseo-errores-frecuentes-al-insertar-imagenes-en-html\">Errores frecuentes al insertar im\u00e1genes en HTML<\/a><ul><li><a href=\"#aioseo-imagenes-que-no-cargan-por-rutas-mal-escritas\">Im\u00e1genes que no cargan por rutas mal escritas<\/a><\/li><li><a href=\"#aioseo-usar-imagenes-demasiado-grandes-sin-optimizar\">Usar im\u00e1genes demasiado grandes sin optimizar<\/a><\/li><li><a href=\"#aioseo-atributos-obsoletos-como-align\">Atributos obsoletos como align<\/a><\/li><\/ul><\/li><li><a href=\"#aioseo-conclusion\">Conclusi\u00f3n<\/a><\/li><\/ul><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.loading.es\/hosting\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1000\" height=\"100\" src=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png\" alt=\"oferta para contratar hosting web\" class=\"wp-image-8039\" srcset=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png 1000w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-300x30.png 300w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-768x77.png 768w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-850x85.png 850w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<!-- BLOQUE 1: INTRODUCCI\u00d3N ATRACTIVA -->\n<div style=\"background-color: #f3f4f6; border-left: 5px solid #0E76BE; padding: 20px; margin: 25px 0; border-radius: 8px;\">\n    <p style=\"margin: 0; font-family: Arial, sans-serif; color: #374151; font-size: 1.1em; line-height: 1.6;\">\u00bfQuieres aprender a <strong>insertar im\u00e1genes en HTML paso a paso<\/strong> sin liarte con el c\u00f3digo? Las im\u00e1genes son clave para que una web sea atractiva. En esta gu\u00eda te ense\u00f1amos a dominar la etiqueta <code>&lt;img&gt;<\/code> de forma sencilla para que tu web no solo se vea bien, sino que tambi\u00e9n cargue r\u00e1pido y mejore su SEO.<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-metodo-basico-para-insertar-una-imagen-en-html\">M\u00e9todo b\u00e1sico para insertar una imagen en HTML<\/h2>\n\n\n\n<p>Para mostrar una foto en tu web usamos la etiqueta &lt; img &gt;. Es una etiqueta \u201cvac\u00eda\u201d, no lleva texto dentro ni tiene cierre. Piensa en ella como un <strong>marco<\/strong> que le dice al navegador d\u00f3nde est\u00e1 la imagen y <strong>c\u00f3mo<\/strong> debe mostrarla.<\/p>\n\n\n\n<p>Dos piezas son imprescindibles: <strong><code>src<\/code><\/strong> y <strong><code>alt<\/code><\/strong>. <em><code>src<\/code> es la direcci\u00f3n de la imagen; <code>alt<\/code> es su descripci\u00f3n<\/em>. \u00bfPor qu\u00e9 <code>alt<\/code>? Porque ayuda a la <strong>accesibilidad<\/strong>, al <strong>SEO<\/strong> y aparece si la imagen no carga. Como una etiqueta pegada al marco que explica lo que se ve.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-ejemplo-practico-del-codigo-completo\">Ejemplo pr\u00e1ctico del c\u00f3digo completo<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Ruta relativa dentro del proyecto --&gt;\n&lt;img src=\"img\/producto-cargador-usb.jpg\" alt=\"Cargador USB blanco con dos puertos\" width=\"600\" height=\"400\"&gt;\n\n&lt;!-- Ruta absoluta desde otro dominio --&gt;\n&lt;img src=\"https:\/\/cdn.ejemplo.com\/imagenes\/logo-marca.svg\" alt=\"Logo de la marca Ejemplo\"&gt;<\/code><\/pre>\n\n\n\n<ul>\n<li>En el primer caso la imagen est\u00e1 en la carpeta <strong>img<\/strong> de tu web.<\/li>\n\n\n\n<li>En el segundo caso la imagen viene de una <strong>URL completa<\/strong>.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p><em>Consejo r\u00e1pido<\/em>: si puedes, guarda tus im\u00e1genes en una carpeta como <strong>\/img\/<\/strong> y usa nombres claros. Evita espacios, tildes y la \u00f1.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-que-hace-cada-parte-del-codigo\">Qu\u00e9 hace cada parte del c\u00f3digo<\/h3>\n\n\n\n<!-- BLOQUE 2: CHECKLIST VISUAL DE ATRIBUTOS -->\n<div style=\"font-family: Arial, sans-serif; margin-top: 25px;\">\n    <p style=\"font-size: 1.2em; color: #111827; margin-bottom: 15px; font-weight: bold;\">\u00bfQu\u00e9 hace cada parte del c\u00f3digo?<\/p>\n    <ul style=\"list-style-type: none; padding-left: 0;\">\n        <li style=\"background-color: #f9fafb; padding: 15px; border-radius: 6px; margin-bottom: 10px; color: #374151; font-size: 1.05em;\"><strong>src=\u00bb&#8230;\u00bb<\/strong> \u2192 Es la <strong>ruta<\/strong> (la direcci\u00f3n) de la imagen. Si te equivocas, no se ver\u00e1.<\/li>\n        <li style=\"background-color: #f9fafb; padding: 15px; border-radius: 6px; margin-bottom: 10px; color: #374151; font-size: 1.05em;\"><strong>alt=\u00bb&#8230;\u00bb<\/strong> \u2192 Es el <strong>texto alternativo<\/strong>. Describe la imagen con palabras simples para SEO y accesibilidad.<\/li>\n        <li style=\"background-color: #f9fafb; padding: 15px; border-radius: 6px; margin-bottom: 10px; color: #374151; font-size: 1.05em;\"><strong>width \/ height<\/strong> \u2192 Marcan el <strong>tama\u00f1o<\/strong>. \u00dasalos para reservar el espacio y evitar que la p\u00e1gina \u00absalte\u00bb al cargar.<\/li>\n        <li style=\"background-color: #f9fafb; padding: 15px; border-radius: 6px; margin-bottom: 10px; color: #374151; font-size: 1.05em;\"><strong>Formato<\/strong> \u2192 Elige el tipo de archivo adecuado: <strong>JPG<\/strong> para fotos, <strong>PNG<\/strong> para transparencias, <strong>SVG<\/strong> para logos y <strong>WebP\/AVIF<\/strong> para la mejor optimizaci\u00f3n.<\/li>\n    <\/ul>\n<\/div>\n\n\n\n<p><strong>As\u00ed lo recuerdas f\u00e1cil<\/strong>: <code>src<\/code> es la <strong>direcci\u00f3n<\/strong>, <code>alt<\/code> es la <strong>etiqueta<\/strong>, <code>width\/height<\/code> son las <strong>medidas<\/strong> del marco. Como colgar un cuadro en la pared: primero sabes <strong>d\u00f3nde<\/strong> va, luego <strong>qu\u00e9<\/strong> muestra y por \u00faltimo <strong>de qu\u00e9 tama\u00f1o<\/strong> lo cuelgas.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Atributo<\/th><th>Funci\u00f3n<\/th><th>Ejemplo<\/th><\/tr><\/thead><tbody><tr><td>src<\/td><td>Indica la ruta de la imagen, ya sea relativa o absoluta.<\/td><td>src=\u00bbimg\/foto.jpg\u00bb<\/td><\/tr><tr><td>alt<\/td><td>Texto alternativo que describe la imagen. Mejora accesibilidad y SEO.<\/td><td>alt=\u00bbCargador USB blanco\u00bb<\/td><\/tr><tr><td>width<\/td><td>Define el ancho de la imagen en p\u00edxeles o porcentaje.<\/td><td>width=\u00bb600&#8243;<\/td><\/tr><tr><td>height<\/td><td>Define la altura de la imagen en p\u00edxeles o porcentaje.<\/td><td>height=\u00bb400&#8243;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-como-dar-estilo-y-posicion-a-las-imagenes\">C\u00f3mo dar estilo y posici\u00f3n a las im\u00e1genes<\/h2>\n\n\n\n<p>Cuando insertas una imagen en HTML lo b\u00e1sico es que se vea, pero pronto surge la duda: \u00bfc\u00f3mo hago para que quede centrada o para que no pegue tanto con el texto? Aqu\u00ed es donde entra en juego el <strong>CSS<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-centrar-una-imagen-en-la-pagina\">Centrar una imagen en la p\u00e1gina<\/h3>\n\n\n\n<p>En el pasado se usaba el atributo <code>align=\"center\"<\/code>, pero hoy ya no se recomienda. Con <strong>CSS<\/strong> tienes m\u00e1s control y la p\u00e1gina se adapta mejor a m\u00f3viles y pantallas de distintos tama\u00f1os.<\/p>\n\n\n\n<p>Un ejemplo pr\u00e1ctico:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"img\/foto.jpg\" alt=\"Ejemplo de imagen\" class=\"centrada\"&gt;\n.centrada {\n  display: block;\n  margin: 0 auto;\n}<\/code><\/pre>\n\n\n\n<p>La l\u00f3gica es sencilla: al poner la imagen como bloque y darle un margen autom\u00e1tico, el navegador la coloca justo en el centro, como si ajustaras un cuadro en la pared para que quede recto.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-anadir-margenes-y-bordes-con-css\">A\u00f1adir m\u00e1rgenes y bordes con CSS<\/h3>\n\n\n\n<p>Si una imagen est\u00e1 pegada al texto, el resultado puede ser inc\u00f3modo de leer. Con <strong>m\u00e1rgenes<\/strong> puedes darle aire alrededor.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>img {\n  margin: 20px;\n}<\/code><\/pre>\n\n\n\n<p>Y si quieres destacar una foto, puedes a\u00f1adir un <strong>borde<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>img {\n  border: 2px solid #0E76BE;\n  border-radius: 8px;\n}<\/code><\/pre>\n\n\n\n<p>As\u00ed consigues que la imagen se vea enmarcada, como si tuviera un marco real.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-diferencias-entre-html-antiguo-y-html5\">Diferencias entre HTML antiguo y HTML5<\/h3>\n\n\n\n<p>En versiones antiguas de HTML se usaban atributos como:<\/p>\n\n\n\n<ul>\n<li><code>align=\"left\"<\/code> o <code>align=\"right\"<\/code> para colocar im\u00e1genes a un lado.<\/li>\n\n\n\n<li><code>border=\"1\"<\/code> para a\u00f1adir un borde.<\/li>\n\n\n\n<li><code>hspace<\/code> y <code>vspace<\/code> para dar espacio alrededor.<\/li>\n<\/ul>\n\n\n\n<p>Hoy esos atributos est\u00e1n <strong>obsoletos<\/strong>. Todo ese trabajo lo hace CSS de forma m\u00e1s limpia y flexible.<\/p>\n\n\n\n<!-- BLOQUE 3 (CORREGIDO): COMPARATIVA VISUAL RESPONSIVE -->\n<table role=\"presentation\" style=\"width: 100%; border-collapse: collapse; border-spacing: 0; font-family: Arial, sans-serif; margin-top: 30px; margin-bottom: 30px;\">\n    <tbody>\n        <tr>\n            <!-- Columna Izquierda -->\n            <td style=\"width: 50%; padding-right: 10px; vertical-align: top;\">\n                <div style=\"background-color: #fef2f2; padding: 25px; border-radius: 10px; border-top: 5px solid #dc2626; height: 100%;\">\n                    <div style=\"color: #991b1b; font-size:1.1em; font-weight:bold;\">\u274c HTML antiguo (obsoleto)<\/div>\n                    <p style=\"color: #374151; line-height: 1.6; margin-top:10px;\">Antes se usaban atributos como <code>align<\/code> o <code>border<\/code> directamente en la etiqueta <code>&lt;img&gt;<\/code>. <strong>Estos m\u00e9todos ya no se recomiendan<\/strong> porque son poco flexibles.<\/p>\n                    <pre style=\"background-color: #4a4a4a; color: #f2f2f2; padding: 15px; border-radius: 8px; font-family: 'Courier New', monospace; font-size:0.9em; white-space: pre-wrap; word-break: break-all;\"><code>&lt;img src=\"...\" align=\"center\" border=\"1\"&gt;<\/code><\/pre>\n                <\/div>\n            <\/td>\n            <!-- Columna Derecha -->\n            <td style=\"width: 50%; padding-left: 10px; vertical-align: top;\">\n                <div style=\"background-color: #f0fdf4; padding: 25px; border-radius: 10px; border-top: 5px solid #16a34a; height: 100%;\">\n                    <div style=\"color: #15803d; font-size:1.1em; font-weight:bold;\">\u2705 HTML5 + CSS (recomendado)<\/div>\n                    <p style=\"color: #374151; line-height: 1.6; margin-top:10px;\">Hoy en d\u00eda, todo el estilo se gestiona con CSS. Es m\u00e1s potente y limpio. Para editores, se usa el atributo <code>style=\"\"<\/code> para centrar, a\u00f1adir bordes, etc.<\/p>\n                    <pre style=\"background-color: #4a4a4a; color: #f2f2f2; padding: 15px; border-radius: 8px; font-family: 'Courier New', monospace; font-size:0.9em; white-space: pre-wrap; word-break: break-all;\"><code>&lt;img src=\"...\" style=\"display:block; margin:0 auto; border:2px solid #ddd;\"&gt;<\/code><\/pre>\n                <\/div>\n            <\/td>\n        <\/tr>\n    <\/tbody>\n<\/table>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-consejos-para-organizar-las-imagenes-de-tu-web\">Consejos para organizar las im\u00e1genes de tu web<\/h2>\n\n\n\n<p>\u00bfHas intentado alguna vez buscar una foto en tu ordenador y no la encontrabas porque estaba perdida en una carpeta llena de archivos llamados <em>IMG001.jpg, IMG002.jpg\u2026<\/em>? En una web pasa lo mismo: si no organizas tus im\u00e1genes, pronto tendr\u00e1s un caos dif\u00edcil de manejar y adem\u00e1s no es bueno para el SEO.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-nombres-de-archivo-claros-y-descriptivos\">Nombres de archivo claros y descriptivos<\/h3>\n\n\n\n<p>El nombre de cada imagen importa m\u00e1s de lo que parece. No solo te ayuda a ti a identificarla, tambi\u00e9n ayuda a los buscadores a entender su contenido.<\/p>\n\n\n\n<ul>\n<li>Usa <strong>palabras simples y descriptivas<\/strong>: mejor <code>cargador-usb-blanco.jpg<\/code> que <code>IMG001.jpg<\/code>.<\/li>\n\n\n\n<li>Separa palabras con <strong>guiones medios (-)<\/strong>, no espacios ni guiones bajos.<\/li>\n\n\n\n<li>Evita tildes, \u00f1 o s\u00edmbolos raros.<\/li>\n<\/ul>\n\n\n\n<p>Es como poner etiquetas a las cajas de una mudanza: si escribes \u201cropa invierno\u201d, sabr\u00e1s qu\u00e9 hay dentro; si solo pones \u201ccaja 1\u201d, te tocar\u00e1 abrirlas todas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-crea-carpetas-especificas-para-las-imagenes\">Crea carpetas espec\u00edficas para las im\u00e1genes<\/h3>\n\n\n\n<p>Tener todas las im\u00e1genes sueltas en la ra\u00edz de tu proyecto es un error com\u00fan. Lo ideal es crear una carpeta principal, como <strong>\/img\/<\/strong> o <strong>\/images\/<\/strong>, y dentro organizar por categor\u00edas si tu web es grande.<\/p>\n\n\n\n<p>Ejemplo de estructura:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/img\n   \/productos\n   \/banners\n   \/iconos<\/code><\/pre>\n\n\n\n<p>As\u00ed, cuando insertes la ruta de una imagen, ser\u00e1 mucho m\u00e1s f\u00e1cil recordarla:<br><code>src=\"img\/productos\/cargador-usb-blanco.jpg\"<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-evita-errores-comunes-con-las-rutas\">Evita errores comunes con las rutas<\/h3>\n\n\n\n<p>El error t\u00edpico es que la imagen no aparece en la p\u00e1gina porque la ruta est\u00e1 mal escrita. Algunas recomendaciones:<\/p>\n\n\n\n<ul>\n<li>Comprueba siempre que el nombre del archivo coincide exactamente (las may\u00fasculas importan en algunos servidores).<\/li>\n\n\n\n<li>No uses espacios en los nombres. Si necesitas separar, usa guiones.<\/li>\n\n\n\n<li>Revisa si la ruta es relativa o absoluta seg\u00fan d\u00f3nde est\u00e9 tu archivo HTML.<\/li>\n<\/ul>\n\n\n\n<p>Piensa en las rutas como las calles de una ciudad. Si das la direcci\u00f3n equivocada, el navegador nunca encontrar\u00e1 la \u201ccasa\u201d donde vive tu imagen.<\/p>\n\n\n\n<!-- BLOQUE 4: TABLA DE ORGANIZACI\u00d3N MEJORADA -->\n<table style=\"width: 100%; border-collapse: collapse; margin: 2rem 0; font-family: Arial, sans-serif; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;\">\n    <thead>\n        <tr style=\"background-color: #0E76BE; color:#fff;\">\n            <th style=\"padding: 15px; text-align: left; border-bottom: 1px solid #e5e7eb;\">Pr\u00e1ctica recomendada<\/th>\n            <th style=\"padding: 15px; text-align: left; border-bottom: 1px solid #e5e7eb;\">Ejemplo Correcto \ud83d\udc4d<\/th>\n            <th style=\"padding: 15px; text-align: left; border-bottom: 1px solid #e5e7eb;\">Ejemplo Incorrecto \ud83d\udc4e<\/th>\n        <\/tr>\n    <\/thead>\n    <tbody>\n        <tr style=\"background-color: #f9fafb;\">\n            <td style=\"padding: 15px; border-bottom: 1px solid #e5e7eb;\"><strong style=\"color: #1f2937;\">Nombres de archivo<\/strong><\/td>\n            <td style=\"padding: 15px; border-bottom: 1px solid #e5e7eb; color: #374151;\"><code>cargador-usb-blanco.jpg<\/code><\/td>\n            <td style=\"padding: 15px; border-bottom: 1px solid #e5e7eb; color: #374151;\"><code>IMG_1234.JPG<\/code> o <code>cargador usb.jpg<\/code><\/td>\n        <\/tr>\n        <tr>\n            <td style=\"padding: 15px; border-bottom: 1px solid #e5e7eb;\"><strong style=\"color: #1f2937;\">Estructura de carpetas<\/strong><\/td>\n            <td style=\"padding: 15px; border-bottom: 1px solid #e5e7eb; color: #374151;\"><code>\/img\/productos\/<\/code><\/td>\n            <td style=\"padding: 15px; border-bottom: 1px solid #e5e7eb; color: #374151;\">Todas las im\u00e1genes sueltas en la ra\u00edz<\/td>\n        <\/tr>\n        <tr style=\"background-color: #f9fafb;\">\n            <td style=\"padding: 15px;\"><strong style=\"color: #1f2937;\">Rutas en el c\u00f3digo<\/strong><\/td>\n            <td style=\"padding: 15px; color: #374151;\"><code>src=\"img\/producto.jpg\"<\/code><\/td>\n            <td style=\"padding: 15px; color: #374151;\"><code>src=\"Img\/Producto.JPG\"<\/code> (las may\u00fasculas importan)<\/td>\n        <\/tr>\n    <\/tbody>\n<\/table>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-optimizacion-y-seo-de-las-imagenes\">Optimizaci\u00f3n y SEO de las im\u00e1genes<\/h2>\n\n\n\n<p>Las im\u00e1genes no solo hacen que tu web sea m\u00e1s atractiva, tambi\u00e9n pueden marcar la diferencia en el <strong>posicionamiento en buscadores<\/strong> y en la <strong>velocidad de carga<\/strong>. Una imagen mal optimizada puede hacer que tu p\u00e1gina tarde demasiado en abrirse, y eso a Google no le gusta nada.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-formatos-recomendados-para-web\">Formatos recomendados para web<\/h3>\n\n\n\n<p>Elegir el formato correcto es clave. No todos sirven para lo mismo:<\/p>\n\n\n\n<ul>\n<li><strong>JPG<\/strong> \u2192 Ideal para fotos. Buen equilibrio entre calidad y peso.<\/li>\n\n\n\n<li><strong>PNG<\/strong> \u2192 Perfecto cuando necesitas transparencia o gr\u00e1ficos con pocos colores.<\/li>\n\n\n\n<li><strong>SVG<\/strong> \u2192 Muy usado en iconos y logotipos porque no pierde calidad al escalar.<\/li>\n\n\n\n<li><strong>WebP y AVIF<\/strong> \u2192 Formatos modernos que ofrecen gran calidad con un peso mucho menor. Google los recomienda porque ayudan a mejorar la velocidad.<\/li>\n<\/ul>\n\n\n\n<p>Un ejemplo: una foto de producto en <strong><a href=\"https:\/\/www.loading.es\/blog\/convertir-imagenes-de-prestashop-a-webp\/\">WebP<\/a><\/strong> puede pesar hasta un 70% menos que en JPG, y visualmente casi no notar\u00e1s la diferencia.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-uso-correcto-del-atributo-alt-en-seo\">Uso correcto del atributo alt en SEO<\/h3>\n\n\n\n<p>El atributo <strong>alt<\/strong> no solo sirve para accesibilidad. Tambi\u00e9n es una se\u00f1al importante para los buscadores.<\/p>\n\n\n\n<ul>\n<li>Describe la imagen de forma <strong>clara y sencilla<\/strong>.<\/li>\n\n\n\n<li>Incluye palabras clave solo si tienen sentido.<\/li>\n\n\n\n<li>Evita frases gen\u00e9ricas como \u201cimagen1\u201d o \u201cfoto bonita\u201d.<\/li>\n<\/ul>\n\n\n\n<p>Por ejemplo, en lugar de poner:<br><code>alt=\"foto\"<\/code><br>Es mejor escribir:<br><code>alt=\"Cargador r\u00e1pido USB tipo C color negro\"<\/code><\/p>\n\n\n\n<p>As\u00ed ayudas a que la imagen pueda aparecer en <strong><a href=\"https:\/\/images.google.com\/\">Google Im\u00e1genes<\/a><\/strong> y refuerzas el SEO de tu p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-como-optimizar-el-peso-de-las-imagenes\">C\u00f3mo optimizar el peso de las im\u00e1genes<\/h3>\n\n\n\n<p>El peso de cada archivo influye directamente en el rendimiento. \u00bfDe qu\u00e9 sirve tener un dise\u00f1o bonito si tarda 10 segundos en cargar?<\/p>\n\n\n\n<ul>\n<li><strong>Comprime<\/strong> las im\u00e1genes antes de subirlas (herramientas como TinyPNG o Squoosh funcionan muy bien). <a href=\"https:\/\/www.loading.es\/blog\/5-tips-para-optimizar-las-imagenes-de-tu-web\/\">Optimizar las im\u00e1genes<\/a> es algo imprescindible.<\/li>\n\n\n\n<li>Ajusta el tama\u00f1o a lo que realmente necesitas. No subas una foto de 4000px si la mostrar\u00e1s a 800px.<\/li>\n\n\n\n<li>Usa <strong>lazy loading<\/strong> (<code>loading=\"lazy\"<\/code>) para que las im\u00e1genes solo se carguen cuando el usuario llegue a esa parte de la p\u00e1gina.<\/li>\n<\/ul>\n\n\n\n<p>Ejemplo de imagen optimizada con carga diferida:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"img\/cargador-usb.webp\" alt=\"Cargador r\u00e1pido USB negro\" width=\"600\" height=\"400\" loading=\"lazy\"&gt;<\/code><\/pre>\n\n\n\n<p>Con estos pasos tu web ser\u00e1 m\u00e1s r\u00e1pida, m\u00e1s ligera y tendr\u00e1 m\u00e1s posibilidades de aparecer arriba en Google.<\/p>\n\n\n\n<!-- BLOQUE 5: TABLA DE FORMATOS OPTIMIZADA -->\n<table style=\"width: 100%; border-collapse: collapse; margin: 2rem 0; font-family: Arial, sans-serif; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;\">\n    <thead>\n        <tr style=\"background-color: #0E76BE; color:#fff;\">\n            <th style=\"padding: 12px; text-align: left;\">Formato<\/th>\n            <th style=\"padding: 12px; text-align: left;\">Uso recomendado<\/th>\n            <th style=\"padding: 12px; text-align: left;\">Ventajas<\/th>\n        <\/tr>\n    <\/thead>\n    <tbody>\n        <tr>\n            <td style=\"padding: 12px; border-bottom: 1px solid #e5e7eb;\"><strong style=\"color: #1f2937;\">JPG<\/strong><\/td>\n            <td style=\"padding: 12px; border-bottom: 1px solid #e5e7eb; color: #374151;\">Fotograf\u00edas y fondos.<\/td>\n            <td style=\"padding: 12px; border-bottom: 1px solid #e5e7eb; color: #374151;\">Buen equilibrio calidad\/peso.<\/td>\n        <\/tr>\n        <tr style=\"background-color: #f9fafb;\">\n            <td style=\"padding: 12px; border-bottom: 1px solid #e5e7eb;\"><strong style=\"color: #1f2937;\">PNG<\/strong><\/td>\n            <td style=\"padding: 12px; border-bottom: 1px solid #e5e7eb; color: #374151;\">Im\u00e1genes con transparencia.<\/td>\n            <td style=\"padding: 12px; border-bottom: 1px solid #e5e7eb; color: #374151;\">Alta calidad, soporta transparencias.<\/td>\n        <\/tr>\n        <tr>\n            <td style=\"padding: 12px; border-bottom: 1px solid #e5e7eb;\"><strong style=\"color: #1f2937;\">SVG<\/strong><\/td>\n            <td style=\"padding: 12px; border-bottom: 1px solid #e5e7eb; color: #374151;\">Iconos y logotipos.<\/td>\n            <td style=\"padding: 12px; border-bottom: 1px solid #e5e7eb; color: #374151;\">Escalable sin perder calidad, muy ligero.<\/td>\n        <\/tr>\n        <tr style=\"background-color: #f9fafb;\">\n            <td style=\"padding: 12px;\"><strong style=\"color: #1f2937;\">WebP \/ AVIF<\/strong><\/td>\n            <td style=\"padding: 12px; color: #374151;\">Cualquier imagen en webs modernas.<\/td>\n            <td style=\"padding: 12px; color: #16a34a; font-weight:bold;\">\u00a1Recomendado! Gran calidad con mucho menos peso.<\/td>\n        <\/tr>\n    <\/tbody>\n<\/table>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-errores-frecuentes-al-insertar-imagenes-en-html\">Errores frecuentes al insertar im\u00e1genes en HTML<\/h2>\n\n\n\n<p>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\u00e1s habituales para que los evites desde el principio.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-imagenes-que-no-cargan-por-rutas-mal-escritas\">Im\u00e1genes que no cargan por rutas mal escritas<\/h3>\n\n\n\n<p>El error n\u00famero uno es escribir mal la <strong>ruta de la imagen<\/strong>. Puede ser un detalle m\u00ednimo, como una may\u00fascula de m\u00e1s o un guion que falta.<\/p>\n\n\n\n<p>Ejemplo incorrecto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"Img\/Producto.jpg\" alt=\"Cargador USB\"&gt;<\/code><\/pre>\n\n\n\n<p>Ejemplo correcto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"img\/producto.jpg\" alt=\"Cargador USB\"&gt;<\/code><\/pre>\n\n\n\n<p>\ud83d\udc49 En algunos servidores (como los que usan Linux) <code>Producto.jpg<\/code> y <code>producto.jpg<\/code> <strong>no son lo mismo<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-usar-imagenes-demasiado-grandes-sin-optimizar\">Usar im\u00e1genes demasiado grandes sin optimizar<\/h3>\n\n\n\n<p>Otro fallo cl\u00e1sico es subir im\u00e1genes enormes y mostrarlas peque\u00f1as con HTML. Eso hace que tu web cargue lento aunque la veas a buen tama\u00f1o.<\/p>\n\n\n\n<p>Ejemplo incorrecto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"img\/foto-4000px.jpg\" alt=\"Tel\u00e9fono m\u00f3vil\" width=\"800\"&gt;<\/code><\/pre>\n\n\n\n<p>Ejemplo correcto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"img\/foto-800px.jpg\" alt=\"Tel\u00e9fono m\u00f3vil\" width=\"800\"&gt;<\/code><\/pre>\n\n\n\n<p>\ud83d\udc49 Lo ideal es <strong>ajustar la imagen antes de subirla<\/strong>, usando un editor o una herramienta de compresi\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-atributos-obsoletos-como-align\">Atributos obsoletos como align<\/h3>\n\n\n\n<p>Antes se usaba <code>align<\/code> para colocar im\u00e1genes a la izquierda o al centro, pero en HTML5 est\u00e1 <strong>obsoleto<\/strong>.<\/p>\n\n\n\n<p>Ejemplo incorrecto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"img\/logo.png\" alt=\"Logo empresa\" align=\"center\"&gt;<\/code><\/pre>\n\n\n\n<p>Ejemplo correcto con CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>img {\n  display: block;\n  margin: 0 auto;\n}<\/code><\/pre>\n\n\n\n<p>\ud83d\udc49 Usar CSS te da m\u00e1s control y asegura que tu dise\u00f1o funcione en todos los navegadores.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Error com\u00fan<\/th><th>Ejemplo incorrecto<\/th><th>Soluci\u00f3n recomendada<\/th><\/tr><\/thead><tbody><tr><td>Ruta mal escrita<\/td><td>&lt;img src=\u00bbImg\/Producto.jpg\u00bb&gt;<\/td><td>&lt;img src=\u00bbimg\/producto.jpg\u00bb&gt;<\/td><\/tr><tr><td>Imagen demasiado grande<\/td><td>&lt;img src=\u00bbfoto-4000px.jpg\u00bb width=\u00bb800&#8243;&gt;<\/td><td>Subir la imagen ya optimizada: foto-800px.jpg<\/td><\/tr><tr><td>Uso de atributos obsoletos<\/td><td>&lt;img src=\u00bblogo.png\u00bb align=\u00bbcenter\u00bb&gt;<\/td><td>CSS \u2192 img { display:block; margin:0 auto; }<\/td><\/tr><tr><td>Falta de texto alternativo<\/td><td>&lt;img src=\u00bbbanner.jpg\u00bb&gt;<\/td><td>&lt;img src=\u00bbbanner.jpg\u00bb alt=\u00bbOferta en hosting web\u00bb&gt;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-conclusion\">Conclusi\u00f3n<\/h2>\n\n\n\n<p>Insertar im\u00e1genes en HTML es un paso b\u00e1sico pero esencial para que una web sea atractiva, f\u00e1cil de entender y est\u00e9 optimizada. La clave est\u00e1 en <strong>usar la etiqueta &lt; img &gt; de forma correcta<\/strong>, acompa\u00f1ada de atributos bien definidos como <code>src<\/code>, <code>alt<\/code>, <code>width<\/code> y <code>height<\/code>.<\/p>\n\n\n\n<p>No se trata solo de que la imagen se vea, sino de que cargue r\u00e1pido, tenga el tama\u00f1o adecuado y ayude al <strong>SEO<\/strong> y a la <strong>accesibilidad<\/strong>. Un archivo mal nombrado o una foto demasiado grande puede hacer que tu web pierda visitas y posiciones en Google.<\/p>\n\n\n\n<p>Si aplicas buenas pr\u00e1cticas como:<\/p>\n\n\n\n<ul>\n<li>Usar <strong>nombres descriptivos<\/strong> para los archivos.<\/li>\n\n\n\n<li>Organizar las im\u00e1genes en carpetas.<\/li>\n\n\n\n<li>Elegir el <strong>formato adecuado<\/strong> (JPG, PNG, WebP, AVIF, SVG).<\/li>\n\n\n\n<li>Optimizar el peso y aprovechar atributos como <code>loading=\"lazy\"<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>Tendr\u00e1s un sitio m\u00e1s r\u00e1pido, m\u00e1s profesional y con m\u00e1s posibilidades de destacar en buscadores.<\/p>\n\n\n\n<!-- BLOQUE 7 (CORREGIDO): FAQ CON INDICADOR DE FLECHA VISIBLE -->\n<div style=\"font-family: Arial, sans-serif; margin-top: 20px; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;\">\n\n    <!-- FAQ Item 1 -->\n    <details style=\"border-bottom: 1px solid #e5e7eb;\">\n        <summary style=\"padding: 15px 20px; background-color: #f9fafb; font-size: 1.1em; color: #111827; font-weight: bold; cursor: pointer; list-style-position: inside;\">\n            \u00bfC\u00f3mo inserto una imagen en HTML?\n        <\/summary>\n        <div style=\"padding: 20px; background-color: #ffffff; color: #374151; line-height: 1.6; border-top: 1px solid #e5e7eb;\">\n            Usa la etiqueta <strong><code>&lt;img&gt;<\/code><\/strong> con los atributos <strong><code>src<\/code><\/strong> (para la ruta de la imagen) y <strong><code>alt<\/code><\/strong> (para el texto alternativo).\n        <\/div>\n    <\/details>\n\n    <!-- FAQ Item 2 -->\n    <details style=\"border-bottom: 1px solid #e5e7eb;\">\n        <summary style=\"padding: 15px 20px; background-color: #f9fafb; font-size: 1.1em; color: #111827; font-weight: bold; cursor: pointer; list-style-position: inside;\">\n            \u00bfQu\u00e9 diferencia hay entre ruta relativa y absoluta?\n        <\/summary>\n        <div style=\"padding: 20px; background-color: #ffffff; color: #374151; line-height: 1.6; border-top: 1px solid #e5e7eb;\">\n            La ruta <strong>relativa<\/strong> (<code>img\/foto.jpg<\/code>) apunta a un archivo dentro de tu proyecto. La ruta <strong>absoluta<\/strong> (<code>https:\/\/...<\/code>) es una URL completa a un archivo en cualquier lugar de internet.\n        <\/div>\n    <\/details>\n\n    <!-- FAQ Item 3 -->\n    <details style=\"border-bottom: 1px solid #e5e7eb;\">\n        <summary style=\"padding: 15px 20px; background-color: #f9fafb; font-size: 1.1em; color: #111827; font-weight: bold; cursor: pointer; list-style-position: inside;\">\n            \u00bfPor qu\u00e9 mi imagen no se ve?\n        <\/summary>\n        <div style=\"padding: 20px; background-color: #ffffff; color: #374151; line-height: 1.6; border-top: 1px solid #e5e7eb;\">\n            Casi siempre es por un error en la <strong>ruta <code>src<\/code><\/strong>. Comprueba el nombre del archivo, las may\u00fasculas\/min\u00fasculas y la ubicaci\u00f3n de la carpeta.\n        <\/div>\n    <\/details>\n\n    <!-- FAQ Item 4 -->\n    <details>\n        <summary style=\"padding: 15px 20px; background-color: #f9fafb; font-size: 1.1em; color: #111827; font-weight: bold; cursor: pointer; list-style-position: inside;\">\n            \u00bfQu\u00e9 formato de imagen es mejor para web?\n        <\/summary>\n        <div style=\"padding: 20px; background-color: #ffffff; color: #374151; line-height: 1.6; border-top: 1px solid #e5e7eb;\">\n            Usa <strong>JPG<\/strong> para fotos, <strong>PNG<\/strong> para transparencias, <strong>SVG<\/strong> para logos, y <strong>WebP<\/strong> o <strong>AVIF<\/strong> siempre que puedas para obtener la mejor calidad con el menor peso.\n        <\/div>\n    <\/details>\n\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.loading.es\/hosting\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1000\" height=\"100\" src=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png\" alt=\"oferta para contratar hosting web\" class=\"wp-image-8039\" srcset=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png 1000w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-300x30.png 300w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-768x77.png 768w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-850x85.png 850w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [\n    {\n      \"@type\": \"Question\",\n      \"name\": \"C\u00f3mo insertar una imagen en HTML\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Usa la etiqueta img con dos atributos b\u00e1sicos: src para indicar la ruta del archivo y alt para describir la imagen de forma breve y clara.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Qu\u00e9 diferencia hay entre ruta relativa y absoluta\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"La ruta relativa apunta a una carpeta dentro del proyecto (por ejemplo, img\/foto.jpg). La ruta absoluta incluye la direcci\u00f3n completa con dominio (por ejemplo, https:\/\/tuweb.com\/img\/foto.jpg).\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Para qu\u00e9 sirve el atributo alt\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Mejora la accesibilidad para lectores de pantalla y ayuda al SEO. Debe describir lo que muestra la imagen con un lenguaje sencillo y preciso.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Qu\u00e9 formato de imagen es mejor para web\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"JPG es adecuado para fotos; PNG para im\u00e1genes con transparencia; SVG para iconos y logotipos; WebP o AVIF ofrecen gran compresi\u00f3n con buena calidad en sitios modernos.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Por qu\u00e9 mi imagen no se ve\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Suele deberse a rutas mal escritas, diferencias de may\u00fasculas\/min\u00fasculas en el nombre del archivo, espacios o caracteres no v\u00e1lidos, o a que la imagen no est\u00e1 en la carpeta indicada.\"\n      }\n    }\n  ]\n}\n<\/script>\n\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-el-blog-de-loading wp-block-embed-el-blog-de-loading\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"wQ1JLQjHfy\"><a href=\"https:\/\/www.loading.es\/blog\/a-href-enlaces-web\/\">A href: C\u00f3mo Incluir Enlaces en tu Web<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abA href: C\u00f3mo Incluir Enlaces en tu Web\u00bb \u2014 El blog de Loading\" src=\"https:\/\/www.loading.es\/blog\/a-href-enlaces-web\/embed\/#?secret=mVVw47u8zC#?secret=wQ1JLQjHfy\" data-secret=\"wQ1JLQjHfy\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-el-blog-de-loading wp-block-embed-el-blog-de-loading\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"ZNvAH42LgU\"><a href=\"https:\/\/www.loading.es\/blog\/como-disenar-pagina-inicio-perfecta\/\">C\u00f3mo dise\u00f1ar una p\u00e1gina de inicio perfecta para tu web<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abC\u00f3mo dise\u00f1ar una p\u00e1gina de inicio perfecta para tu web\u00bb \u2014 El blog de Loading\" src=\"https:\/\/www.loading.es\/blog\/como-disenar-pagina-inicio-perfecta\/embed\/#?secret=T5f8wApWS5#?secret=ZNvAH42LgU\" data-secret=\"ZNvAH42LgU\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-el-blog-de-loading wp-block-embed-el-blog-de-loading\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"vdsS63WWaD\"><a href=\"https:\/\/www.loading.es\/blog\/alternativas-wix\/\">Alternativas a Wix para crear tu web<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abAlternativas a Wix para crear tu web\u00bb \u2014 El blog de Loading\" src=\"https:\/\/www.loading.es\/blog\/alternativas-wix\/embed\/#?secret=1lPfItPPlp#?secret=vdsS63WWaD\" data-secret=\"vdsS63WWaD\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfQuieres aprender c\u00f3mo insertar im\u00e1genes en HTML paso a paso sin liarte con el c\u00f3digo? Las im\u00e1genes son la parte visual de cualquier web y sin ellas, un sitio puede parecer un libro sin ilustraciones. El contenido se entiende, s\u00ed, pero falta ese toque que lo hace atractivo y f\u00e1cil de recordar.<\/p>\n<p>Piensa en una tienda online sin fotos de sus productos. \u00bfComprar\u00edas algo solo leyendo la descripci\u00f3n? Seguramente no. Por eso, dominar el uso de la etiqueta <img> es tan importante como saber escribir un buen texto en tu p\u00e1gina.<\/p>\n","protected":false},"author":2,"featured_media":11009,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[376],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/11005"}],"collection":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/comments?post=11005"}],"version-history":[{"count":4,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/11005\/revisions"}],"predecessor-version":[{"id":11010,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/11005\/revisions\/11010"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/media\/11009"}],"wp:attachment":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/media?parent=11005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/categories?post=11005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/tags?post=11005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}