Since you guys dig up again that older topic, here's yet another possible image-size factor:
window width!
If speed matters most and you don't mind getting SMALLER pics, try if it helps to pull your window smaller before loading the page. This probably works on many websites, but not all.
CATCH:
when it's finished loading and you want to pull the page WIDER now, it probably adjusts instantly and now starts loading the BIG images again...
(but injecting a little userscript to modify the sourcecode probably prevents this)
Odd as this sounds, but nowadays many sites send different image sizes depending on the user's current window width, to optimize looks for small mobile and large desktop browsers. There are different methods for this, some require javascript, but the most simple method works
by CSS alone.
DESCRIPTION:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
example:
<img
srcset="pic-320w.jpg, pic-480w.jpg 1.5x, pic-640w.jpg 2x"
src="pic-640w.jpg">
or
<img
srcset="pic-480w.jpg 480w, pic-800w.jpg 800w"
sizes="(max-width: 600px) 480p, 800px"
src="pic-800w.jpg">
"srcset" works as pure CSS since KM76/FF38/PM27.
The "src" pic was intended as fallback for older browsers.
But when the page just finished loading the html code, before CSS is read too, browsers still start loading "src", so today this is often just a 1px placeholder to speed up loading in modern browsers. Catch: older browsers get no image at all (but luckily a workaround with userscripts often helps, partly at least)
Another method: <source srcset...>
https://www.html5rocks.com/en/tutorials/responsive/picture-element/
Edited 2 time(s). Last edit at 06/30/2020 02:12AM by siria.