Hero Image is a browser-based responsive hero image cropper. It helps you upload one source image, crop it independently for multiple website breakpoints, preview the outputs, export JPG, PNG, or WebP files, and copy responsive code.

Does Hero Image upload images to a server?

The crop and export workflow runs in the browser. Hero Image uses local file APIs, object URLs, canvas rendering, and client-side ZIP generation instead of uploading the selected image to an app server.

What image formats can I upload and export?

You can upload JPG, PNG, or WebP images. You can export cropped hero assets as JPG, PNG, or WebP, with WebP recommended for modern web delivery.

What responsive breakpoints are included by default?

Hero Image includes default outputs for mobile lite, mobile, tablet, tablet xl, desktop, and desktop xl viewports. Those map to min-widths of 0, 480, 768, 1024, 1280, and 1536 pixels.

Can I create custom breakpoints?

Yes. You can add custom breakpoints with your own name, minimum viewport width, output width, output height, and filename.

Does Hero Image generate responsive code?

Yes. Hero Image generates responsive picture markup for React TSX, Vue, and Svelte using the current breakpoint filenames and selected output format.

What is the maximum upload size?

The maximum source image file size is 20MB. Each output width and height must be between 1 and 8000 pixels.

Does Hero Image replace an image CDN?

No. Hero Image creates static cropped assets and markup. It does not provide CDN hosting, automatic server-side resizing, or runtime image transformation.

Premium

Stop Re-Cropping.Let AI Handle Every Breakpoint.

Upload one image. AI detects the focal point, generates production-ready crops for desktop, tablet, and mobile, and hands you the responsive code. No manual tweaks.

AI subject analysis workflow — upload, analyze, responsive output

The problem

One image. Every device.Zero clue where the subject lands.

Using a single image across every breakpoint is not responsive design — it is Russian roulette with your visual hierarchy.

Subjects Get Cropped Out

On mobile, object-fit: cover randomly decides what to keep. Faces, products, and key details disappear — your visual hierarchy gets amputated by an algorithm.

Wrong Ratio Destroys Composition

A 16:9 hero forced into 9:16 portrait. The background blows up, the subject slides off-center, and the art direction you carefully crafted is gone.

One Crop Can't Serve Every Page

Your homepage needs a wide establishing shot. A product page needs a tight close-up. Locking one image to one crop guarantees it fails everywhere else.

Manual Re-Cropping Never Stops

Every layout redesign means manually re-cropping and re-exporting every breakpoint. Days lost to pixel-pushing that should be spent on building.

Premium features

Intelligence in every step.

AI Subject Detection

AI analyzes your image to find the main subject — person, product, or focal element — and auto-frames each breakpoint crop around it. No more guessing where the subject will land.

AI Expand

Generative AI outpainting extends your image to any aspect ratio. Landscape to portrait, square to ultra-wide — the subject stays centered while backgrounds fill naturally.

One-Click Batch Generation

Generate default breakpoints and your own custom outputs in one click. AI adapts the composition for each screen, ratio, and campaign-specific size.

Smart Code Export

Export PNG assets with consistent filenames. Copy matching responsive React, Vue, or Svelte code — updated to match your crops. Ready to ship.

Custom breakpoints

Build for the breakpoints your layout actually uses.

Start with the default responsive set, then add project-specific viewport sizes, aspect ratios, and output names. AI treats every custom breakpoint like a first-class crop target.

Any ratio

Wide hero, portrait story, square product crop — define the frame your layout needs.

Named outputs

Keep filenames readable for dev handoff, CMS uploads, and repeatable campaigns.

Batch-ready

Mix default and custom breakpoints in the same generation run without extra setup.

Responsive output map

Custom set

Custom

Landing Hero

2560×900

Wide

Campaign Tablet

1536×1152

4:3

Product Square

1200×1200

1:1

Social Story

1080×1920

9:16

Ship the exact image set your page was designed for.

One source image becomes production assets shaped around your real launch plan.

Showcase

One original. Six perfect crops.

See how AI transforms a single image into breakpoint-ready outputs.

Showcase

One face. Every screen.

Portrait crops adapt to each device ratio while keeping the subject centered.

Phones

Tablets

Desktops

Showcase

Property listings that sell.

Responsive hero images optimized for real estate at every breakpoint.

Mobile

Tablet

Desktop

How it works

From upload to production in four steps.

Step 1

Upload

Drop in your source hero image.

Step 2

Analyze

AI detects the focal point automatically.

Step 3

Generate

All breakpoints are produced in one click.

Step 4

Export

Download assets and responsive code, ready to ship.

Simple pricing

Pay per output. No hidden fees.

One credit generates one AI-powered hero image output. Buy a pack, use it across projects. Credits never expire.

Credit pack

Essential Credits (15)

15 credits for AI-powered hero image generation. Transform any image into production-ready hero images for any platform.

credits included

Price

$9.90

Free vs Premium

FeatureFreePremium

Manual crop

6+ breakpoint outputs

Responsive code export

AI subject detection

One-click batch generation

Project management

FAQ

Questions? Answered.

How does the credit system work?

One credit generates one AI-powered hero image output. Each generation run across your enabled breakpoints costs one credit per output. Unused credits stay in your account and never expire.

What image formats are supported?

Upload JPG, PNG, or WebP source images up to 10MB. Export AI-generated outputs as PNG.

Is my image data private?

Source images are uploaded to our secure storage for AI processing and are not shared or reused. You can delete projects anytime.

Can I use the free tool and premium features together?

Yes. The free manual cropper is always available. Premium adds AI analysis, batch generation, and project management for when you need to scale.

What frameworks does the code export support?

React (TSX), Vue, and Svelte. Each export includes responsive picture markup with matching classes and filenames.

Can I use the generated images commercially?

Yes. All AI-generated outputs are yours to use in production websites, marketing landing pages, client projects, and any other commercial work. You retain full rights to every generated crop.

How can I provide feedback or report issues?

We'd love to hear from you. Reach out via support@heroimage.app or through our social channels. Bug reports, feature requests, and general feedback all help improve the product.

How long does it take to generate outputs?

Most generations complete within 10–30 seconds depending on server load and image complexity. A progress indicator shows real-time status. Batch generation across all breakpoints may take slightly longer.

Will the AI crop match exactly what I want?

Because this is AI-generated, results can vary and won't always frame your subject perfectly on the first try. Factors like image composition, subject position, and background complexity can affect the output. You can regenerate as many times as needed until you're satisfied — credits are only consumed per successful output.

Can I get a refund on credits?

All credit purchases are final and non-refundable. Credits are consumed only when you successfully generate an output — if a generation fails, no credit is deducted. Unused credits never expire, so you can always use them later.

Get started

Ready to ship hero images faster?

Join developers, designers, and marketers who use AI to ship production-ready hero assets in minutes.