10

I have never thought of this before, but am really curious. So here is the html:

<img src="/employees/img/uploads/users/2013-09-12-115644edif.jpg" alt="Employee" class="user_img" />

and here is the css:

.user_img{
width: auto;
max-height: 200px;}

The original picture is like 1.5 MB in size, so after the css is applied, the visual size of it really decreases. What I wonder is if user's browser needs to load the full sized picture in this case, or will it only load the small one?

1
  • The answer give you an account for the importance of realizing server-client model in web development i.e client-side and server-side
    – SaidbakR
    Commented Mar 26, 2014 at 14:45

5 Answers 5

10

CSS is applied by the user's web browser, which is running on their local PC. After the web browser downloads the image, it only then applies the CSS scaling to display it smaller than the actual image size.

As a result, the answer is no. The user must download the entire file, even if CSS is used to resize it smaller.

To make the image smaller before sending, you can use a server-side language such as PHP, and generate a thumbnail of the image that is the appropriate final display size. This not only will make your page load faster, but will reduce bandwidth requirements as well.

2

The scaling via CSS happens when the browser is rendering the page, AFTER it has downloaded the full image, so no.

1

HTML, CSS and JavaScript are client-side languages. Everything is transfered to the client and then the transformations are made.

If you want to reduce the size of the image before sending it to the client, you must use a server-side language such as PHP.

0

The fact that you resize the picture (scale it down) doesn't affect the image 'physical' size. Otherwise everyone would use css sizing as 'file' resizing technique.

0

No, CSS only scales your picture down(or up), but size of file is never changed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.