What Image Size and Resolution Do You Need? A Practical Web Guide
Last updated: June 2026
If you have ever wondered why your "high-resolution" photo looks fine on your phone but takes forever to load on your website, you are not alone. Image sizing is genuinely confusing because three completely different things get lumped together under the word "size." Let's untangle them, then put real numbers to the most common uses.
The three things people mix up
These are not the same measurement, and confusing them is the root of most image problems:
- Pixel dimensions — the actual width and height in pixels, like 1920 × 1080. This is the only thing that determines how big an image appears on a screen.
- File size — how many kilobytes or megabytes the file takes up, like 240 KB or 4 MB. This determines how fast the image downloads, and it depends on dimensions and compression.
- DPI / PPI — dots (or pixels) per inch. This is a print instruction. It is metadata that tells a printer how densely to lay down a fixed number of pixels on paper.
Here is the myth worth killing: DPI does nothing on a screen. A 1000 × 1000 px image displays identically at 72 DPI and 300 DPI in a web browser, because the browser cares only about pixels. "Save this for web at 72 DPI" and "300 DPI is needed for sharp web images" are both leftovers from the print era. On the web, pixel dimensions and file size are all that matter.
Concrete pixel dimensions for common uses
Use these as solid starting points for on-screen display:
- Full-width hero / banner: 1920–2560 px wide. Go to 2560 px only if the image truly spans an ultra-wide layout.
- In-content blog image: 1000–1600 px wide. Most article columns are well under 800 px, so 1200 px gives you headroom without bloat.
- Thumbnail: 300–500 px wide. Small previews never need more.
- Social profile picture: around 400 × 400 px square is a safe, widely accepted size.
- Social posts: roughly 1080 × 1080 px for square posts and 1080 × 1350 px for vertical "portrait" posts. Treat these as ballpark — platforms change their recommended sizes often, so confirm current specs before a big campaign.
Why a 6000 px phone photo is wasteful
A modern phone shoots photos around 4000–6000 px wide and 3–8 MB each. If you drop that straight into a 1200 px-wide blog slot, the browser still downloads all 6000 px and then shrinks them on the fly. You pay the full file-size cost for pixels nobody ever sees. Resizing to the actual display width and then compressing can take a 5 MB photo down to 150–300 KB — often a 90%+ reduction — with no visible quality loss. That is the single biggest win for page speed.
The fix is two steps. First, resize to the right pixel dimensions using exact pixels, a percentage, or a preset (high-quality Lanczos resampling keeps edges crisp). Then compress the file by quality or to a target KB. Have a whole folder of phone photos? The bulk image resizer applies one setting to many images at once and hands you a ZIP.
Retina and high-DPI screens
Modern "Retina" displays pack two (or more) physical pixels into each CSS pixel. So an image shown in a 600 px-wide slot looks soft on these screens unless you supply more pixels. The common fix is to export at 2× the display size — a 600 px slot gets a 1200 px image — then let the page scale it down. You still compress hard, because well-compressed 2× images usually weigh less than you would expect and stay sharp everywhere.
Aspect ratios beat squashing
Aspect ratio is the shape: 16:9 (widescreen, video and banners), 4:3 (classic photo), 1:1 (square, profiles and grids). If you force an image into a slot of a different shape, the browser stretches it and faces look distorted. The right move is to crop to the target ratio so you control what stays in frame. The image editor crops to standard aspect ratios cleanly.
The one case where DPI matters: print
For anything printed on paper, DPI is real and you do want about 300 DPI. Since DPI is just pixels packed per inch, the math is simple: multiply the inches by 300. A 4 × 6 inch photo print needs roughly 1200 × 1800 px; an 8 × 10 needs about 2400 × 3000 px. If your image has fewer pixels than that, the print will look soft no matter what DPI number you type in.
The workflow in one line
Pick the right pixel dimensions for where the image will appear, crop to the correct aspect ratio if needed, resize, then compress. Do those two things in that order and your images will look sharp, fit perfectly, and load fast — on every screen.