Website image multiple sizes

Question

0.00/5 (No votes)

See more:

Just a bit confused about website images and what gets transferred over the internet.

Laugh all want; I am not a web developer so I don't know this stuff.

If website has an image that is originally 20,000 by 5,000 pixels but reduced by means of CSS to 200 by 50 which image is actually transferred over the internet? Is it the original rendered smaller client side or is the reduced server side and then transferred?

The reason I ask is because we have a large repository of high-res images which need to be displayed in 4 different sizes (search results, catalogue, product and extra large). These are all returned by an AJAX call and I need to know if it is better to generate all 4 versions of the same image on our server or just let the HTML/CSS do its thing.

Thanks

What I have tried:

On a web page I compared the image size by right clicking and looking at the properties and then saving it locally. Both come out with different dimensions!

Posted 18-Nov-16 4:48am

dnibbo

Updated 18-Nov-16 5:00am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

ZurdoDev · Accepted Answer · 2016-11-18T05:00:00

Solution 1

CSS is a client side process and therefore cannot affect what the server does. So, the entire image is sent to the client and then browser scales it up or down depending on what the html/css says to do.

If your original image is 200 pixels by 200 pixels, that entire picture is sent to the client. If the html says to display it 50 x 50, then it is scaled down but is still the original picture. If you right-clicked on the picture and opened in new tab you'd see the original picture.

Posted 18-Nov-16 5:00am

ZurdoDev

Comments

dnibbo 18-Nov-16 11:15am

Thank you that make perfect sense when you say it like that.

ZurdoDev 18-Nov-16 11:27am

You're welcome. There are tools that you can use to scale images live on the server. You'd have to google for them. I used ImageGlue.net years ago and made it so when users uploaded images, we then scaled them out to the different sizes we needed and stored them separately.

It all depends on what your needs are.

dnibbo 18-Nov-16 11:50am

Thanks, interesting looking bit of software.
I thought I would write my own server task to scan the folder for changes and generate the 3 different sizes I need. I can crop any whitespace at the same time also.

ZurdoDev 18-Nov-16 11:55am

Go for it. Sounds good.