What size should website images be? A practical table

Ask three people what size a website image should be and you will get three answers: "1920 wide", "under 100 KB" and "just use the biggest one". All three are partly right, which is why so many small-business sites end up with a homepage that weighs more than a short video.

The honest answer has two halves. There is the size in pixels, which is how wide and tall the picture is. And there is the size in kilobytes, which is how much data the visitor has to download. You need to get both right, and they depend on where the image appears.

This guide gives you a practical table you can copy, explains where the numbers come from, and shows how to apply them to a whole folder of photos in a few minutes.

The quick answer: a table of website image sizes

Use this as your default. Pixel sizes assume you want pictures that stay sharp on today's high-density phone and laptop screens, which is why export widths are roughly double the width the image is shown at.

If you only remember one line, make it this: export at about twice the largest width the image is displayed, never larger, and keep photos under about 100 to 200 KB.

The rest of this post explains why.

Why pixel size and file size are different things

A photo from a modern phone is often 4000 pixels wide or more and several megabytes. Your page might show it in a column 700 pixels wide. The browser still downloads every pixel and then squashes the picture down to fit. The visitor pays for data they cannot see, and your page loads slower for it.

Resizing fixes the first problem. Compression fixes the second. Both are needed:

• A 1200 px photo saved at maximum quality can still be 600 KB.
• A 4000 px photo compressed hard can still be 400 KB, and it will look soft or blotchy when shown large.
• A 1200 px photo at sensible quality is usually 60 to 120 KB and looks the same on screen.

So the table gives you both: a pixel width to export at and a file-size ceiling to check against.

Why export at double the display width

Phones and many laptops pack two or three physical pixels into the space of one layout pixel. An image shown 600 px wide in your layout is drawn with 1200 or more real pixels on those screens. If you supply only 600 pixels, the screen stretches them and the picture looks slightly soft.

Doubling is the practical sweet spot:

• Less than double and detail on high-density screens starts to look fuzzy.
• More than double and you add file weight that almost nobody can see.

That is why a content-column photo shown at 700 px gets exported at 1200 to 1400 px, and why a thumbnail shown at 300 px is exported at 600 px.

There is one exception worth knowing: do not enlarge small pictures. If you only have an 800 px original, keep it at 800 px. Scaling it up to 1200 adds file size but no extra detail.

How to size each type of image

Hero and banner images

The hero is the large picture at the top of a page. It is usually the biggest thing on the screen and often the slowest, so it deserves the most care.

• Export at 1920 px wide. Wider than that is almost never visible, even on large monitors.
• Aim for under 200 KB. A hero over 500 KB is the single most common reason a small-business page feels slow on a phone.
• Crop to the shape you actually display. A wide banner needs a wide crop, not a tall photo that is cut off by the layout.
• Keep key content (faces, signs, products) away from the edges, because narrow phone screens trim the sides.

Photos inside pages and articles

These sit in a reading column that is rarely wider than 800 px.

• Export at 1200 px wide, or 1400 px if your column is closer to 800.
• Aim for under 100 KB, which is easy for most photos at quality 75 to 80.
• If a photo is just decoration, it can go smaller still.

Product and gallery photos

Grids of products show many images at once, so small savings multiply.

• Export grid thumbnails at around 1000 px wide when buyers can open them larger, or 800 px if the grid is all they see.
• Keep every product photo to the same shape, such as 4:3 or square, so the grid stays tidy.
• Aim for under 80 KB each. A page with 24 products at 300 KB each is over 7 MB before anything else loads.

Thumbnails and cards

Small previews in lists, blog indexes and "related" panels.

• Export at 600 px wide for a card shown around 300 px.
• Aim for under 30 KB. At this size there is nothing to gain from a larger file.

Team photos and portraits

• Export at 800 px wide for a portrait shown around 400 px.
• Crop faces consistently so a row of people looks even.
• Faces show compression damage quickly, so use quality 80 rather than 65.

Logos

• A logo is best as an SVG, which stays sharp at any size and is often just a few kilobytes.
• If you only have a PNG or JPEG, export it at 400 px wide for a logo shown around 200 px.
• Never stretch a small logo file up to fit. Ask for a larger one instead.

Social share images

When someone shares your page, feeds show a wide preview image.

