Website Banner Size Explained for Ads and Headers

Think of your first website as a shop window. Before anyone steps inside, the big image across the top does the talking, so getting its size right matters more than it seems.

Short answer: banners aren’t one size. Ad banners follow standard shapes that ad networks expect, while hero and header images fit your theme’s layout. Mixing the two up is how first-timers end up with stretched or blurry headers.

In this post, we’ll cover both, plus aspect ratios, file size targets, and how to choose a size for your builder and theme before you design anything.

IAB-standard Website Banner Sizes Ad Networks Use

Ad networks rely on sizes set by the Interactive Advertising Bureau (IAB), so one banner can fit many different websites. Here’s what you’ll see most, and why it matters before you pick a theme.

The banner sizes you see most often

Five sizes show up again and again:

• Leaderboard: 728x90
• Medium rectangle: 300x250
• Large rectangle: 336x280
• Mobile banner: 300x50
• Wide skyscraper: 160x600

Where each banner size works best

Ad banners fill standard slots that a network sells. A hero banner, the big image at the top of your homepage, is different: it doesn’t have to match any IAB size.

• The leaderboard sits above your content, or works as an adhesion unit (a banner that stays in view as visitors scroll).
• The two rectangles work inside your content, between paragraphs or beside a post.
• The wide skyscraper runs down a sidebar.
• The mobile banner works as an adhesion unit on phones.

Think of a retired teacher starting a recipe blog. Her theme already has a sidebar, so a skyscraper fits right in, and a 728x90 slot above the posts adds a second spot without redesigning anything.

The question isn’t just whether a theme looks good, but whether it has room for the sizes a network actually sells.

Rarer sizes and regional formats

• Large leaderboard: 970x90, a wider leaderboard.
• Half page: 300x600, a tall unit.

Regional sizes exist in markets such as Poland, Russia, and China, so the sizes you’re offered can depend on where your readers are. Interstitials are full-screen ads that take over the screen between pages.

They’re a different experience for visitors, so treat them as a later decision.

Why standard sizes help advertisers and publishers

A study called Standardization and the Effectiveness of Online Advertising explains that ad format standardization resolves problems of coordination between publishers and advertisers.

That means IAB-standard sizes can make your placements compatible with more buyers and publisher sites.

• Larger advertiser inventory: more sites sharing the same sizes means more places for advertisers to show ads.
• Higher RPMs from competition: more buyers competing for one slot can push earnings up. RPM, your earnings per thousand ad views, is the number to track.
• IAB-approved standards: networks and buyers recognize these sizes.
• Theme compatibility: a theme with matching slots takes ads with less fuss.
• Buyer and publisher perspectives: buyers get predictable sizes to plan around, and publishers get slots that are easy to sell.

Check what your ad platform requires

Before you design anything, confirm which sizes your platform accepts. Each network sets its own rules, so the standard list is only a starting point.

• Check sizes with ad platform: look up accepted sizes before you pick a layout.
• Google Ads sizing guidelines: Google publishes its own sizing guidelines, so compare your plan against them.
• Banner ad file size limits: platforms set file size limits for banners, so check the limit before you export.

Check first, design second.

Picking Banner and Hero Image Sizes

Before you open an image editor, check the shape your theme will actually show. Banners and hero images sit in different spots, so they need different sizes.

What is the best homepage image size?

Start with your theme’s recommended size, since that’s what it was built to display. For a desktop banner, 1200x400 pixels is a solid starting point, a 3:1 aspect ratio (three units wide for every one tall).

Phones get a 360x120 mobile banner, which keeps the same 3:1 shape.

Screens vary, so there’s no single answer for the most common desktop size, but designing for banners up to 1920 pixels wide gives you a safe upper limit.

Think of a florist building her first shop: starting from her theme’s size means her Mother’s Day banner fits on the first upload.

Sizes for hero and background images

A hero section is the large band at the top of your homepage that visitors see first. Hero images run 1280x720 pixels at 16:9 and can go up to 2500 pixels wide, while background images go bigger, at 1920x1080 or 2560x1400 pixels.

