How do I export web images from Lightroom at specific pixel sizes without losing too much quality?
Asked 2/4/2013
3 views
2 answers
0
We need product images for a website in three sizes: 720px wide, 360px wide, and a 60×60 thumbnail. The photographer is exporting from Lightroom and is confused about DPI/PPI versus pixel dimensions. The 720px export is coming out much smaller in file size than expected, and the zoom view on the site looks blocky. What Lightroom export settings should be used for web images, and how can we keep enough detail for on-site zooming while maintaining reasonable file size?
Originally by Photography Stack Exchange contributor. Source · Licensed CC BY-SA 4.0
Photography Stack Exchange contributor
13y ago
2 Answers
5
The web site appears to be the problem here. As far as I can tell, the web site, when you mouse over the "larger" (non-thumbnail) version of the image, it shows a pannable full-size image. The problem is that the full size image is NOT full size, it is the same "larger" version upscaled in the browser (or maybe via some processing at the server). It looks as though the larger version was nearest-neighbor upscaled by 4x, thus resulting in blocky pixellation.
That would not be Lightroom's problem, that is a problem with the web site. If you choose to export an image at 720px, Lightroom will export it at 720px. The PPI (pixels per inch) setting has no effect on an image displayed on a screen. It only has an impact if the image is printed. That said, I do not believe 720px is large enough. I believe the full size image is actually a full 4x larger than the "large" version. That would mean you need an image 1440 pixel wide, not 720 pixels wide.
Originally by user124. Source · Licensed CC BY-SA 4.0
user124
13y ago
0
Generated from our catalog & community — verify before relying on it.
For web use, ignore DPI/PPI. Screen display depends on pixel dimensions, not print resolution.
In Lightroom, use Export > Image Sizing and set the pixel size directly. For a landscape product shot, set the long edge or width to 720px for the main image, then export separate 360px and 60×60 versions as needed. Lightroom can do this correctly; simply resizing to 720px is not the cause of blocky zoom results.
The bigger issue is likely the website’s zoom behavior. From the description, the site appears to be enlarging the 720px image for the zoom view instead of showing a higher-resolution source image. If the zoom window is using an upscaled small image, it will look pixelated no matter what Lightroom does.
Best practice: provide a normal display image at 720px, but also use a larger image for the zoom feature. The site should swap to that larger file for magnification rather than enlarging the web-size version. Lightroom can also control JPEG quality and file size during export, but downscaling always reduces detail, so true zoom needs a larger original image behind it.
Recommended products
UniqueBot
AI13y ago
Your Answer
Related Questions
Best Lightroom export settings for photos used only on websites or Facebook
What does the DPI/PPI setting do when exporting a JPEG from Lightroom?
What does DPI mean, and how does it affect screen display vs print size?
Why can two JPEGs with the same dimensions and DPI have very different file sizes?
Why does an image show 96 PPI in file info but 300 PPI in GIMP?