(This a basically the same as Pete's answer, just written from a different angle.)
Because CSS "pixels" aren't really pixels anymore (and haven't been for quite a while).
So what is a pixel, anyway?
Wikipedia starts off with the following definition:
In digital imaging, a pixel […] is the smallest addressable element in a raster image, or the smallest addressable element in a dot matrix display device. In most digital display devices, pixels are the smallest element that can be manipulated through software.
OK, that sounds reasonable enough: your images are stored as a grid of pixels, and your screen displays a grid of pixels, and if you want your image to look sharp then you need to draw it so that one pixel in the image matches one pixel on your screen. Right?
Well, that was right, until about the year 2010. For about the preceding decade, since the popularization of 24-bit true color super-VGA displays (and also, coincidentally, CSS and modern web design) around the turn of the millennium, computer display technology had kind of stagnated, with the pixel density of most consumer screens staying pretty consistently around 70–100 pixels per inch, or around 1000–1600 pixels per horizontal row. And web designers had learned to expect this pixel density and to design their pages to look good on it.
Meanwhile, the burgeoning smartphone field was stuck with much smaller screens and only slightly higher pixel densities per inch, leaving them often with just a few hundred pixels per row. So websites optimized for mobile use would use images with less pixels, which coincidentally also helped with the often glacially slow mobile download speeds at the time.
What happened in 2010 was that Apple broke the technological logjam with their new iPhone 4 and its "Retina" display technology, which literally doubled the pixel density from the iPhone 3GS's 163 ppi (pixels per inch) to the iPhone 4's 326 ppi. Competitors like quickly scrambled to follow suit with products like Samsung's Galaxy Nexus phone with a 316 ppi display (and a larger physical size, beating the iPhone 4 in total pixel count) launched in 2011, and a few years later 300+ ppi displays were common even in midrange smartphones. And competition and technological progress kept driving display pixel densities even higher, up to well over 500+ ppi and in some cases much higher yet.
And a few years later yet, in 2015, Apple brought their Retina technology to their MacBook laptops as well, nearly doubling the pixel density there as well, kickstarting the high-PPI competition in laptop and desktop computer displays as well, eventually leading to modern-day 4K+ monitors.
But this sudden jump in pixel density created a problem, because web pages designed using pixel measurements would suddenly become basically unreadable when the pixels were only half the size their designers had expected. Also, back when the iPhone 4 was introduced, a lot of mobile-optimized pages were using the number of pixels per row as a proxy for physical screen size to decide which version of their layout to use, and might choose to render a desktop-optimized layout that was all but unusable on a small phone screen.
Apple's solution for the iPhone 4 was as clever as it was ugly: they just had their new phones lie about the screen resolution, reporting only half as many "logical pixels" per inch (and per row) as the new screen actually had, and scaling all pixel-based measurements up by a factor of 2 correspondingly. That way, old apps and websites optimized for the iPhone 3GS would look exactly the same on the iPhone 4, just with slightly crisper text and vector graphics.
And all that designers had to do to make full use of the new iPhone's increased display resolution was to double the "natural" size (i.e. width/height in pixels) of their raster graphics (JPEG / PNG / GIF) images, and scale them down by 50% in CSS. Problem solved!
Other OS and browser vendors adopted the same strategy, and eventually it even got codified, to the point where modern CSS standards now simply define "1 px" as 1/96 inches, thus effectively emulating a traditional 2010 era computer display with 96 ppi, while the actual pixel density on a modern display is likely to be at least twice that, if not more.
Of course, in practice the CSS definition of 1 px = 1/96 inches is also a lie. It's a lot more likely that one CSS logical pixel is actually some fairly round number of physical pixels (often 2, but possibly 1.5 or 3 or even more, depending on the user's display settings), since that tends to result in cleaner graphics rendering. It just means that CSS "logical inches" (and centimeters, millimeters, etc.) won't match up with their real physical counterparts, either, since one "CSS inch" is just 96 "CSS pixels".
For example, the 16" 2023 MacBook Pro I'm typing this answer on claims to have a screen 1728 logical pixels wide (with twice that many actual physical pixels) at default zoom, and that's also the screen width Firefox reports. But I just measured the width of the viewable screen area with a ruler as approximately 345 mm, or about 13.6 inches, giving my screen a logical resolution of 127 ppi (or physical 254 ppi, which matches Apple's technical specs).
And of course, that's all ignoring browser zoom, which is a ubiquitous feature nowadays. A large fraction of desktop users nowadays keep their browser zoomed at anywhere from 75% to 150% or more, just depending on their eyesight and what text size they find most comfortable to read. And people browsing on mobile devices tend to zoom in and out all the time, since all it takes is a simple pinch gesture.
Anyway, the upshot of all this is that, for the time being, the basic recommended way to get raster images to look decently sharp on the web is to save them at (at least) twice the intended "logical" pixel size and scale them down with CSS.
If you want to spend time optimizing things further (or have automatic middleware to do it for you), you can use image source sets to serve multiple differently scaled variants of your images and have the browser choose which ones to download and show depending on the physical pixel density of the user's screen.
Or, better yet, use vector graphics where possible: they'll automatically render at the optimal resolution for each screen and can be freely zoomed without having to download additional versions.
