Is it possible to find out the size of the container for the image dynamically?

Question

css

In general, the problem is as follows: when creating news on the site, the user must upload a splash screen (picture) for this news. The news is created, checked by the moderator, goes to the news feed. What are some ways to compress images when they are rendered to the page to reduce the amount of data loaded? Asp.Net MVC 4 platform, there are several options, at least known to me:

1. You can save the image on the server and then compress it with a third-party program without losing quality. The option is very bad.
   
2. Compress the image immediately when it is added to the server and then spit it out already compressed, but the quality of the image will suffer. A better option, but also not a cake.
   
3. Through HttpHandler (already written, now I’m trying it), which catches the request and returns a compressed image, but even here a problem arises, when I start processing this image, I specify its size and compression level (or quality). If the size is not specified, then the volume of the picture, of course, decreases, but not as much as with the size. The layout of the page is rubber, so I can’t set the exact size of the picture, for some parts of the site, yes, it is fixed, for example, for the user’s avatar, but for most it’s not. This is where the question arises: is it possible to do this dynamically, for different user screen sizes? So that my request still receives the approximate dimensions of the picture for a particular area.
   

Note. picture container:

<figure class="box-shadow-3">
            <img src="@Url.Content(@Model.NewImages)" />
            <figcaption class="text-white">
                <div class="publication-date padding-all-10 border-right-bottom" title="Дата публикации">
                    <i class="fa fa-calendar"></i><span>&nbsp;@Model.NewDateAdd.ToShortDateString()</span>
                </div>
                <!-- /.publication-date -->
                <div id="newAuthor" class="padding-all-10 col-md-8 border-left-top text-center">
                    <div class="col-md-8" title="Блог">
                        <i class="fa fa-rss"></i>&nbsp;&nbsp;@Model.BlogName
                    </div>
                    <!-- /.col-md-8 -->
                    <div class="col-md-4" title="Количество лайков">
                        <i class="fa fa-thumbs-up">&nbsp;<span id="NewCountLikes">@Model.CountLikes</span></i>
                    </div>
                    <!-- /.col-md-4 -->
                </div>
                <!-- /#newAuthor -->
            </figcaption>
            <!-- /figcaption -->
        </figure>
        <!-- /figure -->

We need to calculate the W and H dimensions of the " " container, its CSS:<figure>

figure {
   width: 100%;
   height: 400px;
   position: relative;
}
figure img {
    width: 100%;
    height: 100%;
    display: block;
}

Answer 1

If we are completely perverted, then the only way out is to load pictures with an ajax request. Only it is necessary?