My product photos look fine in Photoshop but terrible on the page, what am I doing wrong?

Usually the problem is not the photo itself, but how it’s being exported, compressed, resized, or displayed on the web page.

Here are the most common causes:

1) Wrong color profile

Photoshop may be showing the image in a wide-gamut or calibrated workflow, but browsers expect sRGB.

• If you export in Adobe RGB / ProPhoto, colors can look dull or weird online.
• Fix: Convert to sRGB before exporting.

2) Too much compression

If the page uses aggressive JPEG compression, the image can look:

• blurry
• blocky
• muddy around edges
• with weird color smearing

Fix:

• Use a better export quality
• Try WebP if supported
• Avoid overly small file sizes for product shots

3) Image is being resized badly

If the site displays a photo at a different size than the file was prepared for:

• Upscaling can make it soft or pixelated
• Downscaling in the browser can look worse than a properly sized export

Fix:

• Export close to the actual display size
• Provide 2x resolution for retina displays if needed

4) Sharpening looks different on the web

Photoshop’s preview can be misleading, and an image that seems crisp there may lose sharpness after export.

• If the image is too soft, you may need output sharpening.
• If it’s over-sharpened, it can look harsh online.

5) Browser and CSS are affecting appearance

The page itself can change how the image looks:

• CSS filters
• opacity
• overlay colors
• background contrast
• lazy-loading placeholders
• display on a different background than Photoshop

6) Monitor calibration mismatch

If your monitor is bright or uncalibrated, Photoshop may look “right” to you, but the web version may seem off on other devices too.

• Best practice: calibrate your monitor
• Check the image on multiple devices

7) JPEG artifacts or poor export settings

If you exported with the wrong settings:

• wrong subsampling
• progressive setting issues
• too low quality
• embedded profile stripped unexpectedly

What to check first

If you want the fastest diagnosis, check these in order:

1. Export in sRGB
2. Re-export at higher quality
3. Make sure the image dimensions match the site’s display size
4. Test on another device/browser
5. Inspect the page CSS and compression pipeline

If you want, I can help you troubleshoot it step by step.
If you paste:

• the export settings you’re using
• the image dimensions
• how it looks wrong on the page
• the site platform/CMS

…I can usually pinpoint the issue pretty quickly.