Pixel ratio, in short: usually it means device pixel ratio (DPR), the number of physical screen pixels used for each CSS pixel. A standard screen is 1x, most laptops and phones are 2x or 3x. So an image shown 400 CSS pixels wide needs an 800 px file to look sharp at 2x. Pixel aspect ratio is different: the shape of each pixel.
More on this topic: Photo editing how-tos, every guide in one place.
“Pixel ratio” gets mixed up with aspect ratio all the time, and the three terms mean different things. This guide explains device pixel ratio, pixel aspect ratio and how both differ from an image's aspect ratio, then turns it into the practical answer sellers need: how wide to make product images for a website so they stay sharp on high-density screens without bloating the page. To check an image's ordinary aspect ratio, the free aspect ratio calculator reads it from any photo.
- Device pixel ratio: physical pixels ÷ CSS pixels. 1 on a classic 96 DPI display, 2 on HiDPI/Retina, often 3 on phones.
- Pixel aspect ratio: the shape of one pixel. Square (1:1) for photos and modern screens; non-square in some older video formats.
- Aspect ratio: the shape of the whole image, such as 1:1 or 16:9. Unrelated to DPR.
- For product images: export about 2× the displayed width; 3× rarely looks better and costs file size.
- Use srcset so each screen downloads the right file.
What is pixel ratio?
Pixel ratio most often means device pixel ratio: how many physical pixels a screen uses to draw one CSS pixel. Websites are laid out in CSS pixels, a unit that stays roughly the same visual size on every device. A high-density screen draws each CSS pixel with a 2×2 or 3×3 block of physical pixels, which is why text looks so crisp on a phone.
The second meaning is pixel aspect ratio, the width-to-height shape of each individual pixel, which matters mainly in video. Both are different from aspect ratio, which describes the whole image.
| Term | What it measures | Typical values | Where it matters |
|---|---|---|---|
| Device pixel ratio (DPR) | Physical screen pixels per CSS pixel | 1, 1.25, 1.5, 2, 3 | Web design, image sizes, canvas drawing |
| Pixel aspect ratio (PAR) | Shape of one pixel (width ÷ height) | 1.0 square; about 0.9 or 1.33 in some video | Video editing, older broadcast formats |
| Aspect ratio | Shape of the whole image | 1:1, 4:5, 16:9, 9:16 | Cropping for every platform |
What is device pixel ratio?
Device pixel ratio is the ratio of the screen's resolution in physical pixels to its resolution in CSS pixels. MDN describes a value of 1 as a classic 96 DPI display and 2 as the expected value for HiDPI/Retina displays, and notes that modern phones often report more than 2. In JavaScript you read it with window.devicePixelRatio, which returns a decimal number.
| DPR | What it looks like | Typical devices |
|---|---|---|
| 1 | One physical pixel per CSS pixel | Older or budget monitors, many office displays |
| 1.25–1.5 | Scaled displays | Many Windows laptops with display scaling turned on |
| 2 | 2×2 physical pixels per CSS pixel | Retina MacBooks and iPads, many phones |
| 3 | 3×3 physical pixels per CSS pixel | Many recent iPhones and Android phones |
The devicePixelRatio definition and values on MDN's Window.devicePixelRatio page were checked in October 2026. Marketplaces change their rules, so confirm the current requirements in your seller dashboard before you upload a large batch.
Two details trip people up. Browser zoom changes the value: zoom in and each CSS pixel gets bigger, so devicePixelRatio rises. Pinch-zooming on a phone does not change it. And the value isn't always a whole number, so 1.5 or 2.625 are normal readings.
Open your browser's developer console on any page and type window.devicePixelRatio. A reading of 2 means every 400-pixel-wide image on a page is drawn with 800 physical pixels, so a 400 px file gets stretched and looks soft.
What is pixel aspect ratio?
Pixel aspect ratio is the shape of a single pixel: 1:1 means square pixels, anything else means the pixels are stretched when displayed. Photos, phone videos, web images and modern screens all use square pixels, so for almost every seller PAR is simply 1 and can be ignored.
Non-square pixels come from older and broadcast video. Standard-definition DV and DVD store a 720×480 frame (a 3:2 grid) and stretch the pixels on playback to show 4:3 or 16:9, so their pixels are about 0.9 or 1.2 times as wide as they are tall, depending on the standard. HDV stores 1440×1080 and displays it at 16:9 (1920×1080) with pixels 1.33 times as wide as tall. The rule connecting them is:
- Display aspect ratio = storage aspect ratio × pixel aspect ratio.
- HDV example: (1440 ÷ 1080) × 1.33 = 1.78, which is 16:9.
If an old clip looks squashed or stretched in an editor, the PAR was read wrong. Video editors let you override it in the clip or sequence settings.
How is pixel ratio different from aspect ratio?
Aspect ratio describes the shape of the whole image; device pixel ratio describes the screen it's shown on. A 1080×1080 photo has a 1:1 aspect ratio on every screen. On a 1x screen at 1080 CSS pixels wide it's drawn one-to-one; on a 2x screen at that same CSS width, the browser needs 2160 physical pixels and upsizes the photo. Our aspect ratio guide covers image shapes in depth.
What size should product images be for high-DPR screens?
Make each image about twice the width it is displayed at, in CSS pixels. 2x covers Retina laptops and most phones well. At 3x the difference is hard to see in photos, and the file carries 2.25 times the pixels of the 2x version, so many sites stop at 2x for photos and keep 3x for logos and icons, ideally as SVG.
| Displayed width (CSS px) | File width at 1x | At 2x (recommended) | At 3x |
|---|---|---|---|
| 300 (grid thumbnail) | 300 | 600 | 900 |
| 400 (collection card) | 400 | 800 | 1200 |
| 600 (product image, desktop) | 600 | 1200 | 1800 |
| 800 (large product image) | 800 | 1600 | 2400 |
| 1200 (wide content image) | 1200 | 2400 | 3600 |
| 1440 (full-width hero) | 1440 | 2880 | 4320 |
To find the displayed width, right-click the image on your live store, choose Inspect, and read the rendered size in the developer tools. Note that product zoom is a separate need: Shopify recommends 2048×2048 for its zoom (see Shopify product image size), which already covers 2x for nearly any layout. Our website image sizes guide lists sizes for heroes, banners and blog images.
How do I serve the right image to each screen?
Use the srcset and sizes attributes on the image. You list several widths of the same picture, tell the browser how wide it will display, and the browser picks the smallest file that stays sharp for that screen's pixel ratio.
<img src="mug-800.jpg"
srcset="mug-400.jpg 400w, mug-800.jpg 800w, mug-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 400px"
width="400" height="400" alt="Blue ceramic mug">- Export the image at a few widths, for example 400, 800 and 1200 px.
- List them in
srcsetwith their widths (thewdescriptors). - Describe the display width in
sizes: here, full screen width on phones and 400 px otherwise. - Keep
widthandheightso the page doesn't jump while loading.
On a 2x laptop showing the image at 400 CSS px, the browser fetches the 800 px file; on a 3x phone showing it at 375 CSS px, it picks the 1200 px file; an old 1x monitor gets the 400 px file. Shopify, WordPress and most store builders generate srcset automatically from one large upload, so on those you mainly need to upload a big enough original.
Original photos too small for 2x screens? Upscale them 4× for 3 credits so a 600 px photo becomes 2400 px, enough for any product layout.
Upscale an image7 days free · 50 credits · No credit cardWill 2x images slow down my site?
Only if you skip compression. A 2x image has four times the pixels of a 1x one, but a well-compressed JPG or WebP at 1200 px is often only a few hundred kilobytes. Compress every export, and let srcset send smaller files to 1x screens. The free image compressor and the free marketplace image resizer run in your browser, and how to reduce image file size covers the settings.
Frequently asked questions
What does pixel ratio mean?
Usually device pixel ratio: the number of physical screen pixels per CSS pixel. 1 on standard screens, 2 on Retina/HiDPI screens and often 3 on phones.
What is a good device pixel ratio?
There's no good or bad value; it describes the screen. Higher values mean a denser screen that shows more detail, so images need more pixels to look sharp.
How do I find my device pixel ratio?
Open your browser's developer console and type window.devicePixelRatio. Browser zoom changes the reading, so check at 100% zoom.
What is pixel aspect ratio?
The shape of a single pixel. It's 1:1 (square) for photos and modern video; some older video formats use non-square pixels that are stretched on playback.
Is pixel ratio the same as aspect ratio?
No. Aspect ratio is the shape of the whole image, such as 16:9. Pixel ratio is about screen density or the shape of each pixel.
What size images do I need for Retina displays?
About twice the displayed width in CSS pixels. An image shown 600 px wide should be 1200 px wide.
Do I need 3x images?
Rarely for photos. 2x looks almost identical on 3x phones at a smaller file size. Use SVG for logos and icons so they're sharp at any ratio.
Does device pixel ratio affect marketplace images?
Indirectly. It's one reason Amazon, Etsy and Shopify ask for 1,000–2,048 px images even though thumbnails display much smaller.
Upscale small photos for high-density displays and create clean product images for your store and listings.
Start free trialSee pricing7 days free · 50 credits · No credit card. Trial images carry a small “Made with aiarter” mark; paid plans export clean files you can use commercially.
