how do i change width and height of the image in source element of html picture tag?

how do i change the width & height of the image which is in source element in picture tag? should I use two source elements with the same image and give different widths and heights for different viewports or there is another way to do it?

    <div class="model-image">
      <picture>
        <source
          media="(min-width:568px)"
          srcset="/images/hero-desktop.jpg"
          height="659"
          width="540"
        />
        <img
          src="./images/hero-mobile.jpg"
          alt="hero-image"
          class="hero-image"
        />
      </picture>
    </div>