That's a nice little quality-of-life improvement. It's a little annoyance that you don't really consciously notice because you're so used to it, but I recall reading about Chrome adding a similar feature and suddenly realising how annoying it is when you're reading something, and then suddenly it jumps out of your view due to a large image above the viewport loading.
Eg setting an image to be "width: 100vw; height: 100vh;" means it'll be squished to fill the user's viewport. "width: 100vw; height: auto;" will fill the viewport horizontally and scale the image vertically as per it's aspect ratio. And so on. Generally that'll look bad though because browsers scale things fast rather than well.
And then there's the options for background images. "background-size: cover" is quite useful.
CSS is fun.
``` object-fit: cover ```
comes to mind as a client-side solution I used in the past for this problem
Generally, I'd agree that authoring time is some 9X% solution, though there remain edge cases.
I can't think of a good use case for auto generating arbitrarily large images, and as a user I wouldn't want to visit websites where the web designer thinks that's a good idea either.
What thos cases are is ... a good question, and my point is more thaat this can be done than to say why or that it's a good idea.
Upshot again is that image size need not be deterministic at authoring time.
width: 2000px;
max-width: 100%;
ratio: 16/9;
Edit to add: Or maybe it would be better to just have the ability to lock the ratio, such as:
ratio: fixed; .DamnInteresting {
position: relative;
display: block;
}
.DamnInteresting::before {
content: '';
display: block;
/* 16:9 shim! */
padding-bottom: 56.25%;
}
.DamnInteresting img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
(The ::before element isn't stricly necessary; the padding can go on the .DamnInteresting element directly - just make sure .DamnInteresting is wrapped in a containing element of your desired width and you can even use inline styles for the padding shim.)
(Edit: a word)
<img width="100" height="100" style="width:100%;height:auto;" src=test.png>
From the post you replied to:
> Software is actively working to overcome the limitations of latency, such as with HTTP/2, HTTP/3, and TLS 1.3.
The whole point is to eliminate those round-trips, and just stream content to the browser at the limit of its available bandwidth.
> he problem is that the software stack makes tons of round-trip requests
Latency matters because of all of those round-trip requests. Each individual request incurs at least 2x the network latency value (one network latency trip out to the server, another network latency trip back). If browsers did not try to run parallel requests, then all those round trips would sum up to a substantial overall delay.
That describes zero browsers. And "it's not loading parallel enough" is very much a software stack problem and not a network problem.
We could shove full pages over the wire in 200ms if we tried harder.
Well then, since it's a physical impossibility to do away with them, we'd better start working on improving the speed of light.
This theme is discussed here often, but really, this is what HTML was designed for. Load https://thebestmotherfucking.website/ in a browser and scale it at will, it will always look good. The fact that people put a ton of often useless stuff and complain it looks bad in some browser doesn't mean media queries are theonly way.
The problem is mainly with ads, when 1) there may or may not be an ad available, and 2) you're allowing the ad height to be dynamic, to allow for greater possible inventory.
That's a benefit, in my view.
I believe opera 12 could do this?