Website Image Size Guide: The Right Dimensions and File Size for Every Image

The two meanings of "image size"

When someone says an image is "too big", they could mean either of two different things.

The four are linked. Dimensions set the amount of raw data; format and compression decide how tightly it is packed into a file. A 4000 × 3000 image has 12 million pixels. Resize it to 1600 × 1200 and it has under 2 million, an 84 percent reduction before compression does anything.

What about DPI?

DPI (dots per inch) matters for printing. On a screen, only the pixel dimensions count. A 1600-pixel-wide image looks identical at "72 DPI" and "300 DPI". You can ignore the setting for web use.

Why image size matters

• Loading speed. Images are usually the heaviest part of a page. The main image is often the Largest Contentful Paint element, one of Google's Core Web Vitals.
• Mobile data. Many visitors are on phones and metered connections.
• Sharpness. Too small, and the image looks soft or pixelated when stretched.
• Layout. The wrong shape gets cropped by themes, cards and social networks, sometimes cutting off faces or text.
• Storage and backups. A media library of oversized uploads makes backups slow and hosting plans fill up.

Image weight is one part of total page weight. For the full picture, see our guide to page weight and performance budgets.

Recommended image sizes by use

These are sensible starting points for a typical blog or business site whose content column is 700 to 900 pixels wide.

The 1200 × 630 size matches the Open Graph image shape that Facebook, LinkedIn and many other platforms use for link previews. WordPress asks for a site icon of at least 512 × 512 pixels.

Why "double it for sharp screens"?

Most phones and many laptops have high-density displays that pack two or more physical pixels into each CSS pixel. An image shown 800 pixels wide looks crispest when the file is about 1600 pixels wide. Going beyond twice the display width adds weight with no visible gain.

How to size an image, step by step

1. Find the display width. Open a published post, right-click an image, choose Inspect and read the rendered width. Or check your theme's documentation for the content width.
2. Double it. That is your target width in pixels.
3. Crop to the right shape first. Decide the aspect ratio for the slot, then crop, so nothing important is cut later.
4. Resize to the target width. Any image editor, or your computer's built-in photo app, can do this.
5. Choose the format. WebP for photos, SVG for logos, PNG or lossless WebP for screenshots with text. Our guide to the best image format for web explains each.
6. Compress. Lower the quality until you can just see a difference at normal size, then go back one step.
7. Check the result with the analyzer below before uploading.
8. Name the file and write alt text. A descriptive filename and a short description of what the image shows.

Free image size and format analyzer

Choose an image from your device. The analyzer reads it in your browser and reports its dimensions, weight, shape and format, then tells you whether it suits the use you pick.

How the tool works

Your browser opens the file locally and reads its real pixel dimensions; the file size and type come from the file itself. Nothing is uploaded. The aspect ratio is calculated from width and height and matched to the nearest common shape. The verdict compares your image with the working targets in the table above for the use you select. It judges size and shape only. It cannot judge how the picture looks, and it does not change or convert the file. To convert, use the tool in our image format guide.

Practical examples

File sizes after conversion vary with the picture. Detailed, noisy photos compress less than smooth ones.

How WordPress handles image sizes

When you upload an image, WordPress keeps the original and creates several smaller copies. By default these are a thumbnail (150 × 150), medium (up to 300 px), medium-large (768 px wide) and large (up to 1024 px), plus any sizes your theme adds. You can change the first three under Settings → Media.

WordPress then outputs a srcset list with each image so the browser can pick a suitable copy for the screen. It also adds lazy loading to most images and, since version 5.3, scales down very large uploads to a maximum of 2560 pixels on the longest side.

This helps, with limits:

• If the original is too small, there is nothing to scale up from.
• If a theme or page builder requests the "Full" size, visitors get the big file anyway.
• Extra copies of oversized uploads still fill your storage.

Upload at a sensible size and WordPress's own features work in your favour. If your site is still slow afterwards, work through why a WordPress site is slow.

Resizing by hand or with a plugin

An image optimisation plugin automates compression and format conversion, and can process the existing library. It suits busy sites and teams. Doing it by hand suits small sites and anyone who wants fewer plugins. Many people do both: resize sensibly before upload and let a plugin handle conversion.

Common mistakes

• Uploading straight from the camera.
• Shrinking with CSS or by dragging the corner in the editor. The page still downloads the full file.
• Enlarging a small image. Software cannot invent detail. Start from a larger original.
• Using one shape everywhere. A square image in a wide slot is cropped; a wide image in a square card loses its sides.
• Putting text near the edges. Crops on cards and previews cut it off. Keep text and faces central.
• Saving at maximum quality. The file grows a lot; the picture does not visibly improve.
• Ignoring the featured image shape. It is the picture people see when your link is shared.
• Leaving out width and height. Without them the page jumps as images load.
• Deleting the original. Keep it somewhere safe; you may need a different crop later.

Advanced tips

• Do not lazy-load the first image. The image at the top of the page should load immediately; lazy loading is for images further down.
• Use the picture element or a plugin for art direction, when a wide desktop banner needs a different, taller crop on phones.
• Set a budget. Decide a maximum total image weight per page, such as 800 KB, and check it when you publish.
• Audit the heaviest files. Use your host's file manager, or an optimisation plugin's report, to find the largest images and fix the worst ten first.
• Check Search Console. The Core Web Vitals report shows whether real visitors experience slow loading.
• Serve images through a CDN if your visitors are spread across countries.

Image upload checklist

FAQ

Final recommendation

Getting website image size right is a three-number habit: the display width, doubled; the aspect ratio of the slot; and a weight limit. For most sites that means around 1600 pixels for in-article images, 1200 × 630 for featured images and under 200 KB each. Run your next image through the analyzer above before uploading, and fix the ten heaviest images already on your site. It is the simplest speed improvement most websites can make.

Official references

• web.dev: Learn Images
• MDN: responsive images
• Google Search Central: image SEO best practices
• WordPress.org documentation: Settings Media screen
• The Open Graph protocol

Related articles