Cómo crear imágenes con IA para una web: del primer intento al banner

Una imagen puede ser bonita y aun así estorbar en una web. La taza queda detrás del título, el fondo dificulta la lectura o el recorte para móvil se lleva el asa. Por eso el prompt empieza por el sitio que va a ocupar la imagen.

Define para qué sirve, qué objeto muestra, la composición, la luz y las restricciones. Prueba el resultado con el texto real, en pantalla ancha y en pantalla estrecha. Lo último es preparar el archivo y su texto alternativo.

Qué hemos creado

Para este ejercicio editorial de Neaptide, del 6 de septiembre de 2026, creamos cuatro imágenes de cerámica ficticia: una generación inicial, dos ediciones sucesivas y un cuenco nuevo a partir de una referencia de estilo. No es un proyecto de cliente ni una comparativa de modelos. La herramienta integrada no facilitó el identificador del modelo ni la semilla. Los prompts en inglés son los que enviamos, aunque no garantizan imágenes idénticas.

• Descargar los prompts y la secuencia de trabajo (JSON)

Decide dónde irá la imagen

En la web de nuestro taller, el título y el botón van a la izquierda y la taza a la derecha. La portada de un artículo, en cambio, tiene que entenderse en miniatura, y una ficha de producto debe mostrar el objeto real con fidelidad. Cada uso pide instrucciones distintas.

Primer intento: falta espacio para el título

Create a wide landscape photograph of a handmade ceramic mug for a pottery studio website. Warm daylight, natural linen, tasteful editorial product photography. No text, logos or watermark. Save the generated image.

Pedimos materiales y ambiente, sin concretar la composición. La herramienta añadió una planta y flores. Como ilustración independiente funciona, pero nuestro banner necesita más espacio libre.

Editar la composición

Partimos de la primera imagen y decimos qué cambia: la taza se desplaza, ocupa menos encuadre y la decoración desaparece. También decimos qué se queda como está.

Edit the supplied generated mug image for a pottery website hero. Make a wide 3:2 landscape composition. Keep one recognizably matching cream speckled ceramic mug with the same brown unglazed foot and curved handle, the linen, warm daylight and natural photographic style. Reframe so the complete mug including handle sits in the right third and occupies at most 40% of the image width. Leave the left half a quiet light warm off-white surface with very little texture for a dark HTML heading to be added later. Remove the plant and dried flowers. No lettering, logos, border or watermark. The mug is a fictional design for an educational example.

El asa y las proporciones también cambiaron ligeramente. En nuestro objeto ficticio es aceptable. En un producto real habría que cotejar el resultado con la fotografía original. Pedir que se conserve un objeto no garantiza una reproducción exacta.

Añade el título y el botón en HTML. Así se pueden seleccionar, traducir y actualizar sin tocar la imagen. Y la imagen, valórala ya dentro de esa composición.

• Comparar el primer intento y el banner editado

Preparar el encuadre móvil

Un recorte centrado puede cortar la taza. Prueba antes a mostrar la imagen completa con el texto encima. Si de verdad necesitas un formato vertical, prepara otra composición.

Edit this generated pottery hero into a portrait 2:3 mobile website image. Use the input image as the edit target. Keep a recognizably matching single cream speckled ceramic mug, brown unglazed foot, right handle, warm daylight, pale wall, wooden table and linen. Place the complete mug and handle in the lower half, comfortably inside both side edges. Keep the upper 40 percent quiet pale wall for dark HTML text to be added by the website. No plant, flowers, text, logos or watermark. Preserve the restrained photographic style. This is a fictional product for an educational website example.

Para mostrar una composición distinta según el ancho de pantalla, usa el elemento HTML picture, con elementos source que indican cuándo se elige cada imagen. Si la composición es la misma y solo cambia la resolución, bastan srcset y sizes. En la demostración puedes comparar el recorte central de la imagen ancha con la versión vertical.

• Cómo selecciona el navegador las imágenes adaptativas

Crear una serie con el mismo estilo

Para otro artículo necesitamos un cuenco. La imagen anterior sirve de referencia de estilo. Repetimos el lino, la madera, la luz cálida y la paleta neutra, y cambiamos solo el objeto.

Create a new square editorial image for an educational pottery studio blog, using the supplied image ONLY as a style reference, not an edit target. Show a single shallow handmade ceramic bowl, cream speckled glaze with a brown unglazed foot, fully visible on natural linen over a wooden table, pale warm wall, soft window daylight, restrained warm neutral palette and quiet photographic texture matching the reference. Bowl in lower right area, simple upper left background, no other pottery, no plants, flowers, people, text, logos or watermark. The bowl is a fictional design, not a real product photograph.

Guarda la referencia y unas instrucciones de estilo breves. Compara los resultados uno al lado del otro, porque repetir «beige» no asegura que coincidan los tonos.

Corregir problemas concretos

• El objeto tapa el título: especifica qué zona debe quedar libre.
• Sobran detalles: di qué elementos hay que quitar.
• El producto ha cambiado: vuelve a la foto original, limita la edición y revisa otra vez.
• El estilo varía de una imagen a otra: reutiliza la misma referencia.
• Las ediciones se alejan del objetivo: vuelve a la última versión útil.

Preparar los archivos para publicar

Nuestros WebP pesan aproximadamente 189, 89, 71 y 80 KiB. Son los resultados de estas imágenes con esta compresión y no deben tomarse como límites. Revisa bordes y texturas, e indica el ancho y el alto para reservar espacio en la página.

El atributo alt describe la imagen con texto. Que sea breve, y deja para el pie de foto la explicación de para qué se hizo el cambio. Una imagen puramente decorativa puede llevar un alt vacío. Google recomienda nombres de archivo descriptivos, texto relacionado cerca de la imagen y descripciones que no amontonen palabras clave. Cuenta también en el artículo lo que muestra la imagen, de modo que se entienda aunque no se vea.

• Recomendaciones de Google para el SEO de imágenes

Antes de publicar

1. Prueba la imagen con el título y el botón reales.
2. Comprueba pantallas anchas y estrechas.
3. Coteja cualquier producto real con su fotografía.
4. Revisa compresión y carga.
5. Añade un texto alternativo y un pie de imagen, y guarda el prompt con la imagen de origen.

• Trabajar con Codex