Geek Answers Handbook

Is css used for image to reduce file size?

I have never thought about this before, but I'm really interested. 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 image has a size of 1.5 MB, so after applying css its visual size really decreases. I wonder if the user's browser can download a full-size image in this case, or will it only load a small one?

+8
html css
source share
5 answers

CSS is applied by a web browser of a user who runs on a local PC. After the web browser loads the image, it only then applies CSS scaling to render 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.

To make the image smaller before sending it, you can use a server language such as PHP and create a thumbnail image that matches the size of the final display. This will not only speed up the loading of your page, but also reduce the bandwidth requirements.

+9
source share

CSS scaling occurs when the browser displays the page AFTER it has loaded the full image, so no.

+2
source share

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

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

+1
source share

The fact that you resize the image (reduce it) does not affect the physical size of the image. Otherwise, everyone will use CSS size as a method of resizing the file.

0
source share

No, CSS only scales your image down (or up), but the file size never changes.

0
source share

More articles:


All Articles