Does the css applied to a picture reduce its file size?

Question

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?

Answer 1

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.