You picked an image, dropped it into your hero section, and now it looks stretched on desktop and chopped in half on a phone. The fix usually isn't a "better" image. It's the right size and aspect ratio for where the image actually sits on the page.
This is a scannable reference you can keep open in another tab while you build. It's organized by website section, so you look up "hero" or "blog header" and get the spec for that spot instead of scrolling through a generic pixel dump.
How to read this cheat sheet
Three things decide whether an image fits, and they're easy to mix up:
- Aspect ratio is the shape: width compared to height, like 16:9 (wide) or 1:1 (square). This is what survives across screen sizes. Get the ratio right and your image keeps its proportions whether it's on a laptop or a phone.
- Dimensions are the actual pixel measurements, like 1920 x 1080. These set how sharp the image looks and how big the file is.
- Export size is what you save and upload. For sharp results on modern screens you usually export larger than the slot's display size, then let the browser scale it down. More on that in the retina section below.
A quick way to think about it: aspect ratio keeps the image from getting cropped weirdly, dimensions keep it from looking blurry, and export settings keep it from being a slow, oversized file.
One honest caveat before the numbers: the pixel sizes below are starting points, not standards. Device density, builder behavior, container width, cropping, and breakpoints vary. Measure the largest rendered slot and confirm the current builder or theme guidance before exporting a production asset.
Treat every number below as a starting point and confirm it against your own builder's documentation, because themes differ on how wide a full-bleed section actually renders.
Hero and full-width banner sizes
The hero is the big image at the top of a page, often spanning the full browser width with a headline on top. It's the most common spot to get wrong because the same image has to work on a wide monitor and a narrow phone.
| Section | Aspect ratio | Suggested export width | Notes |
|---|---|---|---|
| Full-width hero (desktop) | 16:9 or wider, e.g. 21:9 | ~2400 px wide | Keep the focal point centered so side cropping doesn't lose it |
| Full-width banner / strip | ~4:1 to 3:1 | ~2000 px wide | Short and wide; expect heavy vertical cropping on mobile |
| Boxed hero (inside a container) | 16:9 | ~1600 px wide | Doesn't span the screen, so it needs fewer pixels |
A wide hero on a phone gets squeezed into a much taller, narrower box. The browser crops the sides to fill it. So put the subject and any important detail near the center, not at the left or right edge.
If your hero looks soft or pixelated after upload, the size is often the cause. The companion post on why a hero image looks blurry and how to fix it walks through the common reasons and the export settings that solve them.
Landing-page backgrounds and overlay safe zones
A landing-page background sits behind your text, buttons, or a form. It has the same wide shape as a hero, but it carries an extra job: your words have to stay readable on top of it.
That's where a safe zone comes in. The safe zone is the area where overlay text lands, and it needs to stay calm enough to read. In plain terms:
- Pick or position the image so the busy, detailed part sits to one side and a quieter area sits where the text goes.
- If the image is busy everywhere, plan to add a dark or light overlay tint between the image and the text so the words don't fight the background.
- On mobile, text usually moves to the center and the image crops to the sides, so keep the readable area near the vertical middle, not the far edges.
| Background type | Aspect ratio | Suggested export width | Safe-zone note |
|---|---|---|---|
| Full-screen section background | 16:9 | ~2400 px wide | Keep one third of the frame low-detail for text |
| Split background (image one side, text other) | varies; design for ~1:1 image half | ~1600 px wide | Subject toward the outer edge, text half stays clear |
| Repeating texture / pattern | tile, any size | small, e.g. ~600 px | Tiles seamlessly, so it can stay tiny and light |
Picdrome groups images by where they go for this reason. Which image belongs on each page shows which shapes and styles tend to work for each spot, including backgrounds with room for overlay text.
Blog headers, cards, and thumbnails
These are the smaller, repeating images: the banner at the top of an article, the picture on a card in a grid, and the little thumbnail in a "related posts" list. Consistency matters more than size here. When every card uses the same aspect ratio, your grid lines up cleanly instead of stair-stepping.
| Section | Aspect ratio | Suggested export width | Notes |
|---|---|---|---|
| Blog post header | 16:9 or 2:1 | ~1600 px wide | Often doubles as the social preview, so keep the subject centered |
| Card image (in a grid) | 3:2 or 16:9 | ~800 px wide | Use the same ratio for every card in the set |
| Square thumbnail | 1:1 | ~400 px wide | Center the subject; corners and edges may get cropped |
Because these appear many times on a page, their file weight adds up fast. Exporting them at a reasonable size and compressing them keeps the page quick to load. The guide on how to compress images without making them blurry covers how to shrink the file without wrecking the picture.
Social preview and Open Graph sizing
When someone shares your page on social platforms or in a chat, the preview image that appears is the Open Graph (OG) image. You set it once per page, and it's a single fixed shape that platforms crop to their own frames.
- Most platforms favor a wide rectangle, roughly 1.91:1, commonly exported around 1200 x 630 px.
- Keep any text or logo well inside the frame, away from the edges, because different platforms trim differently.
- If your blog header is already wide and centered, it can often double as the OG image.
Confirm the current preview-image specification on each social platform you care about before committing, since these specs change.
Mobile cropping and retina (2x) exports, in plain English
Two ideas trip up most non-designers. Both are simple once named.
Responsive cropping
Your image doesn't shrink uniformly on a phone. The browser keeps the image filling its box, and when the box changes shape, the image crops to fit. A wide hero becomes a tall slot on mobile, so the left and right get cut off. The practical rule: keep the important part of every image near the center, and don't put text or key detail at the far edges where it can disappear.
Retina (2x) exports
Modern phones and laptops pack extra pixels into the same physical space. A slot that's 800 pixels wide on the page can actually have 1600 real pixels behind it on a high-resolution screen. If you export at exactly the display size, the image looks soft. So export at roughly double the slot's display width, often called 2x or retina, and let the browser scale it down. It stays crisp, and the file is still manageable if you compress it.
A rough way to apply it: take the display width from the tables above, and if that table already lists a generously large export width, it's likely accounting for 2x. When in doubt, exporting a bit larger and compressing well is safer than exporting too small.
WebP often gives you these larger, retina-friendly exports at a smaller file size than JPG or PNG. If you're deciding what to save your images as, the comparison of which file format to use: JPG, PNG, or WebP lays out the trade-offs.
A quick example: sizing a hero from scratch
Say you're building a landing page with a headline over a background image.
- The spot is a full-width hero with text on the left, so you choose 16:9 and plan a safe zone on the left for the words.
- You export around 2400 px wide so it stays sharp on large, high-resolution screens.
- You pick an image where the busy detail sits to the right, leaving the left side calm for the headline.
- You compress the file so the big hero doesn't slow the page.
- You preview on a phone, confirm the headline area stays readable, and nudge the focal point toward center if the sides crop too tight.
That's the whole loop: right ratio, large-enough export, safe zone for text, compress, check on mobile.
A note on using Picdrome's pre-sized images
If you pull images from Picdrome's library, many are organized by section so the shape already suits the spot. They're free to use for personal and commercial website projects, subject to the Picdrome Image License. The images are AI-generated, so when an image shows a person, treat it as an illustration, not a real customer or team member. This sizing reference is general guidance for building your site, not legal advice.
In Plain English
This is a section-by-section reference for the image sizes and shapes you need while building a website. It helps non-designer founders, freelancers, and no-code or AI-builder users who are mid-build and just need a spec that fits. Use it when you're placing a hero, a landing-page background, a blog header, a card, a thumbnail, or a social preview and want it to look sharp without getting awkwardly cropped on mobile. The moves to remember: match the aspect ratio to the section, keep the important detail near the center, leave a calm safe zone where text goes, export at roughly 2x for sharp screens, and compress before you publish. Treat the exact pixel numbers here as starting points to confirm against your builder. When you know the size, how to compress website images without making them blurry is the next step before anything goes live.
For the bigger picture on choosing and using images well, start with the beginner's guide to using images on your website.