Is it the "Natural" image sized that gets loaded from the server?

In the thumb image load depicted below, what size image is being loaded from the server, 289 x 162 or 750 x 422? On the actual page the thumb display is 289 x 162, but I suspect that the 750 x 422 image is being loaded and then resized to 289 x 162. Is that correct?

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
It is Always the "natural" size.  The server just sends the image file to the browser.  The browser resizes the image to fit the space on the page.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dr. KlahnPrincipal Software EngineerCommented:
Dave is correct.

As a side note, this is why some poorly written sites load so slowly.  A page author puts enormous high-resolution 2048x1536 images into the page, then calls for the browser to resample them down to 320x240.  This results in images that load only 2% as quickly as they would if they were properly scaled.
stevaAuthor Commented:
Yes, I was 99% certain that was the case but wanted to be 100%.  The "side note" you mentioned, Dr. Klahn, is what generated my question.   I was looking at a Squarespace site that was  taking 33 seconds to load 200 thumbs.  When I looked closer with Dev Tools (the image with my question) I saw that Squarespace seemed to be loading thumbs that were 6 times larger than they needed to be.  When you upload an image to  Squarespace, it creates 7 versions that it may use as it pleases later.  So in addition to the 750 version, there's a 500 and 300 version on the server. All the thumbs display on the page as 289 wide so the 300 version would work for all of them.  When you reduce the width and height by 300/750 = 0.4 the image size is reduced by  0.4 x 0.4 = .16.  and the time to load all the thumbs goes from 33 seconds to about 5 seconds.  Plus, the 300 image will resize to 289 quicker than a 750 image will, so we pick up more time there.  The question now for Squarespace is, why not load the 300 version?

Thanks for your answers.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.