• Use 1200 x 630 px. That is the shape most feeds crop to.
• Keep the important words well inside the edges.
• Stay under 1 MB, and ideally under 300 KB, so the preview appears quickly. If you want to see how the card looks before you post, our link preview maker shows it on four common card styles.

Square images

Square crops suit profile pictures, product tiles and many post formats.

• Export at 1080 x 1080 px.
• Crop from the middle of the photo, or choose the top if faces sit high in the frame.

Choosing the format: WebP, JPEG or PNG

The table recommends WebP for most photos because it is usually noticeably smaller than JPEG at similar visual quality and works in all current browsers. A quick guide:

• WebP: the best default for photos and most graphics.
• JPEG: a safe fallback for photos, and good for files that must open anywhere, such as email attachments and some print services.
• PNG: for screenshots, sharp-edged graphics and anything that needs a transparent background. It is a poor choice for photographs because the files grow very large.
• SVG: for logos and simple icons that must stay sharp at every size.

For a deeper walkthrough of formats, compression levels and the markup behind them, read our image optimization guide.

What quality setting should you use?

Quality is a slider from 0 to 100 in most tools. The useful range is narrow:

• 75 to 80 suits most photos. The file is far smaller than at 100 and the difference is rarely visible at normal size.
• 85 for images with text, thin lines or lots of fine detail.
• 60 to 70 for soft or blurred backgrounds, where detail barely matters.
• Above 90 is almost always wasted bytes.

The simplest test is to view the result at the size it will actually appear on your page, not zoomed in. If you cannot tell the two apart, keep the smaller file.

A five-minute workflow for a whole folder

Resizing images one at a time is slow, so most owners skip it and upload the originals. Here is a routine that handles a batch:

1. Sort the photos by job. Pick out the hero, the content photos, the product shots and the thumbnails.
2. Pick the matching preset for each group from the table above.
3. Drop the group into the image resizer and choose WebP at quality 80.
4. Check the sizes shown beside each file. Anything over the target? Drop the quality a few points or choose a smaller preset.
5. Compare before and after on one or two photos to make sure the detail you care about is intact.
6. Download each file, name it descriptively and upload it to your site.

Because the resizer runs entirely in your browser, nothing is uploaded and nothing waits in a queue. Your pictures never leave your device.

Common mistakes

• Uploading the camera original. A single 6 MB photo can undo every other speed improvement on the page.
• Resizing in the page, not in the file. Setting a big picture to display small leaves the large file download in place.
• Enlarging small images. It makes the file bigger and the picture no sharper.
• Mixing shapes in a grid. Uneven crops make product pages look careless and cause layout jumps.
• Forgetting the sharing image. A missing or badly cropped share image costs you clicks every time the page is posted.
• Saving the same file over and over. Each JPEG save loses a little quality. Always resize from the original.

Checking your page afterwards

After you swap in the new files, test the page on a phone over a mobile connection. Watch how long the main picture takes to appear. Then run your homepage through the free website grader and see whether your score moves. Most pages improve noticeably after only the top three or four images are fixed.

Image weight is only one part of a fast site. Our guide to website speed for small business covers fonts, scripts and hosting, and the small business website checklist pulls the essentials together.

Frequently asked questions

What is the best image size for a website?

For most photos, export at about 1200 pixels wide and keep the file under 100 KB. Use 1920 pixels wide for a full-width hero image, and keep it under about 200 KB.

What is the ideal file size for website images?

Aim for under 200 KB for a hero image, under 100 KB for photos in content, and under 30 KB for thumbnails. Try to keep all the images on one page to roughly 1 MB in total, unless it is a portfolio.

Should I use WebP or JPEG?

Use WebP for most photos because the files are usually smaller at similar quality and it works in all current browsers. Keep JPEG as a fallback for places that need universal compatibility, such as email attachments.

Does image size affect SEO?

Indirectly, yes. Large images slow a page down, and slow pages lose visitors and can rank lower. Sensible image sizes also help the main picture appear sooner, which improves how fast the page feels.

What size should a social share image be?

Use 1200 x 630 pixels, with key content kept well inside the edges. Aim for under 1 MB, and ideally under 300 KB.

Next step

Pick the three biggest pictures on your homepage. Match each to a row in the table, resize them with the image resizer, and swap them in. Then grade your website again and see the difference.