Image srcset and background

Hello MDB team

I have a question about the size of the images for viewing on a PC, Tablet or Smarphone.
The responsive works, but the problem is that one loads a computer screen image that is heavy for a small smarphone screen.

Before I ask you I look for a solution.
For the Carousel no problem I have the solution, but not for an image in background with a text on it.

That it would be the best solution between:
1 - put "DIV" for each size, example:
  a: for lg and more (div class = "d-none d-lg-block")
  b: for md (div class = .d-none .d-md-block .d-lg-none ")
  c: for xs (class div = .d-block .d-sm-none ")

or this second solution:

 <img srcset = "xxxxx-320w.jpg 320w,
             xxxxx-480w.jpg 480w,
             xxxx-800w.jpg 800w "
     sizes = "(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px "
     src = "xxxx-800w.jpg" alt = "An image">

For the second solution, how to put the code (img srcset) in this example of your page MDB-Magazine-Templates-Pack / html / homepage / v-4.html, because the image is placed in background:

<Section>
            <div style = "background-image: url ('https://mdbcdn.b-cdn.net/img/Photos/Others/slide4.jpg'); background-repeat: no-repeat; background-size: cover;">
                <! - Caption ->
                <div class = "full-bg-img flex-center white-text rgba-stylish-strong">
                    <ul class = "animated fadeIn col-md-12 list-unstyled">
                        <Li>
                            <h1 class = "h1-responsive do-weight-bold-mt-5 pt-5"> Sed ut perspiciatis unde omnis ist natus sit voluptatem </ h1>
                        </ Li>
                        <Li>
                            <p> Unde omnis ist natus sit voluptatem veritatis and quasi architecto beatae </ p>
                        </ Li>
                        <li class = "pb-5">
                            <a target = "_ blank" href = "https://mdbootstrap.com/forums/forum/support/" class = "mb-5 btn-danger btn-rounded wave-effect waves-light" rel = "nofollow" > Read more </a>
                        </ Li>
                    </ Ul>
                </ Div>
                <! - /.Caption ->
            </ Div>
        </ Section>

Thank you for your help.
Alain

Exemple for:

https://haute-savoie.ialpes.com/noel/marches-de-noel-haute-savoie.html