Everytime I search about changing image sizes in TYPO3, the only thing I can find is cropping, as if it was the only way to manipulate image sizes. This even confuses editors and they asked me, as the site package developer, if I did something wrong.
TYPO3 11.5 even offers an image manipulation tool for editors and the "powerful" image manipulation capabilities are promoted on the website.
But neither the tool offers a way to down scale images nor are there width / height settings. It could be related to responsiveness. But I don't see a problem in changing the width / height as long as you don't deform the image (i.e. change the width/height ratio) and don't stretch the image width/height bigger than it was before.
On the other hand, the famous bootstrap_package (which seems to be a quasi-standard to me, because even the TYPO3 doc screenshots have this extension) stretches images to 100% container width, even if they are smaller, which makes them look really blurry and bad.
I wonder if I missed something like an option that I can activate in my site package or a good reason why such an important feature is missing.
Well - frankly said, because it does not make sense.
The reason is that you should not have both, repsonsive images AND editable image sizes, at the same time.
Actually there is the option to set width and height of single images with a default TYPO3 core out of the box, but that feature is not connected to the editor you marked, since that editor is responsible for cropping images for the different break points only. In the Bootstrap Package those fields are disabled on purpose.
This way editors can make sure, that aspect ratios and the selected croppings match the different view ports, but they will not be allowed to change the actual size of the output images, because this leads to the results you mentioned: Blurry images especially when the size is too low and the image is scaled to fill a whole container.
That's why the actual width and height in the Bootstrap Package are fixed values that have to be predefined either in TypoScript or in the Fluid Template for each of the possible break points.
Ideally the values are taken from the upper end of the range of pixels those break points cover. - So editors have to make sure that the images they are using are at least providing the maximum width defined by the largest break point to avoid upscaling.
Still there is a way to have smaller image sizes in the output by making use of the different number of columns that can be selected i.e. while editing the text/media element. But I have to admit that at least with the Bootstrap package this seems to be broken with some versions I have been working with, because it does not work at all, when there is just a single image in that particular element.
Still it can be fixed in the Fluidtemplate by removing the condition for numbers of images larger than 1.
https://github.com/benjaminkott/bootstrap_package/blob/934e8e4fe54866e1b44ec067ea9cc1f58796e52d/Resources/Private/Partials/ContentElements/Media/Gallery.html#L5
With the latest version there seems to be a ViewHelper to deal with columns and multipliers, but I did not test that yet.
https://github.com/benjaminkott/bootstrap_package/blob/33ccae281acb1d4dfbef7eff0ab2f3f5e8db3443/Resources/Private/Partials/ContentElements/Media/Gallery.html#L6