Website Image Sizes: How Big Should Hero, Slider and Banner Images Be?

What are the right website image sizes, and is there one correct pixel size?

Website image sizes are the width and height you calculate for the box an image will fill on the page. So no single pixel size is correct. Find the box width and aspect ratio, work out the height, then export the file about twice as large for dense screens. The 2x multiplier is common practice, not a rule.

For example, an image that fills a 600 pixel wide area should be 1200 pixels wide for high-density screens. You work this out once, then repeat it for every image slot. As a result, you can give your designer a clear number instead of asking "how many pixels?"

The calculation has five steps:

1. First, find how many pixels wide the box is on your page.
2. Next, choose the aspect ratio and calculate the height.
3. Then multiply the width and height by the density factor, usually two.
4. If needed, export a few smaller copies, so the browser can pick the best one.
5. Finally, check the crop before you upload, especially on a phone screen.

Below, we walk through each step and each image type with a worked example. We also use only official documents for the favicon (the small site icon in a browser tab), sharing image and Apple icon values.

What are CSS pixels, device pixels and pixel density?

A browser lays out a page in CSS pixels. Each CSS pixel is a design unit, so it does not have to match one physical dot on the screen. High-density screens draw every CSS pixel with several physical dots, which we call device pixels. The ratio between them is the device pixel ratio, or pixel density.

Take a box that is 600 CSS pixels wide: on a screen with a density of 2, it covers 1200 physical dots. A 600 pixel file stretched across that box forces the browser to guess the missing dots. The image then looks soft or blurry.

The reverse also causes trouble, because an oversized file adds weight without adding sharpness. For example, a 3000 pixel file in a 600 pixel box does not look better, it only takes longer to download. So aim for a file close to what the box needs.

Density differs from device to device. Still, the 2x multiplier in this guide is common practice for most content images, and it is not an official rule. You choose the multiplier for your site based on your visitors' screens and the file weight you accept. Also think about website image sizes as box, ratio and density together, not as one number.

How do you find the box width of an image on your page?

The box width is the space an image occupies at the widest layout. You can find it in three ways:

• First, check the design file. The designer should have set the width and ratio of every image slot, and if not, you should ask for them.
• Next, read the theme or page builder documentation. Many systems state which slot uses which width, and the related setting in the admin panel often shows the same information.
• Finally, open the browser's developer tools, select the image and read the width it takes on screen. Do this at a wide desktop size and again at a phone width.

Worked example: take a theme with a container width of 1200 CSS pixels and a three-column card grid. With a 24 pixel gap between columns, each card is (1200 − 2 × 24) ÷ 3 = 384 pixels wide. So you prepare a card image that is 768 pixels wide at 2x.

Writing this inventory down before design starts saves the most effort. In our web design services, we record the width, ratio and phone crop of every image slot in a table during the design phase. Then the designer and the developer work from the same document.

What is an aspect ratio, and how do you calculate the height?

An aspect ratio is the width divided by the height, written like 16:9. When you know the width, you find the height with width × (second number ÷ first number). For example, at 1200 pixels wide, a 16:9 image is 1200 × 9 ÷ 16 = 675 pixels tall.

The ratios below appear often in practice. They are common habits, not rules, and every height below comes from a worked example at a 1200 pixel width.

• 16:9 is common for wide hero images and video covers, so the height comes to 675 pixels.
• 3:2 and 4:3 sit close to the native ratios of cameras and phones. They reduce cropping, and the heights come to 800 and 900 pixels.
• 1:1, a square, often suits team photos and some product cards. In that case the height is 1200 pixels.
• 1.91:1 is the ratio Meta's developer documentation recommends for link sharing images. In other words, a 1200 pixel width gives a height of about 630 pixels.

After you choose a ratio, crop every image to it. Cropping and stretching are not the same thing: stretching forces the image into the box and distorts faces, while cropping keeps the ratio and cuts the excess.

Worked example: how do you go from box width to file size?

The box widths in the table are examples, and your theme may use different ones. The formula stays the same on every site: the file width equals box width × density factor. You then derive the file height from that width and your chosen ratio.

A full-width image fills the whole screen. Worked example: on a screen 1920 CSS pixels wide, the 2x factor asks for 3840 pixels. Sending a file that large to every visitor makes the page heavy, so you set a cap. The cap is your decision, not a rule.

Website image sizes table: which calculation fits which image type?

This table covers on-page images, such as the hero image, the slider (a rotating set of images), banners and cards, plus the brand mark file. Where no official size exists, we say so, because the box width depends on your theme and design. The official values for favicons, sharing images and Apple icons follow in a separate table.

"No official size" is not a gap, it is honesty. These images depend on your layout, so the answer differs on every site. That is why you should not trust one fixed number you find online.

How big should a full-width hero image or slider be?

Website image sizes for a full-width hero have no single answer, because the box is the whole screen. You pick the size from the widest screen you want to support and the file weight you accept. Common practice is to set a cap and prepare several widths of the same image.

When you choose the cap, look at the device and screen size report in your analytics tool. If most visitors use laptops and phones, a very wide file helps only a small audience. So you avoid needless weight from the start.

A slider adds more rules:

• All slides need the same ratio. Otherwise the box height changes from slide to slide, the page jumps, or gaps appear at the edges.
• Do not bake the headline and button into the image. Live text stays readable on small screens and reaches screen readers.
• Keep the key subject centered, because narrow screens can crop the edges.
• Also check the contrast behind the text, or the words disappear into the photo.

Whether you need a slider at all is a separate question. In our guide on whether you should use a slider on your website, we cover the conversion impact and the right way to use one. Here we stay with the sizes.

Why do in-content banners turn unreadable on mobile, and how do you build them?

A banner is a wide strip that promotes a campaign or announcement inside a page. Worked example: a strip 1200 pixels wide shrinks to roughly one third when it lands on a 390 pixel phone screen. Text baked into the image shrinks by the same amount, so it turns unreadable.

Three steps fix this:

1. First, separate the text from the image and add the headline and button as live text.
2. Next, keep only the background in the image and hold the subject in a safe area.
3. Finally, prepare a taller crop for phones and tell the browser which one to show with the picture element.

Text inside images also creates an accessibility problem. Success criterion 1.4.5 of the Web Content Accessibility Guidelines (WCAG) 2.2 at level AA asks you to use text instead of images of text, because people cannot change how text looks inside an image. Logotypes, such as brand name text, count as an exception.

Keep in mind that ad network banner sizes are a separate topic and change from platform to platform. So check the current sizes in the help pages of systems like Google Ads. This guide covers the banners on your own pages.

How big should a blog featured image be?

A featured image shows up in four places at once. These are the card in your blog list, the top of the post, social shares and recommendation surfaces such as Google Discover. Each place crops it differently, so you prepare one master file with a safe area in the center.

The official values come from two sources. Google Search Central's Discover documentation asks for large images at least 1200 pixels wide, with the max-image-preview:large setting turned on. Meta recommends at least 1200 × 630 pixels for sharing images. So a 1200 × 630 file meets both conditions.

Worked example: if a theme crops a 1200 × 630 file to a square, the middle 630 pixels remain, which is 52.5 percent of the width. A 4:3 crop keeps 840 pixels of width, and a 16:9 crop keeps 1120. If you hold the subject in the middle 630 pixels, it survives every crop.

Google also advises against generic images, such as your site logo, in the og:image tag and in schema.org markup for Discover. So give each post an image that belongs to that post.

What sizes work for cards, team photos and testimonials?

For cards, website image sizes follow one main rule: every image in the grid shares one ratio. If the ratios differ, card heights change or the theme crops images on its own. Automatic cropping often cuts from the center, so half a product or half a face can disappear.

The math is simple. Worked example: a card 384 pixels wide with a 4:3 ratio needs a 768 × 576 pixel file at 2x. So crop each card image to that size before you upload it.

Team and testimonial photos usually work as squares or portraits. Also keep the same framing, the same light and a similar background across everyone, because consistency adds order and trust. Worked example: a 200 pixel portrait box needs a 400 × 400 pixel file.

Enlarging a small file softens the face and never brings sharpness back. Instead, export again from the original photo. We covered what real photos add in our comparison of professional photography and stock photos.

Why should your brand mark file be a vector?

The brand mark (logo) file is the smallest image on your site, yet people see it on every page. A vector file such as SVG redraws at any size, so it stays sharp at every screen density. Pixel files such as PNG and JPG hold a fixed number of dots.

In practice, prepare two files. Use the vector version on your site, and keep a PNG version for places that do not accept vectors, such as email signatures and social profiles. Worked example: if the PNG sits 48 pixels tall in the header, export it at 96 pixels tall.

Your brand mark and your favicon do not have to be the same file. A favicon appears tiny in a browser tab, so it should be simpler. Also, WCAG treats logotype text as an exception, but you should still give the brand mark a meaningful alt text.

What are the official website image sizes for favicons, sharing images and Apple icons?

The values below come from the relevant official documents. Platforms can update their rules, so check the source page before you publish.

Brand marks, cards and sliders have no official size at this level. So you calculate them from the box width.

What does Google require so your favicon appears in search?

Google Search Central's favicon documentation sets small but clear rules. The favicon must be square and at least 8 × 8 pixels. Google also recommends a file larger than 48 × 48 pixels so it looks good on various surfaces.

This practical checklist comes from the documentation:

• Use one favicon per hostname, because subdirectories share the home page's favicon.
• Do not change the favicon URL often, so keep it stable.
• Google's image crawler must reach the file, and its main crawler must reach the home page. So do not block them in robots.txt.
• Add the favicon link to the head section of the home page.
• Choose a simple mark that represents the brand, and avoid details that vanish at small sizes.

Even if you follow every rule, the favicon may not show up in search right away, because updates take time. To work through the problem step by step, see our post on why the favicon is not showing in Google search results.

How do you prepare and test a social sharing image?

A sharing image is the picture on the card that appears when you paste a page address into a messaging app or social network. Meta's developer documentation recommends at least 1200 × 630 pixels. The minimum for a large card is 600 × 315 pixels, and the file should not exceed 8 MB.

The documentation also suggests staying close to a 1.91:1 ratio, so the full image shows in the feed without cropping. Smaller images still appear, but the card is much smaller. Keep three things in mind while you prepare it:

• Give every page its own sharing image. Otherwise the card may appear without a picture, or with an unwanted one.
• Keep the subject centered and leave margins at the edges, because platforms crop in different ways.
• If you place text inside the image, keep it short. Also repeat the information as text on the page.

To test, use our Open Graph checker and link preview tool. You paste the page address, and the tool shows the cards for WhatsApp, Facebook, X, LinkedIn and Telegram. It also finds missing tags and image errors. If you change the image, remember that platforms may keep the old preview for a while.

Which Apple touch icon file do you need?

The Apple touch icon is the icon that appears when someone with an iPhone or iPad adds your site to the home screen. Apple's Safari Web Content Guide tells you to put a PNG file named apple-touch-icon.png in the root folder for the whole site.

For single pages you can add a separate link element, and for several device resolutions you can add the sizes attribute. The sample markup in the guide shows files of 152 × 152, 167 × 167 and 180 × 180 pixels. However, the guide sends you to Apple's Human Interface Guidelines for current icon sizes.

If no icon matches the recommended size for a device, the guide says the smallest icon larger than the recommended size wins. If none is larger, the largest one applies. So a single large square PNG beats having no file at all.

Google also accepts this link type when it looks for a favicon. As a result, one good icon does two jobs.

How do website image sizes change on mobile, and how do you prevent bad crops?

On a narrow screen, the box shrinks. If the ratio stays the same, the height drops too, and the subject looks small. Moreover, if the theme fills the box with the image, it trims the edges, and part of a face or headline can vanish depending on screen width.

MDN's responsive images guide (Mozilla's web documentation) separates two different problems. The first is resolution switching: you want to send smaller files to narrow screens. The second is art direction: you want to show different crops in different layouts.

• For resolution switching, prepare several widths of the same crop, for example 480, 800, 1200 and 2400 pixels. Then you list them with the srcset attribute and describe the space the image will take with the sizes attribute. The browser picks the best one.
• For art direction, use the picture element. You give phones a square or portrait crop and desktops a wide crop. MDN states that a picture element needs an img element with src and alt inside it, or no image appears.
• Many content management systems create smaller copies of an uploaded image. Still, check which widths yours produces in the theme documentation and in the related admin setting.

Set the focal point while you prepare the image: which area must stay visible, the face, the product or the headline? Then test the crop at phone and desktop widths before you export. Finally, check on a real phone, because browser simulation does not show every difference.

What comes after the right size: compression, layout shift and speed?

Getting your website image sizes right is step one. Step two is compression and file format, but that topic deserves its own post. In our guide on how to optimize images for website speed and SEO, we cover formats, compression and loading, so we do not repeat it here.

Step three is declaring width and height. If you write the image's width and height values in the markup, the browser reserves space before the image arrives. So the page does not jump while it loads. The score that measures this jump is CLS (Cumulative Layout Shift). For details, read our post on what CLS is and how to fix it.

Step four is the speed of the main image. The wide image at the top of a page is often the largest content element, so it sets your LCP (Largest Contentful Paint) time. An oversized or late-loading hero image makes the page look slow. In our post on LCP and how to optimize it, you can find the causes and fixes.

Mixed ratios in a slider also cause jumps. So giving every slide the same ratio protects both the look and your CLS.

What should you check first when images look blurry, stretched or cropped?

When website image sizes go wrong, work through this list in order. It starts with the cause we meet most often in the field, so check the first item first, because it is the most common reason for blur.

1. Compare the file's pixel width with the box width × the density factor. If the file is smaller, export again from the original, because enlarging never brings sharpness back.
2. Compare the image's ratio with the box's ratio. If they differ, the image looks stretched or squashed, so crop instead of stretching.
3. Next, look for crop problems. If the theme fills the box, center the subject or prepare a separate phone crop.
4. If the page feels heavy, check whether the file is far larger than the box needs. Resize first, then compress.
5. If content jumps during loading, check the width and height values and the slide ratios.
6. Finally, if a share shows the wrong image, check the page's sharing image tag and the platform cache.

Example scenario: a business uploads a 4000 pixel wide phone photo straight into a card slot. The card shows it at 384 pixels wide, so the file is far larger than needed. Also, the theme crops it to a square, so the subject looks cut in half. The fix has two steps: first crop the photo to 4:3, then resize it to 768 pixels wide.

What belongs in a website image sizes brief for your designer or agency?

A brief is a short document that defines the job. A good brief closes the question "how many pixels?" before the work starts. The list below shows the minimum you can hand to a designer or agency.

• A list of every image slot: hero image, slider, banner, featured image, cards, team photos, brand mark, favicon, sharing image and Apple icon.
• For each slot, the box width and ratio on desktop and on phones, because the sizes follow from them.
• The density factor, plus a cap for full-width images.
• The safe area, the focal point and whether you need a separate phone crop.
• A text policy: add text as live text instead of baking it into images, except for logotypes.
• The delivery format: source files, exported copies, and a vector plus PNG for the brand mark.
• File naming, who writes the alt text, and the usage rights for photos.
• Acceptance testing, meaning a check on phone and desktop plus a link preview test.

If you are moving your current site from another platform, add an image inventory to the migration plan. Our guide to migrating from Wix describes the general flow. However, you should rebuild the image size plan together with the new site's design.

Which free tools of ours speed up the sizing work?

Three free tools make these calculations and checks easier. The first two run in your browser without uploading your files.

• Image resizer: you type the width, and the aspect lock calculates the height for you. Then you download JPG, WebP or PNG.
• Image converter: it converts JPG, PNG and WebP in batches. You also set the quality and the background color yourself.
• Open Graph checker: you paste the page address, and the tool measures the sharing image. So you see how the cards will look before you publish.

First find the box width, then enter twice that size in the image resizer. Finally, after the page goes live, check the sharing card with the Open Graph checker.

If you want us to handle this, how do we work with you?

Working out website image sizes at the start of design and build saves time and cuts later fixes. We design, build, migrate and manage your website. We also put your image inventory and size plan in writing at the start.

For your project, look at our business website design page and request a quote. We listen to the scope of your project and prepare a quote based on your needs.

In short: find the box width, choose the ratio, multiply by density, and check the crop on a phone. Then verify the official values in the source documents.