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

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.

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.

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