Как убрать lazy load на странице для первых двух элементах?

.product__wrap {
  display: flex;
  flex-wrap: wrap;
}

.product__pic {
  display: block;
  width: 50%;
}

<div class="product__wrap">
  <a href="#" class="product__pic">
    <picture class="product__image">
      <img src="https://i.ibb.co/RjNX704/product2-1x.png" data-src="https://i.ibb.co/RjNX704/product2-1x.png" data-srcset="https://i.ibb.co/t8rbLCV/product2-2x.png 2x" class=" lazyloaded" loading="lazy" srcset="https://i.ibb.co/t8rbLCV/product2-2x.png 2x">
    </picture>
  </a>

  <a href="#" class="product__pic">
    <picture class="product__image">
      <img src="https://i.ibb.co/RjNX704/product2-1x.png" data-src="https://i.ibb.co/RjNX704/product2-1x.png" data-srcset="https://i.ibb.co/t8rbLCV/product2-2x.png 2x" class=" lazyloaded" loading="lazy" srcset="https://i.ibb.co/t8rbLCV/product2-2x.png 2x">
    </picture>
  </a>

  <a href="#" class="product__pic">
    <picture class="product__image">
      <img src="https://i.ibb.co/RjNX704/product2-1x.png" data-src="https://i.ibb.co/RjNX704/product2-1x.png" data-srcset="https://i.ibb.co/t8rbLCV/product2-2x.png 2x" class=" lazyloaded" loading="lazy" srcset="https://i.ibb.co/t8rbLCV/product2-2x.png 2x">
    </picture>
  </a>

  <a href="#" class="product__pic">
    <picture class="product__image">
      <img src="https://i.ibb.co/RjNX704/product2-1x.png" data-src="https://i.ibb.co/RjNX704/product2-1x.png" data-srcset="https://i.ibb.co/t8rbLCV/product2-2x.png 2x" class=" lazyloaded" loading="lazy" srcset="https://i.ibb.co/t8rbLCV/product2-2x.png 2x">
    </picture>
  </a>

  <a href="#" class="product__pic">
    <picture class="product__image">
      <img src="https://i.ibb.co/RjNX704/product2-1x.png" data-src="https://i.ibb.co/RjNX704/product2-1x.png" data-srcset="https://i.ibb.co/t8rbLCV/product2-2x.png 2x" class=" lazyloaded" loading="lazy" srcset="https://i.ibb.co/t8rbLCV/product2-2x.png 2x">
    </picture>
  </a>

</div>