- Notepad no inserta imágenes directamente, pero permite crear código HTML que las referencia mediante la etiqueta <img>.
- Es clave entender rutas relativas y absolutas para cargar imágenes desde distintas carpetas o servidores con src.
- Los atributos alt, width y height mejoran accesibilidad, maquetación y rendimiento de las páginas con imágenes.
- CSS y etiquetas HTML5 como figure y picture amplían las posibilidades de fondos, centrado y formatos avanzados.
Muchísima gente se sorprende al descubrir que el clásico Bloc de notas de Windows no puede mostrar imágenes. Da igual que intentes pegar una captura con Ctrl+V o arrastrar un archivo JPG: Notepad solo trabaja con texto plano y no entiende ni gráficos, ni formatos, ni estilos. Aun así, en clase, en el trabajo o en una práctica, es muy habitual que pidan “hazlo en el bloc de notas e incluye las capturas de pantalla”.
En ese contexto, lo que realmente te están pidiendo no es que metas la foto “dentro del Bloc de notas”, sino que escribas el código necesario para que un navegador muestre esas imágenes, o que expliques correctamente cómo referenciarlas. Aquí es donde entran en juego HTML y CSS: con un simple archivo de texto creado en Notepad puedes construir una página web completa con imágenes, fondos, enlaces y todo tipo de recursos visuales.
¿Se pueden insertar imágenes directamente en Notepad?
Aclaremos la duda principal cuanto antes: el Bloc de notas no tiene soporte nativo para insertar ni visualizar imágenes. Es un editor de texto plano, sin formato, pensado para escribir y guardar caracteres, no para mostrarlos con diseño. Eso implica que no vas a ver la foto incrustada como en Word, LibreOffice o un editor WYSIWYG.
Lo que sí puedes hacer es usar Notepad para escribir el código HTML que referencia archivos de imagen externos. Es decir, el archivo .html lo editas en el bloc de notas, pero quien muestra la imagen es el navegador (Chrome, Edge, Firefox…). De este modo cumples con la condición de “usar el bloc de notas”, aunque la visualización real la haga el navegador.
Cuando en una práctica te piden que “pegues las capturas” usando el bloc de notas, normalmente esperan que incluyas etiquetas de imagen en el código HTML o que adjuntes las imágenes en la misma carpeta del proyecto y las referencies correctamente. No existe un modo de copiar una captura desde el portapapeles y que Notepad la incruste como si fuera un documento de texto enriquecido.
Por tanto, la idea clave es esta: Notepad sirve para crear el archivo de texto con el código (HTML, CSS, etc.), mientras que la imagen siempre será un archivo aparte al que haces referencia mediante rutas relativas o absolutas.
Cómo insertar imágenes en HTML usando el Bloc de notas
Para que una imagen se vea en una página web, lo único imprescindible es usar la etiqueta <img> con el atributo src apuntando al archivo gráfico. Ese código lo puedes escribir perfectamente en el Bloc de notas, guardar el fichero como .html y abrirlo luego con tu navegador favorito para comprobar el resultado.
La estructura mínima de una imagen en HTML es muy sencilla: necesitas el nombre o la ruta del archivo y, como buena práctica, un texto alternativo que describa lo que se muestra. El navegador se encargará de solicitar el recurso al servidor o al sistema de archivos local y lo representará en pantalla, aunque el archivo se haya creado con Notepad.
En la práctica, el flujo de trabajo sería así: abres Bloc de notas, creas tu archivo .html, guardas las imágenes en una carpeta, escribes las etiquetas <img> y pruebas la página en el navegador. No estás “metiendo” la imagen en el bloc de notas, pero sí estás controlando desde ahí cómo y dónde aparece.
Conviene recordar que el Bloc de notas no ofrece ayudas como resaltado de sintaxis ni autocompletado, así que debes escribir las etiquetas HTML con cuidado para evitar errores de tipeo en src, alt, width, height o en las rutas.
Atributos esenciales de la etiqueta <img>: src, alt, width y height
La etiqueta <img> en HTML no necesita cierre y se configura a través de atributos. El único obligatorio es src, que indica dónde está la imagen, pero para un buen resultado de cara a accesibilidad y rendimiento conviene controlar también alt, width y height.
El atributo src (source) indica la ruta del archivo de imagen. Puede ser un nombre de archivo si está en la misma carpeta, una ruta relativa si está en un subdirectorio o una URL completa si se encuentra en otro servidor. Es importante evitar espacios, tildes y caracteres raros en los nombres de archivo para que no haya problemas al enlazarlos.
El atributo alt (alternative text) proporciona un texto alternativo que se mostrará si la imagen no carga por algún motivo y que utilizan los lectores de pantalla para personas con discapacidad visual. No basta con poner “foto1”; lo ideal es describir brevemente qué se ve: “captura de configuración de Notepad con código HTML”, por ejemplo.
Los atributos width y height definen el tamaño de la imagen en la página, bien sea en píxeles o, más adelante, mediante CSS. Es recomendable indicar al menos una de las dimensiones o usar estilos adecuados para que el navegador reserve el espacio y la carga sea más fluida, evitando saltos incómodos en el diseño.
Ten en cuenta que, aunque modifiques width y height en HTML, el peso real del archivo no cambia. Para optimizar el rendimiento, conviene redimensionar y comprimir las imágenes con un editor antes de incorporarlas a la web, sobre todo si se trata de fotografías muy grandes.
Insertar imágenes desde el mismo directorio y mediante rutas relativas
En proyectos sencillos hechos con Bloc de notas, lo más cómodo es guardar las imágenes en la misma carpeta que el archivo HTML. Así, en el atributo src basta con escribir el nombre del fichero, por ejemplo: imagen1.jpg. Es la forma más directa de asegurarse de que la ruta funciona sin tener que enredarse con niveles de carpetas.
Si quieres organizar mejor el proyecto, es habitual crear una subcarpeta llamada “imagenes” (o “img”) y colocar allí todos los archivos gráficos. En ese caso, la ruta pasará a ser algo tipo imagenes/captura1.png. Como ves, simplemente se antepone el nombre de la carpeta seguido de la barra / antes del nombre del archivo.
También te puedes encontrar con el caso contrario: que la imagen esté en una carpeta “padre” respecto al HTML. En esa situación se usan las rutas relativas con dos puntos (..) para subir niveles. Por ejemplo, ../logo.svg significa “sube una carpeta y luego busca logo.svg ahí”. Si necesitas subir dos niveles, repetirías la secuencia: ../../foto.jpg.
Otro escenario típico es cuando tienes dos carpetas hermanas, una para HTML y otra para imágenes. Ahí primero hay que subir un nivel con .. y luego bajar a la carpeta de destino, de forma parecida a ../imagenes/fondo.png. Es el mismo criterio que se utiliza para enlazar hojas de estilo CSS, ficheros JS u otros recursos estáticos.
Estas rutas relativas son muy prácticas porque permiten mover el proyecto completo a otro lugar (otro equipo, una memoria USB, otra unidad de disco) sin que se rompan las referencias, siempre que mantengas la misma estructura de carpetas.
Rutas absolutas y carga de imágenes desde otros servidores
Además de las rutas relativas, HTML admite que en el atributo src se use una ruta absoluta que empiece por la raíz del sistema o por un dominio web. En un entorno local, podría ser algo como C:/blog/imagenes/foto.jpg; en un servidor web, lo normal es una URL completa de tipo https://midominio.com/img/foto.jpg.
Cuando trabajas en tu propio equipo con Bloc de notas, no suele ser recomendable usar rutas absolutas basadas en la letra de la unidad (C:, D:, etc.), porque si llevas el proyecto a un pendrive o a otra máquina, la ruta dejará de ser válida. En cambio, las rutas relativas siguen funcionando siempre que respetes el árbol de directorios.
En el contexto de un sitio web publicado en Internet, las rutas absolutas basadas en dominio pueden ser útiles si centralizas los recursos en un CDN o en un servidor de estáticos. Por ejemplo, podrías tener todas las imágenes en https://static.midominio.com/img/ y referenciarlas desde cualquier página HTML con la URL completa.
Si apuntas el src a una imagen alojada en otro servidor que no controlas, ten en cuenta que creas una dependencia directa con ese servicio externo. Si el archivo se borra, se renombra o el servidor deja de estar disponible, tu página dejará de mostrar la imagen o aparecerá rota.
A la hora de aprender, lo más práctico es que, mientras edites con Bloc de notas, trabajes con rutas relativas dentro de una carpeta de proyecto bien organizada. De ese modo evitas sorpresas y te acostumbras a una forma de trabajo que luego te servirá también en entornos profesionales.
Ajustar el tamaño de las imágenes: width, height y unidades
Para tener el control sobre cómo se ve una imagen en la página, puedes especificar width y height directamente en la etiqueta <img>. Por ejemplo, width=»500″ y height=»300″ establecen unas dimensiones fijas en píxeles, lo que hace que la imagen se renderice siempre de ese tamaño independientemente de su resolución original.
Otra posibilidad es usar solo uno de los dos atributos, habitualmente width para controlar el ancho, y dejar que el navegador calcule la altura correspondiente para mantener la proporción de la imagen. Si combinas esto con estilos en porcentaje, puedes conseguir que la imagen se adapte mejor al ancho del contenedor y, por tanto, a distintos tamaños de pantalla.
El uso de unidades como px y % es muy habitual. Px fija un tamaño absoluto, mientras que % lo hace relativo al contenedor: una imagen con width=»100%» ocupará todo el ancho disponible. A nivel más avanzado, se suelen delegar estas decisiones en CSS para mantener el HTML más limpio.
Conviene practicar casos típicos, como dar un ancho máximo (max-width) a las imágenes para evitar que desborden en pantallas pequeñas o que en resoluciones grandes se vean excesivamente estiradas. Aunque el atributo max-width no va en HTML sino en CSS, forma parte de la misma idea de controlar el espacio visual que ocupa cada recurso.
Recuerda que cuanto mayor sea el tamaño y la resolución de la imagen original, más pesará y más ralentizará la carga de la página. Por eso, antes de llegar al código HTML, merece la pena reducir y comprimir los archivos con una herramienta gráfica o un optimizador específico.
Combinar imágenes y enlaces: hacer clic en una foto para ir a otra página
Una vez que dominas las etiquetas <a> y <img>, puedes crear hipervínculos donde el “texto ancla” sea una imagen en lugar de palabras. La lógica es sencilla: pones la etiqueta <img> dentro de la etiqueta <a>, entre la apertura y el cierre, y el conjunto se comportará como un enlace clicable.
Por ejemplo, imagina que tienes foto1.jpg y foto2.jpg en una carpeta llamada imagenes, y dos páginas HTML diferentes como destino. Puedes mostrar cada imagen dentro de un enlace de forma que, al hacer clic, el usuario se vaya a otra sección, a una ficha de detalle o a un sitio externo.
Para que todo funcione al abrirlo en el navegador, necesitas mantener la estructura de archivos y carpetas bien organizada: los HTML en una carpeta base y, dentro, otra carpeta que contenga las imágenes. Así, al compartir o mover la carpeta del proyecto, no se rompen las rutas relativas.
Esta técnica se usa constantemente en la web: galerías de fotos que llevan a páginas con más información, banners que enlazan a promociones, logotipos que llevan a la portada, etc. Todo nace de una combinación muy simple de etiquetas que puedes escribir cómodamente en el Bloc de notas.
Además, si acompañas esas imágenes con buenos textos alternativos y títulos claros en los enlaces, mejorarás la accesibilidad y el posicionamiento de tu sitio, ya que los motores de búsqueda y los lectores de pantalla entenderán mejor qué hace cada elemento.
Fondos con imágenes usando CSS: más allá de <img>
Cuando quieres que una imagen aparezca como fondo de una página, una sección o un bloque concreto, lo habitual no es usar <img>, sino la propiedad CSS background-image sobre el selector que te interese. Este código lo puedes escribir también desde el Bloc de notas en un archivo .css o dentro de una etiqueta <style> en tu HTML.
El mecanismo básico consiste en indicar background-image: url(‘mi-fondo.jpg’) y, a partir de ahí, controlar el resto de propiedades relacionadas con el fondo: repetición, posición, tamaño y comportamiento al hacer scroll. Todo se apoya, de nuevo, en la ruta de la imagen, que debe ser correcta para que el navegador la encuentre.
Entre las propiedades más útiles está background-repeat, que te permite decidir si el patrón se repite en mosaico (repeat), solo horizontal o verticalmente (repeat-x, repeat-y) o si solo quieres mostrar la imagen una vez (no-repeat). Junto con background-position, puedes situar el fondo en el centro, en una esquina o desplazado unos píxeles.
Otra propiedad clave es background-size, que determina cómo se escala la imagen de fondo. El valor cover hace que la imagen cubra todo el área aunque se recorte un poco, mientras que contain la ajusta para que se vea entera sin deformarse, pudiendo dejar bandas vacías.
Además, con background-attachment puedes elegir si el fondo se desplaza con el contenido (scroll) o se queda fijo (fixed) creando el típico efecto parallax sencillo. De esta manera, aunque no veas nada en el Bloc de notas más que código, el resultado final en el navegador puede ser una página visualmente muy rica.
Accesibilidad de las imágenes: importancia del atributo alt y alternativas de texto
Más allá de que la página sea bonita, es fundamental que las imágenes estén pensadas también para usuarios con discapacidad visual o problemas de conexión. Aquí entra en juego la accesibilidad web, y en concreto el atributo alt, que ya hemos mencionado de pasada.
El atributo alt debería describir con claridad y brevedad el contenido de la imagen, de manera que una persona que no la pueda ver entienda de qué se trata. Los lectores de pantalla leen ese texto, y también se mostrará si la imagen no puede cargarse por un error o una conexión lenta.
En casos donde la información visual es muy compleja o crítica (por ejemplo, un gráfico detallado o una infografía), puede ser recomendable ofrecer descripciones más extensas mediante otros mecanismos: un texto al lado, una sección aparte o, a nivel histórico de HTML, el atributo longdesc que apuntaba a un recurso con una explicación larga.
Además de alt, conviene cuidar otros aspectos: usar imágenes que aporten algo al contenido y no llenen la página de ruido, evitar gráficos que puedan resultar ofensivos o discriminatorios y revisar que los formatos elegidos sean adecuados para web y accesibles en el mayor número de dispositivos posible.
Si desde el principio, incluso trabajando en Notepad, te acostumbras a incluir textos alternativos descriptivos y a seleccionar imágenes con sentido, mejorarás enormemente la experiencia de navegación de todo tipo de usuarios, además de enviar mejores señales a los motores de búsqueda.
Formatos de imagen compatibles con HTML: JPEG, PNG, GIF, SVG y WebP
HTML es bastante flexible en cuanto a los tipos de imagen que puede mostrar, pero no todos los formatos son iguales ni sirven para lo mismo. A nivel práctico, los más usados en la web son JPEG, PNG y GIF, a los que se suman SVG para gráficos vectoriales y WebP como formato moderno optimizado.
El formato JPEG (JPG) es ideal para fotografías y escenas con muchos colores, porque ofrece una buena calidad con tamaños de archivo relativamente pequeños gracias a su compresión con pérdida. Es perfecto para imágenes grandes donde pequeños artefactos de compresión no resultan críticos.
El formato PNG es más apropiado para gráficos, logotipos e imágenes con transparencia, manteniendo una excelente calidad incluso con textos y formas definidas. Suele generar archivos algo más pesados que JPEG, pero la nitidez y el soporte de transparencias compensan en muchos casos.
El histórico GIF se usa principalmente para animaciones sencillas, con soporte de transparencia básica y una paleta de colores limitada. Para fotos no es recomendable, pero para pequeños iconos animados o efectos cortos todavía tiene su hueco, aunque haya alternativas más modernas.
En el terreno de los vectores, SVG (Scalable Vector Graphics) permite que los gráficos se escalen sin perder nitidez, ya que se basan en fórmulas matemáticas y no en píxeles. Los navegadores actuales los soportan muy bien, por lo que se utilizan mucho para logotipos e iconos debido a su poco peso y excelente calidad en cualquier resolución.
Por último, WebP se ha consolidado como un formato de nueva generación que comprime mucho sin sacrificar calidad. Google lo recomienda para mejorar tiempos de carga y, por extensión, el posicionamiento. El inconveniente es que navegadores muy antiguos no lo soportan, por lo que suele combinarse con versiones alternativas para asegurar la compatibilidad.
Iconos, favicon y otras etiquetas relacionadas con imágenes
Además de las imágenes “clásicas” colocadas con <img>, en HTML se recurre a iconos que se integran en el texto o en la interfaz. Muchas veces se insertan usando etiquetas como <span> o <i> combinadas con librerías de iconos tipo Font Awesome, que se cargan mediante CSS.
En estos casos, más que archivos de imagen independientes, se trabaja con fuentes de iconos o con SVG embebidos, lo que permite cambiarlos de tamaño y color con mucha facilidad. Desde el Bloc de notas también puedes incluir estos fragmentos de código, siempre y cuando cargues las hojas de estilo correspondientes.
Otra pieza importante del puzle visual es el favicon, el pequeño icono que aparece en la pestaña del navegador. Para definirlo se usa la etiqueta <link> en la cabecera (<head>) del documento, apuntando al archivo de icono que quieras utilizar, normalmente en formato .ico, .png o incluso .svg.
Aunque pueda parecer un detalle menor, un favicon bien elegido ayuda a identificar la web de un vistazo entre muchas pestañas abiertas, mejora la percepción de profesionalidad y contribuye a la coherencia de la identidad visual online.
Todos estos elementos, aunque se configuran desde el código, se ven reflejados en la interfaz del navegador, de modo que tienen un impacto directo en la experiencia del usuario y también, indirectamente, en la manera en que los buscadores evalúan tu página.
Centrar y maquetar imágenes con HTML y CSS básicos
De fábrica, las imágenes se comportan como elementos en línea (inline), colocándose seguidas del texto si no hay saltos de línea. Si quieres que aparezcan en una línea propia y centradas, un truco sencillo es envolverlas en un párrafo <p>, ya que este sí es un elemento de bloque y forzará un salto.
Una vez que tienes la imagen dentro de un párrafo, puedes usar la propiedad CSS text-align: center; sobre ese <p> o sobre un contenedor envolvente para que el contenido, incluida la imagen, aparezca centrado. Es una solución sencilla y muy utilizada en maquetaciones básicas.
Otro enfoque clásico es convertir la imagen en elemento de bloque y aplicar márgenes automáticos a los lados (margin-left: auto; margin-right: auto;), técnica conocida como “auto centrado con márgenes”. Esto se hace normalmente desde CSS, dejando el HTML más limpio y sin estilos embebidos.
Al trabajar con Bloc de notas, es habitual que al principio mezcles algo de HTML y estilos en línea mientras aprendes, pero poco a poco lo ideal es que vayas separando la presentación en archivos .css externos. Así puedes controlar la posición, tamaño y comportamiento responsive de las imágenes de forma más ordenada.
Con unas pocas reglas CSS bien pensadas podrás conseguir que las imágenes se adapten mejor a móviles, tablets y pantallas grandes, todo ello partiendo de un fichero de texto plano que escribes a mano, sin necesidad de herramientas de diseño visual complejas.
Etiquetas avanzadas de HTML5 para trabajar con imágenes: <figure> y <picture>
HTML5 introdujo algunas etiquetas pensadas para ofrecer más contexto semántico y control sobre las imágenes. Dos de las más interesantes son <figure> y <figcaption>, y la etiqueta <picture> para imágenes adaptativas, con una lógica parecida a <video> y <audio>.
La etiqueta <figure> se utiliza para agrupar contenido visual o gráfico que forma una unidad independiente: fotografías, gráficos, fragmentos de código ilustrativos, etc. Su compañera <figcaption> sirve para añadir un título o descripción que se asocia semánticamente a esa figura.
Por su parte, <picture> permite definir múltiples fuentes de imagen para un mismo contenido, de modo que el navegador elija la más adecuada según el tamaño de pantalla, la resolución o el formato soportado. Es muy útil, por ejemplo, para servir WebP a los navegadores modernos y un JPEG de respaldo a los que no lo soportan.
Aunque al principio pueda parecer más complejo que un simple <img>, estas etiquetas avanzadas dan muchísimo juego cuando quieres optimizar el rendimiento, la accesibilidad y la experiencia responsive. Y, como todo lo demás, se pueden escribir sin problemas en un archivo HTML creado con Bloc de notas.
Tomando como base estas ideas y practicando un poco con rutas, atributos y estilos, un sencillo editor de texto como Notepad se convierte en una herramienta suficiente para montar páginas con imágenes bien estructuradas, ligeras, accesibles y compatibles con los principales navegadores.
Al final, aunque el Bloc de notas no muestre las fotos dentro de su ventana, es la pieza clave desde la que escribes el código que controla cómo, cuándo y dónde se verán esas imágenes en el navegador, manejando formatos, rutas, tamaños, fondos y aspectos de accesibilidad que marcan la diferencia entre una página improvisada y un resultado bien trabajado.