Where to Find Free Hero Images for Websites

A hero image is the large, usually full-width visual at the top of a page. The best free sources are Unsplash for general-purpose photography, Pexels for photos and video, and Pixabay for illustrations, vectors, and photos. Before publishing, verify the exact asset’s license, check recognizable people and brands, and test the crop at desktop, tablet, and mobile widths.

Quick answer: the best free hero-image sources

Source	Best for	Wide compositions and copy space	Commercial use and attribution	Key restrictions	Editing help
Unsplash	High-quality photography	Strong search inventory; use “wide landscape,” “copy space,” or “horizontal”	Commercial use is allowed; attribution is optional but appreciated	Do not sell images without significant modification or compile images to replicate a similar or competing service	Usually prepare the crop and compression yourself
Pexels	Photos, video, and direct hero-banner searches	Search results include many horizontal assets and a dedicated hero-banner search	Free use on websites and commercial projects; attribution is not required	Do not sell an unmodified copy, imply endorsement, redistribute to another stock platform, or use an image as a trademark	Search pages expose crop, retouch, color, text, and background-removal tools
Pixabay	Illustrations, vectors, and mixed media	Useful for illustrated headers and abstract backgrounds; inventory counts change	Check the individual asset’s license before publishing	Review the asset page for restrictions involving people, brands, resale, and redistribution	Varies by asset and workflow

The National Science Foundation describes a hero component as a full-width element at the top of a page with a large image that sets the tone for the site. Because responsive layouts crop the image, composition matters as much as resolution.

1. Search for images that survive responsive cropping

1. Start with a source and search for hero, banner, header, wide, or copy space, then add your subject. Examples: wide landscape startup, copy space coffee shop, or abstract gradient banner.
2. Choose a large horizontal image. Leave visual breathing room where your headline, supporting text, and call-to-action will sit.
3. Keep faces, products, and logos away from the expected crop edges. Centered subjects often work poorly when a mobile layout uses a tall crop.
4. Download the largest practical original, then create derivatives for the actual display sizes.

Composition checklist

• Does the subject remain identifiable when the sides are removed?
• Is there low-detail space behind text, or will you need an overlay?
• Can the image work in both a shallow desktop banner and a tall mobile crop?
• Are faces, products, and important marks inside a safe area rather than at the edge?
• Does the image still communicate the page’s purpose without the headline?

2. Verify the license before publishing

Unsplash

The Unsplash license grants a worldwide, irrevocable, nonexclusive copyright license to download, copy, modify, distribute, perform, and use images for free, including commercially, without permission or required attribution. Attribution is still a useful courtesy. The license prohibits selling an image without significant modification and compiling images to replicate a similar or competing service.

Pexels

The Pexels license says its photos and videos can be downloaded and used for free, including on websites, shops, newsletters, ebooks, presentations, blogs, and templates. Modification and attribution-free use are allowed. Do not sell an unmodified copy, imply endorsement by an identifiable person or brand, redistribute the file on another stock platform, or use it as a trademark.

Pixabay

Pixabay is useful for illustrations and vectors as well as photos. Its header-hero search showed 6,245 free images during a September 2026 crawl, but counts change. Open the individual asset page and read its current license before use; do not rely on a search-result count.

People, brands, and trademarks

A stock site’s copyright license does not automatically settle privacy, publicity, trademark, or endorsement questions. Recheck the asset when it contains a recognizable person, a product package, a logo, artwork, or a private location. Avoid wording or layouts that suggest the person or brand endorses your company.

Keep a project record

• Asset URL and source
• Creator name
• Download date
• License URL and a saved copy of the relevant terms
• Notes about people, products, trademarks, or edits

3. Prepare the image for a fast hero

1. Crop to the composition your design needs, while retaining a source copy.
2. Export a correctly sized derivative rather than shipping the original download to every screen.
3. Use a modern format such as WebP when your delivery stack supports it, with a JPEG fallback where needed.
4. Set an explicit width and height (or an aspect-ratio box) so the layout does not jump while the image loads.
5. Use responsive sources so a phone does not download a desktop-sized asset.

<picture>
  <source
    type="image/webp"
    srcset="/img/hero-640.webp 640w, /img/hero-1280.webp 1280w, /img/hero-1920.webp 1920w"
    sizes="100vw"
  />
  <img
    src="/img/hero-1280.jpg"
    srcset="/img/hero-640.jpg 640w, /img/hero-1280.jpg 1280w, /img/hero-1920.jpg 1920w"
    sizes="100vw"
    width="1920"
    height="900"
    alt=""
    fetchpriority="high"
  />
</picture>

