ItemlumeProduct images / PUBLISHING WORKFLOW
Why is my product photo sharp on one screen but soft on another?
Measure the displayed image slot and the screen’s pixel density before ordering a larger image. CSS width is not the same as file width. A high-density display may need more image pixels for the same apparent size, but more pixels cannot restore an absent detail or verify a product claim.
Keep the product and rendering conditions fixed
Start with one approved photo, the same variant and the same gallery view. Record browser zoom before comparing screens. Ask your theme maintainer for the rendered width in CSS pixels and the current devicePixelRatio. MDN describes this ratio as physical pixels relative to CSS pixels, and notes that page zoom can change it.
Do not compare a small thumbnail on one screen with an enlarged viewer on another. That changes the task and required detail. Keep the display slot, selected asset identity and intended inspection distance explicit in the report.
Calculate an inspection target
This fictional bottle image occupies a 480-CSS-pixel slot. At a measured density of 2, a rough one-image-pixel-per-display-pixel budget is 480 × 2 = 960 pixels across. If the loaded rendition is only 480 pixels across, the mismatch deserves inspection. This arithmetic is an estimate for that condition, not a promise of visible improvement or a universal export minimum.
| Same fictional slot | Estimated width budget | Question |
|---|---|---|
| 480 CSS pixels, density 1 | 480 image pixels | Is the approved detail already readable? |
| 480 CSS pixels, density 2 | 960 image pixels | Did the browser choose an adequate rendition? |
Check what was delivered before regenerating
Have the maintainer inspect the actual selected source, its file dimensions and the theme’s size hints. Compare that rendition with the approved master at the intended display size. If the master contains the detail but the store requests a smaller file, repair delivery. If the master lacks it, obtain better reference photography or a reviewed replacement.
Do not infer original file dimensions from a browser value without checking its meaning. Request the selected file’s verified dimensions. Compression, sharpening and fabricated lettering can also affect appearance; keep them fixed when testing density.
Choose a bounded asset budget
Set an approved rendition ladder for the actual gallery and enlargement uses, then compare visual detail and loading cost on representative screens. Stop increasing the budget when the relevant product detail is adequately shown; an oversized file is not automatically a better shopping experience.
Use the source pixel budget worksheet as a manual review record. Sample rows are fictional. It does not connect to, import into or modify an external store or production machine.
Itemlume’s available output options can supply candidate assets for review. This manual budget neither guarantees the returned file dimensions nor changes an external theme. Record measured slot width, density, selected file and the observed detail separately.
Sources and further reading
Sources for this page were checked on . Platform rules can change; verify the current source before publishing. Prompt examples and workflow recommendations are Itemlume editorial guidance, not independently measured results.
Frequently asked questions
Does every store need 4K product images?
No. Inspect actual display needs, approved detail and delivery cost.
Can I multiply CSS width by density as a starting point?
Yes, as a condition-specific estimate; verify the delivered file and visible result.
Will upscaling recover a genuine missing label?
It cannot establish missing product evidence. Use a trustworthy detailed source.
BUILD FROM A PRODUCT YOU KNOW
Put this workflow into practice with your own product.
Explore the relevant tool first. AI copy and concept planning are free after sign-in. Image and video generation require available credits and the applicable account access.
Open Product images Check pricing and credits