Reduce Thumbnail Filesize (but not quality)

Texas_Toast

macrumors 6502a
Original poster
Feb 6, 2016
933
75
Texas
Is there a way using Lightroom, to take a thumbnail for a photo gallery (e.g. jpeg, png) and reduce the filesize from like 2MB down to 150KB but not degrade the photo quality?

Thanks.
 

mollyc

macrumors 68020
Aug 18, 2016
2,447
11,035
Anything that reduces file size is going to reduce quality. You can use the Export function to specifiy a specific px size and kb size.
 

Texas_Toast

macrumors 6502a
Original poster
Feb 6, 2016
933
75
Texas
Anything that reduces file size is going to reduce quality. You can use the Export function to specifiy a specific px size and kb size.
I thought that Photoshop has a way to "optimize" photos for the web?

How effective is that versus simply "resizing" a photo?

And does Lightroom offer anything more sophisticated like that?
 

mollyc

macrumors 68020
Aug 18, 2016
2,447
11,035
Yes but they are all reducing pixel dimensions. Once you discard those pixels and down sample the information is gone. Quality is therefore reduced.

I think the save functions between the two programs are largely similar.
 

Texas_Toast

macrumors 6502a
Original poster
Feb 6, 2016
933
75
Texas
Yes but they are all reducing pixel dimensions. Once you discard those pixels and down sample the information is gone. Quality is therefore reduced.

I think the save functions between the two programs are largely similar.
Right, but I was under the impression that Photoshop reduced pixels AND optimized things for minimum file-size and maximum quality.

Btw, how big (file-size) is acceptable for a thumbnail that is say 200px x 200x?
 

r.harris1

macrumors 6502a
Feb 20, 2012
813
826
Denver, Colorado, USA
I'd recommend you export a JPG from photoshop at 200x200, highest quality. That'd tell you a ball-park file size, if you find that to be useful info. If a particular site is picky on file size, I adjust until I get to the required size. Most people don't go as far as creating their own thumbnails though as most hosting sites handle that for you already. You'd just upload your image of some spec, like 1600px width or some such, and the hosting service (like smugmug) just bangs out any thumbnails needed.

I exported one of my images at 200x200, looks to be 56k or so in size, but that's still dependent on a variety of things. And while photoshop or any exporting application will try and optimize for quality, like @mollyc says, throwing away pixels is throwing away pixels. Going from an image that's say 10320px x7752px out of a camera to 200/200 is going to be of extremely low quality regardless of optimizations. Obviously, you can't reverse the process very well either.
 
  • Like
Reactions: mollyc

Texas_Toast

macrumors 6502a
Original poster
Feb 6, 2016
933
75
Texas
I'd recommend you export a JPG from photoshop at 200x200, highest quality. That'd tell you a ball-park file size, if you find that to be useful info.
Good point, but I haven't used Photoshop since like 2000 and it has a steep learning curve - plus it costs lots of money - so I was trying to avoid that for "Phase 1".


If a particular site is picky on file size, I adjust until I get to the required size. Most people don't go as far as creating their own thumbnails though as most hosting sites handle that for you already. You'd just upload your image of some spec, like 1600px width or some such, and the hosting service (like smugmug) just bangs out any thumbnails needed.
My question pertains to a photo gallery website that I build from scratch. (I actually know how to resize images n PHP, but that is way too much work for my needs.)


I exported one of my images at 200x200, looks to be 56k or so in size, but that's still dependent on a variety of things. And while photoshop or any exporting application will try and optimize for quality, like @mollyc says, throwing away pixels is throwing away pixels. Going from an image that's say 10320px x7752px out of a camera to 200/200 is going to be of extremely low quality regardless of optimizations. Obviously, you can't reverse the process very well either.
True, but I was under the impression that maybe Photoshop's optimazation algorthim was superior to others.

You make it sounds like not really.
 

r.harris1

macrumors 6502a
Feb 20, 2012
813
826
Denver, Colorado, USA
Good point, but I haven't used Photoshop since like 2000 and it has a steep learning curve - plus it costs lots of money - so I was trying to avoid that for "Phase 1".
Replace “Photoshop” with whatever tool at whatever price point you want. Photos will do it. The file size should be in the same ball park.

My question pertains to a photo gallery website that I build from scratch. (I actually know how to resize images n PHP, but that is way too much work for my needs.)
Sure. Pixels are pixels. When people upload full sized images to prodibi or scaled images to Flickr or SmugMug (or Facebook, Instagram or...), the websites store the uploaded image and generate a thumbnail. When you click on the thumbnail they display the stored full image. The thumbnail itself doesn’t get scaled back to a full sized image (But maybe I don’t understand your question fully).

True, but I was under the impression that maybe Photoshop's optimazation algorthim was superior to others.

You make it sounds like not really.
I’ve not ever been under that impression nor have I noticed it in practice.
 
Last edited:

Texas_Toast

