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

Una imagen puede ser bonita y funcionar mal en una web. La taza queda detrás del título, el fondo dificulta la lectura o el recorte móvil se lleva el asa. El prompt debe empezar por el lugar que ocupará la imagen.

Define su función, el objeto, la composición, la luz y las restricciones. Prueba el resultado con el texto real en pantallas anchas y estrechas. Después prepara 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; no garantizan imágenes idénticas.

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

Decide dónde irá la imagen

En nuestro taller, el título y el botón van a la izquierda y la taza a la derecha. Una portada de artículo debe entenderse en una miniatura. Una ficha de producto debe mostrar el objeto real con fidelidad. Cada uso necesita 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; nuestro banner necesita más espacio libre.

Editar la composición

Usamos la primera imagen como punto de partida y especificamos los cambios: desplazar la taza, reducir su tamaño en el encuadre y quitar la decoración. También indicamos qué conservar.

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 para poder seleccionarlos, traducirlos y actualizarlos por separado. Valora la imagen 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 primero a mostrar la imagen completa con el texto encima. Si 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, utiliza el elemento HTML picture con elementos source que indiquen cuándo debe elegirse cada imagen. Si solo necesitas varias resoluciones de la misma composición, usa srcset y sizes. La demostración permite 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 como referencia de estilo: repetimos el lino, la madera, la luz cálida y la paleta neutra, pero cambiamos 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 juntos: 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: enumera los elementos que hay que quitar.
• El producto ha cambiado: vuelve a la foto original y limita la edición.
• El estilo varía: reutiliza una 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 resultados de estas imágenes y esta compresión, no límites universales. Revisa bordes y texturas; indica ancho y alto para reservar espacio en la página.

El atributo alt ofrece una descripción textual de la imagen: hazla breve y utiliza el pie de foto para explicar la finalidad del cambio. Una imagen puramente decorativa puede llevar un alt vacío. Google recomienda nombres de archivo descriptivos, texto relacionado junto a la imagen y descripciones sin acumular palabras clave. Explica también en el artículo lo que muestra la imagen, para que se entienda aunque no pueda verse.

• 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 alt y pie; guarda el prompt y la imagen de origen.

• Trabajar con Codex