Use an empty alt when the hero is decorative and the adjacent text carries the meaning. Write a concise description when the image conveys information that the text does not.

Overlay text without destroying readability

Use a subtle gradient or solid overlay behind text instead of placing copy over a busy subject. Check contrast at the actual crop and at different brightness levels. Keep the call-to-action in HTML so it remains selectable, accessible, and responsive.

4. Test the crop at three breakpoints

1. Render the hero at desktop width.
2. Render it at a tablet width where the headline may wrap.
3. Render it at a narrow mobile width with the tallest crop.
4. Check that the subject, faces, products, and logos remain visible.
5. Check that text and buttons do not collide with high-contrast details.

If one asset cannot survive all crops, use art direction with separate desktop and mobile sources. A different crop is often better than forcing one image into every aspect ratio.

5. Common problems and fixes

Problem	Likely cause	Fix
The hero looks blurry	The derivative is smaller than its rendered size or was repeatedly recompressed	Export from the original at the largest required display width and avoid repeated lossy exports
The subject disappears on mobile	A centered or edge subject is removed by the narrow crop	Choose a resilient composition, change object-position, or provide a mobile-specific crop
Text is unreadable	High-detail or high-contrast content sits behind the copy	Move the copy, select an image with copy space, or add a measured overlay
The page shifts while loading	No intrinsic dimensions or aspect-ratio reservation	Set width/height or an explicit aspect-ratio container
The first screen loads slowly	Original stock file is too large, or several hero variants are fetched	Resize, compress, serve responsive sources, and preload only the actual above-the-fold image
A license question appears after launch	No record of the exact asset or terms	Save the URL, creator, date, and license page before publishing; replace the asset if its status cannot be confirmed
A person or brand objects	Copyright permission was mistaken for publicity or trademark permission	Review the asset context, remove implied endorsement, obtain additional permission where required, or choose another image

6. A repeatable selection workflow

1. Search Unsplash, Pexels, and Pixabay with subject plus hero, banner, wide, or copy space.
2. Shortlist images with a safe text area and a subject that can survive responsive crops.
3. Open each individual asset page and verify the current license and restrictions.
4. Record the asset URL, creator, date, and license in your project documentation.
5. Create desktop, tablet, and mobile derivatives; compress them and wire them with srcset.
6. Review the real page at all breakpoints and with the slowest expected connection.
7. Recheck licenses when replacing or substantially redesigning the hero.

Or skip the browser setup

If you need screenshots of your finished page to review hero crops, document variants, or generate previews, ScreenshotNeo returns a PNG, JPEG, WebP, or PDF from one GET request. Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and billing status.

It also supports full-page and element captures, device presets or custom viewports, retina scale, dark mode, custom CSS and JavaScript, click and wait actions, blocked resources, headers, cookies, user agents, geolocation, resizing, caching, signed links, asynchronous jobs, bulk capture, and an MCP server for AI agents. See the ScreenshotNeo documentation for all options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://your-site.example -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://your-site.example"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://your-site.example' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

The Free plan includes 1,000 screenshots each month with no card. Paid plans start at $5 for 3,000 shots, and every feature is available on every plan. Create a free ScreenshotNeo account.

Performance, reliability, and cost notes

• Serve the smallest derivative that is sharp at the rendered size; hero images are often the largest above-the-fold request.
• Use caching for repeated previews and choose a TTL that matches how often the page changes.
• When capturing dynamic pages, wait for a selector, a delay, or network idle so the hero is present before capture.
• Block unnecessary ads, trackers, or resource types during capture when they do not belong in the review image.
• Use asynchronous jobs and signed webhooks for large batches, and bulk capture for up to 100 URLs per call.
• Inspect X-Page-Verdict and X-Billed headers when accounting for usage; clean shots are billed while failed or unusable captures are not.

FAQ

Do I have to credit an Unsplash or Pexels photographer?

The cited licenses do not require attribution, although Unsplash says credit is appreciated. Follow the exact license for the asset you select.

What dimensions should a hero image have?

There is no single correct dimension. Choose a source large enough for the widest rendered version, create responsive derivatives, and test the crop at every breakpoint.

Can I put a stock image behind a paid product’s homepage?

Unsplash and Pexels permit commercial use under their stated licenses. Still check restrictions concerning recognizable people, brands, endorsement, resale, and trademarks.

Should a decorative hero have alt text?

Use empty alt text when it adds no information beyond nearby content. Describe it when the visual itself conveys meaningful information.

Can ScreenshotNeo capture only the hero element?

Yes. Use its element capture option with a CSS selector, or capture the full page when you need the surrounding layout for comparison.