Better load experience on photos

Am in the process of uploading code and photos to my webserver…

During this, I checked out my photo galleries page, which is a simple HTML page with about 15 thumbnails, and which where each one represents a gallery (e.g. Holiday Party).

As the page loaded, the thumbnails slowly appeared from top-to-bottom (??) like someone was pulling down a window shade.

Not so desirable.

I can’t recall how things look when I go to a professional website, but I don’t ever recall thinking, “Wow! Look at the photos load on the webpage before my eyes?!”

What can I do to make things load in a more subtle and appealing way?

Most of my thumbnails are 150-300K.

Is this an issue with my HTML/CSS?

With the thumbnail photos?

The webserver?


What are the thumbnail dimensions? File sizes I think should be a tenth off their current size.

I had similar problems with loading thumbnails quite some time ago and further investigation solved the problem. Hundreds of thumbnails are available on a single page and the JavaScript handles displaying the first dozen or so and loading the others in the background, ready for when the user scrolls.


Corrected over enthusiastic iPad type ahead feature :slight_smile:

Also load video:

Height 180px by whatever width. (Assume a near square.)

My thumbnails currently range from 100KB to 2.1MB.

The problem isn’t the physical size as much as the filesize.

Like 20 years ago when I had a copy of Photoshop, there was a way to optimize photos whch somehow made the filesizes substantially smaller without losing quality.

Relearning Photoshop could take me ages, so is there an intermediate way? (I do have Lightroom on my computer.)

So must I use something fancy like a “framework” and Javascript to get a decent loading webpage?

With only fifteen thumbnails it would be well worth trying to first reduce the file size.

There are many free online sites to reduce file size and some even have a multiple drag and drop facility that produces a downloadable zip file of the results!

Looking forward to the results of your searches and experimentation.

I downloaded Nikon’s ViewNXi for free and it turns out it has more controls in it than Lightroom!

Best of all, it lets you resize images and shows you the updated filesize. :+1:

On average, how large of a file-size should a 200x200 thumbnail be?

Also, what about a detailed photo that is 800px long side?

1 Like

Something like 20-30k.

Something like 80-150k

Wait. The thumbnail and the actual image have to be a different file?
What’s the difference of having an actual thumbnail and an image that only css styled like a thumbnail? Which one does affect the performance of the site?

That is generally the way it is done, yes.

I have a site with a photo gallery on one page. It contains 40 thumbnails, each around 15kb in size. That’s around 600kb to render the entire gallery. Each of those thumbnails links to a large image which is between 350-400kb in size. 40 images at 350kb would be 14,000kb. You really don’t want to be making your visitors download all that data, when they maybe only want to view one or two of the images at full size.


Ohh, noted. Thanks! :smiley:

1 Like

Wow. That is small.

Including real estate for my mast, an 800px in height basically takes up the whole screen on my laptop.

I would expect a photo that look good, if not great, and which fills up at least a laptop screen if not a monitor would need to be at least 400KB.

Only 150K?

What are the dimensions of your thubnails?

What is the subject of your thumbnails? People? Landscapes? Other?

And do your thumbnails look decent?

What are the dimensions of those larger images?

Again, how do those images look? Is that enough data to make them do justice to the photographer and/or subject?

So when does the size of any web page become too much?

You are saying a 14MB web page would be a burden… What about a 1MB page? 2MB? 5MB?

And to your last line, is that where @John_Betong’s advice about things like AMP comes in?

The initial question referenced “800px on the long side”, so I assumed something like 800x600, and yes 150kb or so. I’ve done photography professionally for years, and I do know how to handle photos. Is it 150kb every time, no, but around there is a reasonable average.

Here’s a random sample, the image is 1600x1001px, and 135kb -


Hi there UpstateLeafPeeper,

it may be time to check out the new kid on the block



Guess it depends on orientation. When I set Lightroom to “800px long-side” was planing for portrait photos and thinking that was about the most height-wise that would still fit in a laptop monitor.

See this makes me wonder if I need something like Photoshop which maybe has some fancy algorithm that can keep a photo at normal dimensions (e.g. 800 x 600) and yet make it pretty small.

For the medium-sized photos that I created in Lightroom and which are intended to be most of a web page, I think those photos average 300-400K. (Although, I noticed more issues with trying to load my menu page with 15 thumbnails on it than the page which shows a single medium-sized photo.)

Did you take the picture you linked to?

Fascinating. I thnk there is something I am missing, because whatever I am doing is making the photos much larger, although they are smaller than the originals which were like 3-4MB.

Very cool photo! (Sorta hard to judge it on sharpness, though, since you used a large aperture…)

Yes, that is my photo. Unfortunately I don’t use Lightroom, I use Photoshop, so I can’t tell you what the magic sequence might be for lightroom. But if you’d like to post one of these photos you’re dealing with, I’d be happy to take a look and see whether there’s some obvious issue (or whether I’m full of it :slight_smile: )

Are you aware of ImageMagick for resizing photos?

Numerous quality parameters and batch sizing examples available by searching…

I use that on my never-to-be-finished business website. (Never got a chance to see if it reduces photos to an acceptable file-size while not losing quality.)

For this photo site, using ImageMagick isn’t worth it - too much effort.


Well, the photos I have all have people from work in them, so that’s not a good idea. Maybe I can find another photo.

In general, if you are taking a large original photo, and using Photoshop to reduce it to say 800 X 600 and only 150KB, what obviously things do you do to retain image quality?

Or don’t you have to do anything to get that end result.

It seems to me that if I did that in macOS Preview or Lightroom I would get a pixelated photo.

By the way, that is another question that I have that may be skewing things…

Why does it seem like photos don’t look so great on my Retina MacBook Pro? One reason I went with such large file sizes, is because the viewing quality really degrades the moment I start reducing a 3-4MB original.

Could part of the issue be my monitor?