Quick check: in 1920x1080, 1920 is the width and 1080 is the height, so the image is wider than it is tall. For phones, build a mobile hero at 360x200 pixels.

Banner sizes that work on Shopify

If you’re building on Shopify, these sizes are worth bookmarking:

• 3000x1500 pixels for a full-width hero
• 3840x1920 pixels for large screens
• 1170x1020 pixels for phone-only images
• Half-width and strip sizes use their own dimensions, so check the ones your theme lists instead of guessing

Measure first. Upload second.

Keep key content clear of theme cropping

Your theme sets the displayed shape, so the image you upload isn’t always the one visitors see. Picture that florist again: her wide photo looks great on a laptop, but on a phone the flowers at the edges get cut off.

Keep the subject in the middle third so the crop leaves it in view.

That’s the heart of a good hero image: the main subject sits in the middle third, and the theme can trim the sides without cutting the important part.

On Shopify, Horizon and Dawn measure their banners differently, so compare the settings for whichever theme you pick. Dawn has its own height settings, and the focal point setting tells the theme where your subject sits.

Design for what shows, not what you uploaded.

Making desktop and mobile banners both work

Phone screens often crop a wide banner to a near-square shape, so the sides may not show. Some themes offer a separate mobile image option for a phone-specific upload.

If yours doesn’t, responsive auto-resizing fits the image to each screen, so preview it on a phone before you publish.

Keep the focus centered so both versions show the same subject. Preview on a phone, every time.

Other Image Sizes Your Website Needs

Banners aren’t the only images on your site. Logos, blog photos and tiny browser icons each need their own size, so sort those out before you design.

Sizes for blog, logo, favicon and thumbnails

• Blog: 1200x800 pixels, a 3:2 ratio.
• Logo: a rectangle for wide headers and a square for tight spaces.
• Favicon: 48x48 pixels, the small icon in the browser tab.
• Thumbnails: 150 to 300 pixels, the small previews on listing and blog pages.
• Social icons: the buttons linking to your profiles. Check your theme documentation for their size.

Picture a florist writing her first blog post. Her 1200x800 photo fills the layout, and her favicon keeps the shop recognizable among open tabs.

Which aspect ratio fits each image

An aspect ratio is the shape of an image, not its size: the relationship between width and height.

• 16:9 landscape: wide and screen-filling, good for full-width hero images.
• 3:2 blog images: the classic photo shape, and the one your blog posts should use.
• 1:1 square: equal sides, which suits product photos and profile pictures.
• 9:16 portrait: tall and narrow, like a phone held upright.
• 2:1 banners: twice as wide as tall, a natural fit for site banners.

Pick the ratio before you crop, not after.

Recommended sizes on each website platform

Each platform publishes its own recommendations, so start there.

• Shopify: 2048x2048 pixels for product images.
• WordPress: its image sizes depend on your theme, so check your media settings.
• Squarespace: a recommended width of 2500 pixels.
• Wix, Squarespace, Framer and Webflow: each publishes its own banner sizes, so look up current numbers before you design.

Your theme’s documentation has the final word, since themes can override platform defaults. Check first. Design second.

File Size, Format and Page Speed

Heavy files slow your whole page, so size and format matter as much as design.

Upload limits and target file sizes

Shopify caps uploads at 20 MB, and some platforms cap megapixels (millions of pixels), so check your builder’s documentation. Keep files under 200 KB where you can.

The CAES Office of Information Technology advises: “aim for an image file size of 500 KB or less.”

Picture a florist who uploads a full-size phone photo as her homepage banner. The heavy file leaves shoppers staring at a blank banner. Export the photo at display size and it’ll appear almost at once.

Compress before upload. Shrink each file in an image editor or free compression tool first.

Choosing the right image format

Use WebP when you can.

Google’s developer documentation reports that lossless WebP is 26% smaller than PNG (Portable Network Graphics), and lossy WebP, which trades some detail for size, is 25-34% smaller than comparable JPEG (Joint Photographic Experts Group) files.

