Question 1

What is Hero Image?

Accepted Answer

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.

Question 2

Does Hero Image upload images to a server?

Accepted Answer

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.

Question 3

What image formats can I upload and export?

Accepted Answer

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.

Question 4

What responsive breakpoints are included by default?

Accepted Answer

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.

Question 5

Can I create custom breakpoints?

Accepted Answer

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

Question 6

Does Hero Image generate responsive code?

Accepted Answer

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

Question 7

What is the maximum upload size?

Accepted Answer

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

Question 8

Does Hero Image replace an image CDN?

Accepted Answer

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

Hero Image

AI-powered hero image design for every screen.

Sign in