1
Hero Image — Blog Post
Prioridad ALTA · Plazo: 3 días
forestal.app/blog
Cómo la IA está transformando la gestión forestal
Vista previa del hero a 1200×630
🌲
Generado con Flux Pro
Hero + OG Image
Blog: IA en Gestión Forestal
Mismo activo para hero de artículo y previsualización al compartir en redes. Doble uso, máxima eficiencia.
1200×630px
Flux Pro
WebP + JPEG
PRIORITARIO
Prompt de Generación — Flux Pro
Prompt Optimizado
Flux Pro
Aerial drone view of a dense pine forest in northern Spain,
early morning golden hour light filtering through mist,
a subtle digital overlay of data points and sensor icons
floating above the tree canopy in translucent green,
cinematic photography style, shallow depth of field,
ultra-realistic, 8K, no text, clean composition.
Aspect ratio 1200:630, commercial photography aesthetic.
No texto en imagen
~45s generación
<200KB WebP
2
Social Media Graphics
LinkedIn · Instagram · Twitter/X
3
Product Mockup — Dashboard v2.0
Screenshot real + framing en dispositivo
forestal.app — Dashboard v2.0 (preview)
847
Sensores activos
2.1M
Ha monitorizadas
3
Alertas hoy
98%
Uptime sensores
Screenshot 2x
DevTools
PNG → WebP
No AI
Por qué no usar AI para mockups de producto
- Los modelos AI alucinan interfaces — inventan datos y componentes incorrectos
- El screenshot real genera confianza y muestra el producto real
- Más rápido: captura en 2 minutos vs. 20 intentos de prompt
- Fácil de actualizar cuando el producto cambia
Workflow recomendado
- Capturar a 2x resolución con DevTools o Shottr (Mac)
- Insertar en template de laptop/browser frame
- Añadir callouts con texto descriptivo de features clave
- Exportar a 1280×720 (G2) y 1920×1080 (web hero)
4
Tabla de Activos — Especificaciones Completas
Todos los formatos para el relanzamiento v2.0
| Activo | Dimensiones | Plataforma / Uso | Herramienta | Prioridad | Plazo |
|---|---|---|---|---|---|
| Hero blog / OG image | 1200×630 | Web + social preview | Flux Pro | Alta | Día 1-2 |
| LinkedIn post — lanzamiento | 1200×627 | LinkedIn feed | Ideogram | Alta | Día 2-3 |
| Instagram carrusel (5 slides) | 1080×1080 | Instagram feed | Canva | Media | Día 4-5 |
| Product mockup dashboard | 1920×1080 | Web hero, G2 listing | Screenshot | Alta | Día 3 |
| Twitter/X card | 1200×675 | Twitter feed | Flux Schnell | Media | Día 5 |
| LinkedIn company banner | 1128×191 | LinkedIn perfil empresa | Canva | Media | Día 6 |
| Instagram Stories — teaser | 1080×1920 | Instagram Stories | Flux Pro | Baja | Día 7-8 |
| GitHub social preview | 1280×640 | GitHub repo card | Figma | Baja | Semana 2 |
5
OG Image — Configuración Técnica
Meta tags + previsualización
Open Graph & Social Preview
Aparece en Slack, Discord, LinkedIn, Twitter al compartir un enlace de forestal.app🌲 FORESTAL
forestal.app
Gestiona tus montes con inteligencia
Meta tags requeridos (en <head>)
<meta property="og:image" content="https://forestal.app/og/home.jpg"/> <meta property="og:image:width" content="1200"/> <meta property="og:image:height" content="630"/> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:image" content="https://forestal.app/og/home.jpg"/>
Recomendación: OG dinámico por página
- Usar Vercel OG o Satori para generar imágenes únicas por artículo de blog
- Template: logo + título dinámico + fondo forestal genérico
- Mejora CTR en compartidos hasta un 40% vs. OG estático
6
Checklist de Optimización Web
Antes de publicar cada imagen en producción
Pre-publicación — Forestal v2.0 Launch
4 / 8 completados
Formato y Compresión
✓
Convertir PNGs a WebP (cwebp -q 80)
✓
Hero image < 200KB
JPEG fallback para Safari < 14
Servir via CDN con auto-format (Cloudflare)
Redimensionar a display size (no 4K en 800px)
HTML y SEO
✓
Alt text descriptivo en todas las imágenes
✓
Atributos width y height explícitos (evitar CLS)
loading="lazy" en imágenes below-the-fold
OG meta tags en todas las páginas clave
Validar preview en Twitter Card Validator