How do I use element instead of tags in WordPress post content having webP support?

You have to loop through all images inside $post the_content() using foreach().

Which gives us, regex for group matching of <img> tag. Put all images into array().

Start counting from -1 since 0 has the 1st image already in array().

Loop through array() with images, find image with "size-full" with group match 3, if yes, get it’s src value with group match 7.

After, replace src="https://wordpress.stackexchange.com/questions/320262/value" extenstion – .png, .jpg …, assign the replaced string to new variable. Use the new variable and add extension ".webp" to the it.

Replace existing <img> tags with <picture> element and call the function on $content.

function webp_picture_fix($content){
    global $post;
    preg_match_all("/<img(.*?)class=('|\")(.*?)('|\")(.*?)src=('|\")(.*?)('|\")(.*?)>/i", $content, $images);

    if(!is_null($images)){
        $i = -1;
        foreach ($images as $key) {
            $i++;
            //echo $key[$i];
            if(strpos($images[3][$i], 'size-full') !== false){
                //echo "hi";
                $slika_ekstenzija = $images[7][$i];
                $sewebp = preg_replace('/\\.[^.\\s]{3,4}$/', '', $slika_ekstenzija);
                $webp_slika_src = $sewebp.".webp";
                $replacement="<picture><source srcset="".$webp_slika_src.'" type="image/webp" /><img'.$images[1][$i].'class=".$images[2][$i].$images[3][$i].$images[4][$i].$images[5][$i]."src="https://wordpress.stackexchange.com/questions/320262/.$images[6][$i].$images[7][$i].$images[8][$i].$images[9][$i]."></picture>';
                $content = str_replace($images[0][$i], $replacement, $content);
            }
        }
    }

    return $content;
}
add_filter('the_content', 'webp_picture_fix', 9999);