Image size guide: dimensions, file size, and formats explained
Getting image sizes right matters far beyond web design. Oversized images are the most common reason web pages feel sluggish, uploads get rejected for being “too large,” or email attachments bounce back. Whether you’re building a website, filling out an online form, or just sending a photo to a friend, the same two questions decide whether it works: how big are the dimensions, and how much data does the file take up?
The confusing part is that “image size” means two different things, and they need to be handled separately.
Dimensions vs file size
Dimensions are the pixel width and height of an image — for example, 1920 × 1080. This determines how large the image can be displayed before it looks blurry.
File size is how much data the image takes up — for example, 450 KB. This determines how long it takes to download.
These are related but not the same. A 1920 × 1080 photo can be 4 MB or 300 KB depending on how it was compressed. Reducing dimensions almost always reduces file size, but you can also cut file size dramatically while keeping the same dimensions.
The right approach is to fix dimensions first, then compress.
Step 1: Choose the right dimensions
The rule is simple: never keep an image larger than it will ever be displayed. If a blog’s content area is 800 pixels wide, a 4000-pixel-wide photo is wasting more than 90% of its data. The same logic applies to a form upload or an email attachment — bigger than necessary just means slower and heavier, with no visible benefit.
For websites and digital use
| Use case | Recommended width | Notes |
|---|---|---|
| Full-width hero / banner | 1920 px | 2560 px if your audience skews toward large desktop monitors |
| Blog post inline image | 1200 px | Covers most content areas with room for retina displays |
| Product photo (e-commerce) | 1000–1500 px square | Enough detail for zoom without bloating page weight |
| Blog thumbnail / card | 600 px | Cards are rarely wider than 400 px in practice |
| Avatar / profile image | 400 px square | Displays are typically 40–150 px |
| Open Graph (social share preview) | 1200 × 630 px | Used when your page is shared on social platforms |
| Favicon | 32 × 32 and 16 × 16 px | Keep the design simple — fine detail disappears at this size |
For platform-specific social media sizes (Instagram, Facebook, LinkedIn, and others), see the social media image size guide.
For documents and forms
| Use case | Recommended size | Notes |
|---|---|---|
| Email attachment | Keep under 5 MB total | Most providers cap attachments between 10–25 MB, but smaller sends faster and is less likely to be rejected |
| Online form / document upload | Follow the form’s stated limit | When no size is given, 1200 px wide and under 2 MB satisfies most forms |
| ID or application photo | Check the issuing authority’s exact requirements | Pixel dimensions vary by country and document type — always confirm with the official source rather than a general guide |
A note on retina displays
High-density screens pack more physical pixels into the same space, so an image displayed at 800 px wide can look slightly soft on those devices unless it contains more pixel data.
The common recommendation is to supply images at roughly twice the display width. But be careful: doubling the width roughly quadruples the pixel count, which can undo all your file size savings. In practice, 1.5× to 2× is enough, and heavier compression at the larger size often produces a better result than a smaller image at high quality.
Step 2: Pick the right format
| Format | Best for | Avoid when |
|---|---|---|
| JPG | Photographs, images with gradients | The image needs transparency |
| PNG | Logos, icons, screenshots, anything with sharp edges or transparency | The image is a photograph — PNG files will be far larger |
| WebP | Almost everything — typically 25–35% smaller than JPG at similar quality | You need maximum compatibility with very old software |
| GIF | Short simple animations only | Anything static — PNG or WebP is better in every way |
The most common and costly mistake is saving photographs as PNG. A photo saved as PNG can easily be five to ten times larger than the same photo as JPG, with no visible quality benefit.
Step 3: Set file size targets
Once dimensions and format are settled, compress to hit these targets:
| Image type | Target file size |
|---|---|
| Hero / banner image | Under 200 KB |
| Blog inline image | Under 150 KB |
| Product photo | Under 100 KB |
| Thumbnail | Under 30 KB |
| Icon / logo | Under 15 KB |
A useful overall rule: keep total page weight under 1 MB where you can, and treat 2 MB as a hard ceiling. If a single page is loading five images at 500 KB each, that page will feel slow no matter how well the rest of it is built.
How much compression is too much?
For JPG, quality settings between 75 and 85 are the sweet spot for most photographs. Below about 70, compression artifacts start appearing around sharp edges and in areas of flat color — skies are usually the first place you notice.
Rather than guessing at a quality number, compress the image and compare it to the original at 100% zoom. If you cannot tell the difference, you can probably compress further.
Common mistakes
Uploading straight from a phone or camera. Modern phone cameras produce images of 12 megapixels or more, often 4 MB and up. These need to be resized before they go anywhere near a web page.
Resizing with HTML or CSS instead of the actual file. Setting width="400" on a 4000-pixel image makes it display small, but the browser still downloads the entire 4 MB file. The savings only happen when you resize the file itself.
Compressing an already-compressed image repeatedly. JPG compression is lossy, meaning data is permanently discarded each time. Saving a JPG, then compressing it again, then again, degrades quality with each pass. Always work from the original.
Ignoring image dimensions in HTML. Even with correctly sized files, omitting width and height attributes causes the page to shift as images load. This hurts your Cumulative Layout Shift score, which is one of Google’s Core Web Vitals metrics.
A practical workflow
- Resize first. Bring the image down to the largest size it will actually be displayed at. Use the resize tool to set an exact width or scale by percentage.
- Compress second. Reduce the file size without visibly changing the image. The compression tool handles this in your browser.
- Check the result. Compare against the target file sizes above. If you are still over, try reducing dimensions slightly rather than compressing harder.
Doing it in this order matters. Compressing a large image and then resizing it wastes the compression work, because resizing re-encodes the image anyway.
Quick reference
- Width of 1200 px handles most content images
- 1920 px for full-width heroes
- JPG for photos, PNG for graphics with transparency, WebP when you can
- Aim for under 150 KB per content image
- Resize before you compress
- For social platform sizes, see the SNS image size guide