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?
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 AmpProject.org 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.
Edit:
Corrected over enthusiastic iPad type ahead feature
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.
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?
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.
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.
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 )
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.
