# Marketing Image Workflows

## Article Heroes and Landing Pages

Choose an existing, appropriately licensed visual or real product screenshot that supports the page's message. Compose around the actual layout, keep essential text in HTML, and export responsive variants. Apply [image optimization](image-optimization.md); an above-the-fold hero must not inherit blanket lazy loading.

## Product Screenshots and Mockups

Capture the real application with representative, non-sensitive data. Use sufficient resolution for the final pixel density, crop irrelevant chrome, and add only useful annotations. Device frames are optional. Check small-screen readability and preserve an unannotated original.

## Social Graphics, Banners, and Listings

Reuse brand assets and one editable template. Verify the target platform's current dimensions and crop/overlay safe areas before export. Produce only requested variants; inspect each crop rather than stretching a single image to every ratio.

## Repeated Publishing

Keep titles, product shots, and layout separate so an existing template or build pipeline can produce variants consistently. Connect link-preview exports to [OG metadata](og-social-preview-images.md). Automate only repeated work, and validate fonts, long titles, missing images, and output caching.