macrumors 6502a
Original poster
Feb 6, 2016
933
75
Texas
Sure. Pixels are pixels. When people upload full sized images to prodibi or scaled images to Flickr or SmugMug (or Facebook, Instagram or...), the websites store the uploaded image and generate a thumbnail. When you click on the thumbnail they display the stored full image. The thumbnail itself doesn’t get scaled back to a full sized image (But maybe I don’t understand your question fully).
I was just saying that I am not using some service like Flickr - that my website is hand-coded.

And that while I do know how to code in PHP a function that takes a full-sized image and shrinks it, that for this basic site I'm not doing that.

Thus, I was asking for the best way to shrink an image of say 3000px by 3000px down to 180pxby 180px and make that thumbnail look the best but with the smallest filesize.
 

mollyc

macrumors 68020
Aug 18, 2016
2,447
11,035
I would set an export preset in LR or an action in PS and just export and be done with it. Honestly, no one is expecting full quality from a thumbnail that small. I think you are worrying too much about it. 🙂
 
  • Like
Reactions: r.harris1

r.harris1

macrumors 6502a
Feb 20, 2012
813
826
Denver, Colorado, USA
I was just saying that I am not using some service like Flickr - that my website is hand-coded.

And that while I do know how to code in PHP a function that takes a full-sized image and shrinks it, that for this basic site I'm not doing that.

Thus, I was asking for the best way to shrink an image of say 3000px by 3000px down to 180pxby 180px and make that thumbnail look the best but with the smallest filesize.
Is your goal to have thumbnails created before they get to your site or after? And is the end result to only display 180px by 180px thumbnails?
 

Texas_Toast

macrumors 6502a
Original poster
Feb 6, 2016
933
75
Texas
Is your goal to have thumbnails created before they get to your site or after? And is the end result to only display 180px by 180px thumbnails?
That is what I was trying to say...

For this simple photo site I created to share pictures from work events, I am taking the raw photos, and creating a thumbnail and medium sized photo which get displayed on the site. So I am doing things manually. (For another site that I created but haven't finished yet, there I let people upload a profile photo, and I use PHP to create a thumbnail.)

And the spirit of my OP is that when I load this new website, things like the menu page which contains thumbnails to about 15 photo galleries loads slow - or more specifically, you can see the thumbnails get painted on your screen from top to bottom which looks tacky.

So I am trying to learn how to make the file sizes for my thumbnails - that I manually create - small enough so the page and images load much faster, but where the quality still looks good.

In the end, I am coming to see that there is a lot of plumbing behind most modern websites to make the pages load quick and so you don't get an amateur look like I am seeing.

Does that make more sense?
 

r.harris1

macrumors 6502a
Feb 20, 2012
813
826
Denver, Colorado, USA
Yes, this makes sense. There’s definitely a lot of plumbing behind modern websites and around image manipulation, caching strategies, multiple threads, etc. A lot of modern-ish server and client-side frameworks like Node.js, React, Angular have some plumbing built in that may help in these areas, but those are beasts in and of themselves.
 

dwig

macrumors 6502a
Jan 4, 2015
680
261
Key West FL
...
True, but I was under the impression that maybe Photoshop's optimazation algorthim was superior to others.
You make it sounds like not really.
Ps does have an option that will create a more compact JPEG or PNG than its normal "Save as..." option. It is currently found hidden in the File>Export submenu and its name has varied a bit through the various versions of PS generally being "Save for Web", "Save for Web & Devices", or similar.

Ps normally save a bunch of "crud" in JPEGs and PNGs when you do a simple save. The crud is a mix of the normal standard metadata and a bunch of Ps proprietary ancillary data (guides, notes on compression settings, ...) and adds bulk to a file. This crud is not needed in most web useage. Using the "Save for Web..." option omits the Ps proprietary ancillary data (data only used by Ps) and has options to reduce the standard metadata and any ICM/ICC profile from being embedded in the output file. This can significantly reduce the file size of small JPEGs.

The resampling that can be done in the Save for Web module is no better than Ps's other resampling options. Any resampling to smaller pixel sizes will lower quality as will any increase in the level of JPEG compression. PNG uses lossless compression and can sometimes yield higher quality output as a result, though again any reduction in the pixel size will lower quality.
 
  • Like
Reactions: Texas_Toast

Texas_Toast

macrumors 6502a
Original poster
Feb 6, 2016
933
75
Texas
When I used to be big into photography I used Nikon's View to view and do minor editing. It's been so long ago that I forgot about it. Downloaded the latest version and it's a dream compare to Lightroom and even Photoshop. It is designed exactly what a photographer with millions of photos would want, and it's free. But the best feature is that I can tweak settings and then it gives an estimate of the file size, so if my target is say a 50KB thumbnail then it helps me get there versus too much trial and error with Lightroom and other options.

I would like to learn the latest version of Photoshop though.
 
Last edited:
  • Like
Reactions: r.harris1