In short: what picture tag does or something similar

Currently I do this. Hiding one of images in css by display none.
It works, but this approach has one problem. Putting priority attribute on main image makes it (pre)load even on small screens when it is not displayed. And not putting it makes it lazy loaded on big screens when it is displayed

{hasImage ? (
    <div
        className={[
            styles.heroImage,
            hasImageMobile ? styles.hasImageMobile : null,
        ].join(' ')}
    >
        <Image
            src={image.url}
            alt={image.alt || ''}
            fill
            sizes="(min-width: 1220px) 1200px, 100vw"
            priority
        />
    </div>
) : null}
{hasImage && hasImageMobile ? (
    <div className={[styles.heroImage, styles.isMobile].join(' ')}>
        <Image
            src={imageMobile.url}
            alt={imageMobile.alt || ''}
            fill
            sizes="100vw"
            priority
        />
    </div>
) : null}