El titular encaja, los colores funcionan y ya están puestos los horarios y el precio. Aun así, la página sigue pareciendo una plantilla. Las fotos podrían estar en la web de cualquier otro taller.
Poner tus propias fotos en una plantilla HTML suele ser uno de los últimos retoques antes de usarla. Con una página hecha con IA o entregada por un diseñador ocurre lo mismo. Puede que la estructura ya funcione y que aún tengas que buscar fotos que representen el producto, el servicio o la colección de la temporada. Si trabajas sobre la página existente, puedes valorar cada foto junto al texto que la acompaña.
Claywell, la página de un taller de cerámica ficticio, sirve para ver dos casos distintos. En la cabecera, una foto del banco de trabajo sustituye a un bodegón en blanco y negro. Más abajo, una ilustración de un solo cuenco ocupa el lugar de una foto con varias piezas de vajilla.
Cambiar las imágenes directamente en la página HTML
Abre el archivo en el editor de archivos HTML en línea de HtmlDrag mediante «Subir HTML». El archivo de Claywell ya incluye las imágenes, la tipografía y los estilos originales. Así puedes editar la página del curso en su conjunto.
Antes de elegir la foto nueva, fíjate en el papel de cada imagen. La cabecera de Claywell reúne un bodegón, un recuadro amarillo con los datos del curso y un primer plano de unas manos modelando arcilla. Al sustituir la foto de la izquierda, puedes valorar el cambio con el titular, el precio y la imagen de la derecha a la vista.
Elegir las fotos según lo que el visitante quiere ver
Un curso de cerámica y una tienda de piezas artesanales pueden usar fotos parecidas, pero sus visitantes buscan cosas distintas. Las piezas terminadas muestran cómo puede quedar la cerámica. Un banco con arcilla y herramientas ayuda a imaginarse trabajando con las manos. Ese es el tipo de imagen que puede acercar un curso de iniciación a quien aún no lo conoce.
Al llegar a la sección de materiales, el lector ya quiere ver los detalles. Junto al titular «No hay una forma perfecta», un solo cuenco muestra mejor el borde irregular y la textura del esmalte que un conjunto de tazas y platos. Cada foto responde a una pregunta diferente.
| Lugar y función | Qué tipo de imagen elegir | Qué debe verse con claridad |
|---|---|---|
| Cabecera o escena de actividad | Una escena clara, con margen alrededor del motivo principal. | La actividad de un vistazo, junto al titular y al botón principal. |
| Detalle de producto o material | Un solo motivo, bien iluminado y con espacio alrededor de los bordes importantes. | La forma, el acabado y el detalle que se menciona en el texto. |
| Imagen de apoyo | Otro ángulo, una textura o un primer plano. | Un detalle que aporte algo que no se ve en la foto principal. |
Al elegir los archivos, mira las proporciones, el espacio alrededor del motivo y el detalle visible al tamaño de publicación. Una foto horizontal puede perder lo esencial en un recuadro estrecho. Una foto vertical con suficiente espacio alrededor del motivo puede funcionar en un recuadro más ancho.
Si vas a buscar fotos en un archivo o a pedirle a alguien que prepare las imágenes, ayuda escribir unas indicaciones breves.
La página presenta un curso de cerámica para principiantes. En la cabecera, usar una foto del banco de trabajo. En la sección de materiales, mostrar un solo cuenco que se distinga bien. Dejar margen alrededor de las manos y del borde del cuenco para los encuadres en ordenador y móvil. Mantener el diseño y los datos del curso ya aprobados y elegir imágenes acordes con lo que se ofrece.
En Claywell, el bodegón de la cabecera y la foto de vajilla de la sección de materiales son los dos puntos de partida. El texto que acompaña a cada imagen ayuda a decidir qué foto tiene sentido en ese lugar.
Cambiar la foto de cabecera en el diseño existente
La foto nueva muestra las herramientas, la arcilla y el lugar donde se trabaja. A la derecha, el primer plano de las manos deja ver el gesto de modelar. Juntas cuentan cómo es el taller y qué se hace en él.
En HtmlDrag, haz clic con el botón derecho sobre la foto que quieres cambiar y elige «Reemplazar imagen…». En una cabecera con varios bloques juntos, comprueba que has seleccionado la foto concreta.
En la ventana puedes elegir «Subir desde dispositivo» para utilizar un archivo de tu equipo o «Usar imagen en línea» para indicar la URL de una imagen alojada. En este caso subimos el archivo local con la foto del banco.
Con la foto ya colocada, vuelve a mirar la cabecera. Una imagen con más detalles llama la atención, pero el precio del curso y el botón principal deben seguir viéndose con facilidad. La miniatura del archivo no permite valorar ese equilibrio.
En este ejemplo, las texturas del banco de trabajo contrastan con el recuadro amarillo, más sencillo. El motivo sigue siendo reconocible con el encuadre final. Si cambias la cabecera de tu web, busca ese equilibrio entre una escena fácil de entender y un botón fácil de encontrar.
Dar protagonismo a un detalle concreto
Una imagen de detalle sirve para mostrar un rasgo que merece verse de cerca. En cerámica puede ser el borde, el esmalte o la textura de la superficie. En otro producto, un cierre, un acabado o una etiqueta. Decide qué tiene que verse antes de elegir un encuadre más cerrado.
Para la segunda sustitución de Claywell usamos una ilustración de un cuenco preparada de antemano con IA. El esmalte claro y el contorno irregular encajan con el texto sobre las formas de la cerámica.
La sustitución se hace con la misma función. La imagen original es vertical y el recuadro en el ordenador es más ancho. El espacio que rodea al cuenco permite recortar la imagen sin cortar el borde.
En el primer plano se ve el cuenco entero junto a la explicación. Puedes hacer la misma comprobación con las fotos de productos o materiales. ¿Se distingue lo que describe el texto? Si desaparece un borde importante, prueba con una foto menos cerrada o con otro encuadre antes de cambiar la maquetación.
Por qué una imagen nueva se ve recortada o borrosa
El archivo y el espacio donde va la imagen tienen sus propias proporciones. Si son distintas, la página puede recortar la foto para llenar el recuadro. La propiedad CSS object-fit: cover, por ejemplo, mantiene las proporciones y recorta lo que queda fuera.
Por eso una foto puede verse entera en tu galería y solo en parte en la web. Fíjate en los bordes del motivo dentro de la página y escoge un encuadre que conserve lo importante. Estirar la foto para encajarla a la fuerza puede deformar el objeto que quieres mostrar.
La vista previa en el ordenador permite valorar la primera impresión al tamaño habitual de lectura. ¿Se entiende la actividad de un vistazo? ¿La foto acompaña al titular? ¿Se encuentra enseguida el botón principal?
En la sección de materiales, el cuenco necesita espacio para que se aprecien la forma y la superficie junto al texto. Revisar cada foto donde aparece ayuda a detectar problemas que pueden pasar desapercibidos en una vista reducida de toda la página.
Si la imagen está borrosa, revisa el archivo de origen. Ampliar una miniatura para llenar un recuadro grande no aporta los detalles que faltan. Usa un original adecuado, expórtalo para web y compruébalo al tamaño al que se verá. Mostrar la foto más pequeña en la página no reduce por sí solo el peso del archivo descargado.
Guardar los cambios y revisar la versión móvil
Cuando las dos fotos encajen con el resto de la página, usa «Guardar versión». Si vas a publicar en tu web, encontrarás «HTML editado» en la ventana de exportación. Ahí puedes elegir «Descargar HTML» o «Copiar HTML».
Las dos sustituciones se guardaron en el proyecto de Claywell. La sección de materiales sigue disponible para hacer retoques. Esta versión sirve de base cuando toque cambiar fechas, productos o fotos de temporada.
Mira también la página al ancho de un móvil. Puede que el recuadro se estreche, que alguna foto secundaria desaparezca o que la información del curso cambie de sitio. Comprueba que se siga reconociendo el motivo principal. En la vista estrecha de Claywell, la foto del banco aparece junto al recuadro amarillo.
A veces la foto nueva deja ver que falta una breve explicación. Puedes insertar un pie de foto sobre el material o enlazar una foto de producto con su ficha. Si conviene comparar varias opciones de curso, HtmlDrag permite insertar una tabla y editar sus celdas, filas y columnas.
Al retocar el contenido cercano, puedes bloquear los elementos ya terminados para evitar moverlos por accidente. También puedes eliminar un elemento de una promoción caducada. Estos pequeños cambios ayudan a que las fotos nuevas encajen con lo que se ofrece ahora.
Antes de usar la página actualizada, repasa estos puntos.
- Las fotos previstas se han cambiado y sus motivos principales se distinguen.
- Los detalles importantes se ven tanto en el ordenador como en el móvil.
- Las imágenes preparadas para web se ven nítidas al tamaño de publicación.
- Los pies de foto, los textos alternativos y los créditos corresponden a las nuevas imágenes.
- Las imágenes con enlace abren la página prevista.
- La versión guardada y el HTML que se va a publicar incluyen los cambios.
Si cambia el motivo, revisa también el texto alternativo. La guía de Google sobre imágenes recomienda escribir textos alternativos útiles y relacionados con el contenido de la página. Describir lo que se ve ayuda más que incluir una lista de palabras clave.
Preguntas frecuentes sobre cómo cambiar imágenes en HTML
¿Puedo cambiar las fotos de una página HTML creada con IA?
Sí, si el archivo HTML se abre correctamente en el editor. Comprueba que se cargan los estilos y las imágenes, selecciona la foto que quieres cambiar y aplica la nueva. Si ya tienes el archivo, úsalo directamente. Así te ahorras volver a pedirle a la IA que genere una imagen.
¿Conviene subir un archivo o usar la URL de una imagen?
Sube el archivo si ya tienes la imagen aprobada en tu equipo. Usa una URL si la imagen está alojada en una dirección estable y accesible. Comprueba que la dirección abra directamente el archivo de imagen. Si solo tienes el enlace a una galería o a una pantalla de inicio de sesión, busca primero la dirección de la imagen.
¿Puedo usar una foto vertical en un recuadro horizontal?
Depende del margen que rodee al motivo. En la imagen del cuenco de Claywell sobra fondo para un encuadre más ancho. Si la foto vertical está muy cerrada, puedes perder partes importantes. Comprueba cómo queda en el recuadro y también al ancho de un móvil.
¿Al cambiar la foto se actualizan también su pie o su enlace?
La imagen, el pie de foto, el crédito y el destino del enlace se revisan por separado. Después de cambiarla, comprueba que el texto describa el nuevo motivo y que, si hay un enlace, lleve al lugar correcto.
¿Qué tamaño debe tener una imagen de sustitución?
Elige una resolución que encaje con el espacio donde se mostrará y un peso adecuado para la web. Una foto de cabecera suele necesitar más detalle que la imagen de una tarjeta pequeña. Valora el resultado en pantalla y consulta el límite de subida vigente.
¿Guardar el cambio actualiza la web que ya está publicada?
Los cambios se guardan en el proyecto de HtmlDrag. Si tu web está alojada por separado, usa el HTML editado en el proceso de publicación habitual de ese sitio.
La foto del banco ayuda a imaginar cómo es la actividad. El cuenco permite ver un detalle que se perdía entre varias piezas. Si tu plantilla HTML aún tiene fotos provisionales o antiguas, abre el archivo en el editor visual de HTML y sustituye cada foto donde ya aparece, con una imagen que encaje en ese lugar.