Generando Imágenes de Portada con Gemini Nano Banana 3 Pro

Tenía un problema: mis posts no tenían imágenes de portada. Claro, podría crearlas manualmente o pagar por fotos de stock, pero eso sonaba tedioso y caro. Además, quería algo que realmente reflejara el contenido de cada post. Así que armé un script que genera las imágenes de portada automáticamente usando el nuevo modelo Gemini Nano Banana 3 Pro de Google (también conocido como Gemini 3 Pro Image).

El Enfoque de Dos Modelos

La clave está en que generar buenas imágenes requiere buenos prompts. Podría haber escrito los prompts manualmente, pero eso va en contra del propósito de automatizar. En cambio, usé un proceso de dos pasos:

1. Gemini Flash analiza el contenido del post y genera un prompt detallado para la imagen
2. Gemini 3 Pro Image toma ese prompt y genera la imagen de portada

Esta separación funciona bien porque Gemini Flash es rápido y económico para análisis de texto, mientras que Gemini 3 Pro Image se especializa en crear visuales de alta calidad.

El Script

Para dar contexto, este blog es un sitio que se genera estaticamente usando next.js y donde el contenido de los posts está en markdown. El script lee todos los posts del directorio _posts/, procesa cada uno, y genera una imagen de portada si no existe ninguna. Este es el flujo principal:

// 1. Limpiar el contenido - remover bloques de código, código inline, tags HTML
const cleanedContent = cleanContent(content);
const context = cleanedContent.slice(0, 10000);

// 2. Generar un prompt usando Gemini Flash
const analysisPrompt = `
  You are an expert art director for a technical blog.
  Analyze the following blog post content (title: "${data.title}").

  Goal: Create a detailed, creative image generation prompt for a cover image.

  Guidelines:
  - The image should be abstract, futuristic, or diagrammatic.
  - Avoid text in the image.
  - Choose a style that best fits the content (e.g., "Minimalist 3D",
    "Abstract Data Flow", "Isometric Architecture", "Digital Surrealism").
  - Make it look premium and suitable for a modern tech blog.
  - Output ONLY the prompt string, nothing else.

  Content:
  ${context}
`;

const textResponse = await ai.models.generateContent({
  model: 'gemini-flash-latest',
  contents: [{ role: 'user', parts: [{ text: analysisPrompt }] }],
});

const generatedPrompt =
  textResponse.candidates?.[0]?.content?.parts?.[0]?.text?.trim();

// 3. Generar la imagen usando ese prompt
const imageResponse = await ai.models.generateContentStream({
  model: 'gemini-3-pro-image-preview',
  config: {
    responseModalities: ['IMAGE', 'TEXT'],
    imageConfig: { imageSize: '1K' },
  },
  contents: [{ role: 'user', parts: [{ text: generatedPrompt }] }],
});

¿Por Qué Limpiar el Contenido Primero?

Los bloques de código no ayudan a describir cómo debería verse una imagen de portada. En todo caso, confunden al modelo. La función cleanContent() elimina:

• Bloques de código (```...```)
• Código inline (`code`)
• Tags HTML
• Espacios en blanco excesivos

Esto deja solo la prosa, que es lo que Gemini Flash necesita para entender el tema del post.

La Optimización de Imágenes Importa

Gemini 3 Pro Image genera buenas imágenes, pero suelen ser muy grandes para uso web. Quería que las portadas pesaran menos de 200KB para mantener las páginas rápidas. El script usa Sharp para comprimir las imágenes de forma iterativa:

async function compressImage(
  buffer: Buffer,
  maxWidth: number = 1200
): Promise<{ buffer: Buffer; quality: number }> {
  let quality = 80;
  let processedBuffer = await sharp(buffer)
    .resize({ width: maxWidth, withoutEnlargement: true })
    .jpeg({ quality })
    .toBuffer();

  // Seguir reduciendo calidad hasta estar por debajo de 200KB
  while (processedBuffer.length > MAX_SIZE_BYTES && quality > 10) {
    quality -= 10;
    processedBuffer = await sharp(buffer)
      .resize({ width: maxWidth, withoutEnlargement: true })
      .jpeg({ quality })
      .toBuffer();
  }

  return { buffer: processedBuffer, quality };
}

