The Best Way To Export From Lightroom For Web
If you had to choose between reducing the file size of a photo to the point where it did not look like your original. Or displaying a photo on your website that is large and beautiful, but will slow down your website. Which would you choose?
Hopefully, you said neither, and prefer a solid method for obtaining a combination of both.
I have done a lot of testing of image quality for delivering to clients as well as uploading to a website. And I don’t mean Facebook either. I mean your photography website.
The more you compress your photos during output of Lightroom, the more you will notice the shifting of things. For example, highlights or skin-tones, shadows and pixelation and noise. If you’re like me, then you won’t put up with that. You want the best output with a respectable file size.
Typically you want a file size no more than 256kb when uploading to your website. But that is hard to obtain. And that is why I recommend having a mixture of output configurations just in case some images are larger in file size than others.
When a photographer has a slower website without images showing, I recommend exporting with a smaller pixel length (at the longest side). Maybe 1080px at most. But if the website is fast already, then there you could potentially export up to 2048px at the longest length, with no problems.
But bigger dimensions do come with the trade-off of a bigger file size.
I recommend doing this test with your photos as well, but here is a way to test what is best for you.
- Create five virtual copies of one of your RAW photos.
- Title the virtual copies as Quality 100, Quality 80, Quality 60, Limit File Size 256 and JPEGmini.
- Click on the first VC and configure the export with renaming to the image title, resize to 1600px at the longest length, and keep metadata but turn off output sharpening.
- Now export Quality 100 with the compression quality set to 100.
- Export Quality 80 with the compression quality set to 80
- Export Quality 60 with the compression quality set to 60
- Export Limit File Size 256 with the file size limit to 256kb.
- Export JPEGmini with the image compression quality set to 100 and the JPEGmini module added.
What you will find by doing this test is the mix of subtle and major differences between each exported file. The file sizes will vary dramatically, pixelation will be visible on the smaller file sizes, and colors, highlights, and shadows shift.
What you will also notice is that the JPEGmini export has a smaller file size than the Quality 100, and looks equal.
Here were my results:
- Quality 100: 1.1 MB
- Quality 80: 496 KB
- Quality 60: 229 KB
- Limit File Size 256: 194 KB
- JPEGmini: 319 KB
As you can see, the JPEGmini export sits between the file size of the Quality 80 and Quality 60. And yet, the actual look of the image is like the original. No changing of colors or anything else.
I also found that the Limit File Size 256 version would be unusable in my portfolio. So although it would save a lot of space, I was unhappy with the quality of the photo.
The fine line
Like so much in photography and business, there is a fine line between site speed, image quality, and acceptance.
And it’s a matter of trial and error, and a lot of testing, to see what works best for you.
For me, JPEGmini is the winner and will remain in my Lightroom workflow until the end of time.
If you would like to see, my preferred presets for exporting from Lightroom, head over to my store and download the Export for Website pack free.
Scott Wyden Kivowitz is the Community & Blog Wrangler at Imagely, father, photographer blogger, and educator. Scott is also the author of multiple photography ebooks including the topics of long exposures, panoramics, and street photography. Get his free Lightroom video series, Fundamentally Lightroom, to help you simplify your Lightroom workflow, and also receive his free photography guides collection as a thank you.
Personally I find the sweet spot is Jpeg 80% and Jpegmini… That way your file size is smaller again with very little (if any) difference from the 100% version
Just remember that by doing that you’re degrading your image quality before JPEGMini has a chance to touch it. And Lightroom doesn’t care about how your image looks. It only cares to add the blanket compression. But if that’s working for you, then awesome!
As I started with JPEGmini, I asked JPEGmini via Twitter, how to export for best results, and the answer was: set your JPEG slider to at least 80 during export.
Another question: Why did you do this: “…but turn off output sharpening”?
You can totally start at 80 if you want. But that means you’re compressing an image already highly compressed by LR or PS.
I leave OS off because it should only be used as needed, in my opinion.
I made a test:
I saved one image twice. One with 85 % and one with 100 %. Resolution was 1632×1088 (my usual resolution for the web).
After using JPEGmini the 85 % picture was 791 KB and the 100 % picture was 1,38 MB.
And there was approximately no visible difference.
I think, I can live with this difference when it halve the download time.
You are using Lightroom,right? Try this in Photoshop instead. I abandoned Lightroom precisely because it does not fit in the web work flow at all (nor in the Pre-press work flow for print either).
So, start with picture you like at whatever size and display quality you want it to be – usually that will be W-A-Y too big for web. Then go directly to Photoshop, not Lightroom, and down sample the file to the pixel size close to its desktop browser size in pixels – there are no compression choices for this.
Do NOT re-sample it again as that will screw it up. When saving that file as JPG, you can choose best quality “12” which is least compressing. (Aside: save all images as PSD files before any creation of JPGs or any compression at all – Photoshop’s native file format which is NOT compressed at all – becomes your baseline file format as it is uncompressed and then save as JPG’s for web at pixel size you need as end result for web display.)
Just go from best/high quality to pixel size needed using Photoshop and I think you will find the end result close to being just fine. When down sampling to pixel size needed (not less than that, just that – most web gallery/slider modules work well with 700 to 900 pixel width-of-image as those modules will create a thumbnail for you) there is no need to fuss with file sizes beyond that point as it will screw up appearances and deliver awful images. If you think providing a very high image size to web somehow makes for better image quality… it does not… then what happens is the receiving browser uses its own re-sampling algorithms to fit a w-a-y too big image to the size specified by webpage AND that browser algorithm is NOT Photoshop’s at all and THAT will screw up end-result. So, you use Photoshop to size the image to webpage pixel size in the first place and then that ignores any interference with browser re-sampling at all and that is what you want..
THEN, if you want, (in WordPress) use an image “smushing” plugin like “WP Smush” and it will reduce the image size usually by around 40% or so and look at both: smushed and not smushed and see if there is enough of a difference to fuss over or not. If you don’t like the smushing, then don’t use it.
As for what happens in mobile-responsiveness… well, forget it. AND, aim for liking your final product for web display WITHOUT comparing it to the original as you will never be happy. Just aim for best looking end result with no comparison to original.
I can understand Lightroom not fitting into your workflow, but it does for thousands of others. I recommend not using a plugin like WP Smugh as it does not care about the actual quality of your image. It’s just going to use a blanket compression just like other compression software and plugins do. And just like Lightroom and Photoshop. JPEGMini is the only one that actually cares how your image looks when compressed.
Thank you Scott for the pre-sets too!!!!
A very Exclusive And fantastic post it is ,really it is ..
Comments are closed.