Can You Use One as a Still Website Hero?

Yes. You can use one of these stills as a website hero. Do not ship the 3840x2160 PNG to browsers. The master is a work file. The hero is a set of smaller sRGB derivatives you cut from it: a 2400-pixel JPEG or WebP for large screens, a 1600-pixel copy for laptops, a 1200-pixel portrait crop for phones. The original stays in 02_original/ next to the rest of the job.

This page is about the still hero as a layout object. Converting to WebP without banding is the encoder page. Do not merge the two.

Why the master PNG is the wrong file to upload

A native PNG from this archive is often 3 to 18 MB. On a marketing homepage that is a multi-second tax before the headline appears. It is also the wrong aspect ratio for many heroes. A 16:9 plate on a 21:9 desktop hero crops the top and bottom. The same plate on a 4:5 mobile hero is a different crop entirely. One uploaded PNG cannot be those two crops.

CMS media libraries make this worse. WordPress, Contentful and most shop themes will generate sizes from whatever you upload. If you upload 3840x2160, you wait for the server to resample a 12 MB lossless file, and you still do not get a mobile crop that keeps the HUD reticle in frame. Do the crops yourself.

A practical hero set from one master:

• hero-desktop-2400x900.webp for a short, wide band. You cropped 3840x2160 to 3840x1440 (8:3) then scaled.
• hero-laptop-1600x900.webp for a 16:9 block.
• hero-mobile-1200x1500.webp for a 4:5 block. You picked a vertical region, usually off-center, where the light still sits behind the H1.
• hero-og-1200x630.jpg for sharing cards.

Keep names boring and include the pixel size. The designer who replaces the type in six months should not have to open Photoshop to learn the ratio.

Mark the type-safe area before you export. Many presentation and dark plates already leave a quiet left or center. Neon tunnels and grid vanishing points fight a centered headline. Shift the crop or drop a 40 percent black scrim. That scrim belongs in the export if the CMS cannot overlay it reliably.

Do not use the site's 1920 WebP preview as the hero source. It is already resampled, already compressed, and already 16:9. Start from the download on the image index.

Layout rules that keep a still hero usable

Set the hero as a CSS background or an <img> with width and height matching the derivative, not 3840 and 2160. Wrong intrinsic size is how you get layout shift and a browser that thinks it needs the master.

Use srcset and sizes if the same ratio serves multiple widths. Use an <art-directed> picture element with two sources if desktop and mobile crops differ. They usually do.

Contrast: measure the headline on the real crop, not on the full plate. A cyan readout that looks dim in the 4K file can sit exactly under the H1 after a mobile crop. Add the scrim. Do not fight the plate with a thin sans at 18 px.

LCP: the hero is probably the largest contentful paint. A 200 to 400 KB WebP at 1600 px is a normal budget. A 2 MB PNG is not. Lazy-load everything below. Do not lazy-load the hero.

Accessibility: if the plate is decoration behind type, empty alt. If the plate is the only explanation of the product mood, write a short alt that names the scene, not "4K wallpaper." This site is a work-file archive; your website is not.

Caching: fingerprint the filename. hero-desktop-2400x900-v3.webp beats overwriting hero.webp and arguing with a CDN.

If marketing later wants the hero to move, that is not a CSS animation of the PNG. Send them to Unique Live Wallpaper for a motion master and keep this still as the poster and the no-motion fallback. A still hero that fails into a blank box when autoplay is blocked is a bad hero.

Rights: commercial site use is allowed under the license. Do not publish a "free download of our hero PNG" page that is just this archive mirrored. That is redistribution.

When the same plate also goes into a deck, reuse the master, not the hero crop. The PowerPoint page wants the 16:9 original. Your 2400x900 web band will look letterboxed in a slide.