Esto redimensiona las imágenes a 1200px de ancho y arranca con 80% de calidad JPEG, luego reduce la calidad en pasos hasta que el archivo quede por debajo de 200KB. Simple, pero efectivo.

Sobre Gemini Nano Banana 3 Pro

Gemini 3 Pro Image de Google (con nombre código interno "Nano Banana Pro") es su último modelo de generación de imágenes. A diferencia de modelos anteriores de texto a imagen, está específicamente diseñado para manejar prompts complejos y generar imágenes que coincidan con conceptos técnicos y abstractos—perfecto para portadas de blog.

El modelo soporta diferentes tamaños de imagen y puede hacer streaming de resultados, lo cual es útil cuando se generan múltiples imágenes en un script batch. La calidad es sólida para este caso de uso: visuales abstractos enfocados en tecnología que no necesitan ser fotorrealistas.

Manejando Portadas Existentes

El script también optimiza portadas existentes si pesan más de 200KB. No regenera imágenes si ya existe una portada—solo se asegura de que estén correctamente dimensionadas y referenciadas en el frontmatter del post:

const existingCover = files.find(f => f.match(/^cover\.(jpg|jpeg|png|webp)$/i));

if (existingCover) {
  const fileStats = await stat(coverPath);

  if (fileStats.size > MAX_SIZE_BYTES) {
    console.log(`Optimizando ${existingCover}...`);
    const imageBuffer = await readFile(coverPath);
    const { buffer: compressedBuffer, quality } =
      await compressImage(imageBuffer);

    await saveBinaryFile(newCoverPath, compressedBuffer);
    console.log(
      `Optimizada a ${(compressedBuffer.length / 1024).toFixed(2)}KB`
    );
  }

  continue; // Saltar generación
}

Resultados

Ejecutar esto en todos los posts me dio imágenes de portada consistentes y acordes a la marca sin esfuerzo manual. El enfoque de dos modelos funciona bien: Gemini Flash entiende el contenido y crea prompts enfocados, mientras que Gemini 3 Pro Image genera visuales que realmente se relacionan con los posts.

El paso de optimización es crucial—sin él, algunas imágenes pesaban 2-3MB, lo cual hubiera sido un desastre de performance. Mantener todo por debajo de 200KB significa que el blog se mantiene rápido mientras se ve más pulido.

Cosas a Considerar

Si están haciendo algo similar, algunos puntos:

• Costo: Gemini Flash es barato, pero generar imágenes para decenas de posts suma. Ejecuten el script una vez, no en cada build.
• Calidad del prompt: El prompt del art director importa. Pasé por varias iteraciones antes de quedarme con el actual. La clave es ser específico sobre el estilo mientras se deja espacio para que el modelo interprete el contenido.
• Consistencia de imágenes: Las imágenes generadas no van a tener un estilo perfectamente uniforme entre posts, pero está bien—cada portada refleja el tema de su post.
• Límites de API: Tengan en cuenta los rate limits cuando procesen muchos posts a la vez, así como los costos de estas APIs. Si tienen muchos posts, el límite puede ser monetario.

El script es una operación de una sola vez que llenó todas las portadas faltantes. Para posts nuevos, puedo ejecutarlo manualmente o simplemente dejar que la lógica de portada preexistente lo maneje si agrego una imagen de portada yo mismo.

En general, es un uso práctico de IA que resuelve un problema real sin sobre-ingeniería. A veces la automatización es simplemente sobre remover tareas tediosas para poder enfocarse en escribir.

Para mas información sobre este modelo, ir al blogpost oficial de Nano Banana Pro