• JPEG for photos.
• PNG for transparent backgrounds.
• SVG (scalable vector graphics) for logos.
• AVIF (AV1 Image File Format) is newer, so check your builder supports it.
• GIF (Graphics Interchange Format) for short, simple animations.

Core Web Vitals and SEO impact

Your hero image is often the biggest thing on screen, so it usually drives your Largest Contentful Paint (LCP), a Core Web Vitals measure of how fast the main content appears. What counts is when the picture shows up, not how big it looks.

Google’s Search Central blog announced in 2018 that page speed would count as a ranking factor for mobile searches.

A study in Revista CEA of e-commerce sites in Latin America found that bounce rate (visitors who leave after one page) rose as pages loaded more slowly. Slow pages lose people.

Images at the wrong size cause layout shift, where content jumps as the page loads. Upload at your design’s exact dimensions.

Making images searchable and accessible

• Descriptive alt text. Describe each picture, like “Mother’s Day bouquets on a wooden table,” so screen readers can read it aloud.
• Clear file names. Use spring-sale-banner.jpg, not IMG_4482.jpg.
• Image sitemap. Check whether your builder makes one, a list of your images that helps search engines find them.
• Avoid ad-related filenames. A name like sidebar-ad.jpg can trip ad blockers, which may hide the image.

Adding and Checking Your Banners

Once your banners are sized, it’s time to get them live and check them.

Putting banner ads into WordPress

Upload your file to the Media Library, WordPress’s built-in image storage, then place it one of three ways:

• HTML image snippet: Paste an image tag (a line of HTML, the code behind web pages) that sets your banner’s width and height.
• Custom HTML widget: Drop the code into a sidebar.
• Site Editor: On a block theme, place the banner in a header or footer visually.

A bakery owner drops her seasonal banner into a Custom HTML widget and is live before her coffee cools.

Make edits in a child theme (a small add-on that holds your changes), not the parent, so updates don’t overwrite them.

Managing ads with plugins and networks

AdSense, Mediavine, Raptive, and Ezoic are ad networks, companies that supply the ads, and each has its own setup. Check your dashboard first.

Plugins (add-on tools for your site) like Ad Inserter and Advanced Ads handle these:

• Ad rotation: Cycle several banners through one spot so visitors don’t see the same one every time.
• Click tracking: See which banners get clicked.
• Device targeting: Show banners on desktop, on phones, or on both.

A florist’s Mother’s Day promo can use a wide banner on desktop and a narrower one on phones, so each screen fits.

Checking and tuning your image sizes

Right-click a live banner, choose Inspect, and check the size your browser is drawing. If it’s bigger than your file, the browser is stretching it, which is the usual cause of blur.

Then preview on desktop and mobile, since a banner that looks sharp on a laptop can still look soft on a phone.

Image resizers and optimizers help you hit your planned dimensions and shrink file size before upload.

If a banner looks blurry, compare its size with your original file. If it’s broken, re-upload it and check the link. Fix the file first.

Page builders and helpful tools

Some tools do the heavy lifting:

• PageFly: Set separate layouts for desktop and phones so your header suits both.
• Templates and landing pages: Start from a ready-made design and swap in your banner.
• Logo makers: Make a logo sized for your header if you don’t have one.
• Compression apps: Shrink images automatically on upload so pages load quicker.

Banner size comes down to knowing which kind of image you’re making. Ad banners follow the shapes networks expect, while hero and header images follow your theme. Keep those two apart and the rest gets much easier.

Check your builder and theme before you design anything, and you’ll skip the stretching, cropping, and slow-loading surprises. Size it right once, and your site will look sharp every time someone visits.

References

1. Optimize images for better website performance — oit.caes.uga.edu (2026)
2. Impact of SEO Strategies on the Performance of E-Commerce Websites in Latin America — revistas.itm.edu.co (2025)
3. Standardization and the Effectiveness of Online Advertising — doi.org (2014)
4. An image format for the Web | WebP — developers.google.com
5. Using page speed in mobile search ranking | Google Search Central Blog — developers.google.com