How to get width and height for img tags

This probably sounds like a very stupid question but how do I get the parsed values for an image without downloading the actual image. The reason why I need this is because I need to know if an image is going to fit on a page (for example a letter) and I want to avoid downloading every image when it is not needed.

I want to detect the width and height for the image in the following cases:

• the width and height is declared like this <img src="example.jpg" width="200px" height="300px">
• the width and height is declared with a class like this

...
<style>.image {width: 100px; height 200px}</style>
...
<img src="example.jpg" class="image">

• the width and height is declared in the style attribute like this <img src="example.jpg" style="width: 400px; height:300px">

I already tried things like this:

            var config = Configuration.Default.WithCss();

            var parser = new HtmlParser(config);
            var document = parser.Parse(webpage);
            
            // ReSharper disable once PossibleInvalidCastExceptionInForeachLoop
            foreach (var htmlImage in document.Images)
            {
                // The local width and height attributes always go before css width and height
                var attributeWidth = htmlImage.Attributes.GetNamedItem("width");
                var attributeHeight = htmlImage.Attributes.GetNamedItem("height");
                var attributeStyle = htmlImage.Attributes.GetNamedItem("style");
                if (attributeStyle != null)
                {
                    var css = parser.Parse(attributeStyle.Value);
                }

                if (htmlImage.ClassList != null)
                {
                    if (htmlImage.ClassList != null)
                    {
                        foreach (var value in htmlImage.ClassList)
                        {
                            var css = document.QuerySelector(htmlImage.TagName + "." + value);
                        }
                    }
                }

[FlorianRappl]

On a general note:

• The DOM being used in AngleSharp uses the W3C proposal with some custom extensions (usually provided in form of extension methods to have a clear separation). That way the knowledge gained here is easily transferable to a browser (or if one already worked with the DOM in the browser the other way round is already given).
• Configuration is used to determine the inner workings of contexts, parsers, the created (CSS/D/x)OM.
• A browsing context is a representation of a “headless tab” so to speak. So if you see a tab in your favorite browser then think of it as an AngleSharp BrowsingContext + some renderer + obviously a lot more stuff (e.g., JS engine, plugins such as Flash, …).
• The different parsers are either called implicitly or explicitly (implicit if, e.g., we activate CSS parsing and a style sheet is found during an HTML parse; explicit if, e.g., we trigger loading a page). They sometimes have some set up to determine some rules (e.g., CSS parser may drop unknown rules which could be unwanted due to a custom DSL or CSS flavor - or a limitation in the CSSOM).

[FlorianRappl]

There have been efforts to write a complete documentation, but since community (support) was missing it was pretty much abandoned. Obviously, there is no money in OSS development (no problem with that), but if even essential support / engagement is missing then motivation and prioritization is going down. If you want to start something (and may it just be a collection of all the questions that come to your mind - it would indeed be a helpful starter) then we could at least end up with a “cookbook” style documentation (incl. general introduction, recipes, and FAQs). 🍻