Using CSS to set an image size

There is a lot of missinformation, not correct information in this thread unfortnatly.

Some out dated, some too new.

Picture is great if you can provide the varied assets and not using a CMS or application sollution as most still do not support that. And there are a number of compatbility reasons why as well. You will not see it used on the web as a whole as much as you may think considering how long it has been around. No point listing all the reasons why but that is how things are.

If you are using a CMS or web application everything handles images differently. A system like Umbraco returns an object. You upload an image and to render you do not just get the URL, you get an object with data. Of which, as people like Nancy has mentioned you get abiltiies like multi image creation, thumbnails etc. The way Umbraco does it with amazing client side UX for focus point, scaling and editing is second to none for example. Adobe's now EOL Business Catalyst like others offered parameter otpions at the end of the URL to system scale the image as well as compression option for quality.
This is actually why picture is not adopted because your serving more images and HTML/client side VS what you can do server side - you want server side for perfomance.
Any comment in terms of server side being bad here in 2022 is actually not true.

Then considering mobile and retinna displays but not only that, scaling of a browser. A desktop view on an imac vs a laptop or notebook and tablet rendering as a desktop IS NOT the same width, height and pixel density so images need to scale and look good regardless. Many cases an image small on desktop may be larger in width of a mobile with the responsive aspect.

So again, like some have said sticking with <img> utilising what ever CMS or server tools is still the most common and constant option and as shown can still be the better performing.

When it comes to size and scale and also considering SEO and Social media and more putting the width and height on the img tag should be done. Then any corrisponding CSS style in your css can be applied.

In most cases for a good true modern scalable image if its a photo in content for example then your CSS is actuall more like....

img{
max-width:500px;

width:100%;

height:auto;
}

It may be max-width is 100vw.
You may want to scale based on the height of the viewable window so
width:100vh;
height:auto;

OR after all the posts what your after is the basic

header img{
width:50px;
height:50px;
}
That does not change.
You should really do an image 100px by 100px so when it is compressed like this it looks better for responsive.

IF the image is an icon it SHOULD NOT be an image.
SVG or a font icon for example is the better solution in that regard as well.

Logos for example I never do as an image. Text is actual text or an SVG as more often than not elements change based on the mobile responsive, there is animation going on etc.

The correct way to do this is with the <picture> element and SRC SET attributes.   A different sized image is served to different sized devices thus eliminating excessive bandwidth consumption to small devices.  Some manual coding and a set of different sized images required. 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture