Image resolution for the web, explained end to end
.svg)
Last updated: 9 October 2026
The best DPI for website photos is 72 PPI (pixels per inch) for standard screens. For retina and high-density displays, 144 PPI (or simply doubling your pixel dimensions) gives you crisp results without waste. DPI as a concept matters very little on the web — what actually determines image quality and page performance is pixel dimensions combined with file size and format.
Key takeaways
72 PPI is the standard for web images on conventional screens; 144 PPI covers retina and high-density displays.
DPI and PPI are essentially irrelevant metadata for web delivery — browsers render images based on pixel dimensions, not the DPI value stored in the file.
Keep image width between 1,200 and 2,560 pixels for most full-width web use; smaller images (600–900 pixels wide) for thumbnails, cards and sidebars.
Target a file size below 200 KB per image; full-width hero images can stretch to 400 KB if the format and compression are good.
WebP is the format to reach for first — it delivers smaller files than JPEG or PNG at comparable quality.
Oversized images directly harm page load speed, which affects both user experience and Google search rankings.
What does DPI actually mean, and why does it confuse people?
DPI stands for "dots per inch" and is a print concept. It tells a printer how many ink dots to squeeze into one inch of paper. At 300 DPI, a printer lays down 300 dots per inch, producing sharp printed output.
PPI (pixels per inch) is the screen equivalent: the number of pixels packed into one inch of a display. A standard monitor typically shows 96 PPI; a modern retina laptop screen might display 220 PPI or more.
When people ask "what DPI should my website images be?", they are usually asking the wrong question — but it is a reasonable one if they have come from print work. The confusion is that image editing software (Adobe Photoshop, for example) embeds a DPI value into every image file. When you save a JPEG at 72 DPI versus 300 DPI, the file might look different in the software, but if the pixel dimensions are identical, the image looks exactly the same in a browser. A browser does not read the embedded DPI tag; it reads pixel dimensions and renders accordingly.
Why do browsers ignore DPI?
A browser does not know how physically large your screen is in inches. It knows how many pixels are available. When you put a 1,200-pixel-wide image on a page, the browser displays it 1,200 pixels wide, regardless of whether that image has a DPI tag of 72 or 300.
The DPI metadata that lives inside a JPEG or PNG file is read by print software and operating systems for certain tasks (like deciding how large to print an image at default settings). For web delivery, it is essentially a passenger — it adds a small amount of file data and changes nothing visible.
This means you can strip the DPI metadata from web images entirely, and most compression tools do exactly that as part of their optimisation process.
What pixel dimensions should website images actually be?
Pixel dimensions are the measurement that matters. The right dimensions depend on where the image appears on the page.
Image placement | Recommended width (pixels) | Notes |
Full-width hero / banner | 1,920–2,560 px | Covers widescreen monitors; compress aggressively |
Main content area image | 1,200–1,600 px | Covers most desktop layouts |
Blog post inline image | 800–1,200 px | Matches typical content column widths |
Thumbnail or card image | 400–600 px | No need for larger; resizing is wasteful |
Logo | 200–400 px | SVG preferred where possible |
Retina version (srcset) | 2x the standard width | Served only to high-density screens via HTML |
These are working targets, not hard rules. The actual dimensions of your content area (which you can check in your browser's developer tools) should guide your decision. An image wider than its container is waste. An image narrower than its container will either pixelate or be stretched by the browser, both of which look poor.
How do retina displays change the calculation?
Retina displays (Apple's term) and high-density displays more broadly pack more physical pixels into each inch of screen. A standard monitor might show 1 device pixel per CSS pixel; a retina screen shows 2 or even 3.
The practical consequence: an image that looks sharp on a standard monitor may appear slightly soft on a retina screen, because the display is trying to render 2 physical pixels for every 1 pixel your image provides.
The solution is to serve a version of the image at double (or triple, for very high-density screens) the pixel dimensions, but only to devices that need it. You do this in HTML using the srcset attribute, which tells the browser which image file to pick based on the device's pixel ratio. The browser downloads only the version it needs — standard devices get the smaller file, retina devices get the larger one. This keeps page load times reasonable across all device types.
If your website platform is WordPress, Squarespace, Shopify or similar, there is a reasonable chance this is handled automatically. It is worth checking by using Chrome DevTools to inspect which image file is being loaded on a retina versus a standard screen.
How does image resolution affect page speed, and why does that matter?
Page speed matters for two reasons. First, slow pages lose visitors — a page that takes more than a few seconds to load sees a measurable drop in engagement. Second, Google uses page speed as a ranking signal, incorporated into its Core Web Vitals metrics.
Images are typically the single largest contributor to page weight. A homepage with six uncompressed JPEG photographs can easily reach 10–15 MB, which is far beyond what is needed and will result in slow load times on mobile connections.
The Largest Contentful Paint (LCP) metric — which measures how quickly the biggest visible element (often a hero image) loads — is one of the three Core Web Vitals Google uses to assess page quality. An oversized hero image in the wrong format will directly damage this score.
At Revolve, we work with small businesses on their wider digital performance, and image weight comes up repeatedly in technical audits of sites that are underperforming in search. The fix is usually straightforward, but the impact on load speed can be significant.
Which image format should you use for web?
Format | Best for | Typical file size vs JPEG | Browser support |
WebP | Photos, graphics, most web use | 25–35% smaller | Excellent (all modern browsers) |
JPEG | Photos where WebP unavailable | Baseline | Universal |
PNG | Images needing transparency | Larger than JPEG | Universal |
SVG | Logos, icons, illustrations | Smallest for vector | Universal |
AVIF | Photos, next-generation option | Up to 50% smaller than JPEG | Good and growing |
GIF | Simple animations only | Large for animations | Universal |
WebP should be your first choice for photographs and most graphics. It offers substantially smaller file sizes than JPEG at the same perceived quality, with no meaningful trade-off for modern browsers. If you are still delivering JPEGs for every image on your site, switching to WebP is one of the highest-return optimisation changes available.
SVG deserves special mention for logos and icons. Because SVG is a vector format (mathematical paths, not pixels), it scales perfectly to any size and any screen density without needing a retina variant. Where logos are concerned, SVG sidesteps the DPI question entirely.
How do you optimise images for the web without losing quality?
Follow this process each time you prepare an image for web use:
Start with a high-resolution source. Export or save your original at the largest size you might ever need. You can always reduce; you cannot recover detail that was never there.
Resize to the target pixel dimensions. Match the image width to the widest it will ever appear on screen. Use the table above as a reference point.
Choose the right format. Default to WebP. Use PNG only if you need transparency and WebP transparency is not supported by your platform. Use SVG for all vector artwork.
Compress the file. Tools such as Squoosh (free, browser-based), ImageOptim (Mac), or ShortPixel (WordPress plugin) apply lossy or lossless compression. For most photographs, a quality setting of 75–85% in WebP produces files under 200 KB that look clean at normal viewing distances.
Strip unnecessary metadata. DPI tags, GPS data, camera model information — none of this benefits your web visitors. Most compression tools remove it automatically.
Check the output. View the compressed image at actual display size in a browser. If it looks sharp, it is sharp.
Implement srcset for retina support. Provide a 2x version for retina screens. Your CMS may handle this automatically; if not, add srcset attributes to your HTML image tags manually.
Use lazy loading. Add loading="lazy" to image tags that appear below the fold. This tells the browser not to load them until the user scrolls near them, reducing initial page weight.
What are the common mistakes to avoid?
Uploading images straight from a camera or phone. A modern smartphone photograph can be 4,000 pixels wide and 6–8 MB in file size. That file has no place on a web page without resizing and compression first.
Relying on the CMS to resize. Many content management systems will resize images on upload, but they do not always compress aggressively. The result is a correctly-dimensioned image that is still three times heavier than it needs to be.
Setting DPI to 72 and assuming the job is done. Changing only the DPI tag in Photoshop while leaving pixel dimensions and compression unchanged accomplishes nothing for web performance. If the file is still 2 MB, it is still 2 MB.
Using PNG for photographs. PNG is a lossless format, which means photographs saved as PNG files are far larger than the same image saved as WebP or JPEG. Reserve PNG for images that require a transparent background.
Ignoring mobile. A 2,560-pixel-wide image served to a mobile phone with a 390-pixel-wide screen is downloading roughly 40 times more pixel data than it needs for that display. Responsive images via srcset and sizes attributes address this.
Good image practice is part of a broader technical foundation. If you want a deeper look at how site performance feeds into search visibility, Revolve's SEO agency work covers the technical layer alongside content and authority.
When should you prioritise image quality over file size?
Most of the time, a well-compressed image at the right dimensions is indistinguishable from an uncompressed one at normal screen viewing distances. But there are situations where quality justifiably takes precedence.
Product photography in e-commerce, where a buyer is zooming into fine details of fabric texture or jewellery, warrants larger, sharper images. Medical or architectural imagery where accuracy matters professionally may need higher quality settings. In these cases, accept a larger file size but still apply format optimisation (WebP over JPEG) and use lazy loading to defer off-screen images.
The principle is proportionality: let the role the image plays on the page determine the quality level, not a blanket rule.
Frequently Asked Questions
What is the best DPI for website images? 72 PPI is the standard for conventional screens. For retina and high-density displays, 144 PPI (or double the pixel dimensions) is appropriate. In practice, DPI is metadata that browsers ignore — pixel dimensions and file size are what actually determine how an image looks and performs on the web.
Does changing DPI in Photoshop make web images smaller? Only if you also reduce the pixel dimensions. If you change the DPI tag from 300 to 72 in Photoshop without resampling (reducing pixel count), the file size barely changes and the image looks identical in a browser. The DPI tag is not what makes image files large — pixel dimensions and compression level are.
What is the ideal image size in KB for a website? Aim for under 200 KB for most images. Full-width hero images can go up to 400 KB if the format and compression are well-managed. Thumbnails and icons should comfortably sit under 50 KB. These are targets, not hard limits, but they represent the range where file size and quality are reasonably balanced for most web connections.
Should I use JPEG or WebP for website photos? WebP in most cases. It produces smaller files than JPEG at equivalent visual quality and is supported by all modern browsers. The main reason to keep JPEG is compatibility with older systems or platforms that do not yet support WebP. If your website builder or CMS converts uploads to WebP automatically, you may already be getting this benefit without realising it.
How many pixels wide should a website image be? For full-width images, 1,920 pixels wide is a practical standard for desktop screens, with a 2x version at 3,840 pixels for retina displays. For images in a content column, 1,200 pixels is usually enough. For thumbnails, 400–600 pixels. Matching the image width to the maximum width it will ever display at (in CSS pixels) is the cleanest approach.
Does image resolution affect SEO? Not directly — Google does not read DPI metadata. What affects SEO is page load speed, which is directly affected by image file size. Large, uncompressed images slow down Largest Contentful Paint (LCP), one of Google's Core Web Vitals signals, which can reduce search rankings. Resolution matters insofar as unnecessary pixel data increases file size.
Can I use the same image for both desktop and mobile? You can, but it is not efficient. An image sized for a 1,920-pixel desktop screen carries far more data than a mobile device needs. Using HTML srcset and sizes attributes lets you serve a smaller image to mobile devices automatically, reducing load time without any visible quality difference on the smaller screen.
Content prepared by the team at Revolve, a digital marketing agency based in Banbury, Oxfordshire, working with small and mid-sized UK businesses on search performance, paid media and content strategy.
Last updated: 9 October 2026
