Fix #537 Stop replacing images already nested inside picture tags

[iCaspar]

Closes #537

Starting out adding a remove_picture_tags() method, per grooming notes.

~However, we cannot remove them without later putting them back at the end of the process, since we're calling process_content() inside of ob_start(). When we flush the buffer without putting the removed things back, they'll be missing from the page!~

~To remedy this, we'll use preg_replace_callback() in the remove part to make a placeholder comment in the html where we've removed a tag and store all the picture tags we've removed; then we can preg_replace_callback() again in a reinsert_picture_tags() method to swap the original picture tag back in at each placeholder.~

[mostafa-hisham]

@iCaspar Sorry for not clarifying this in the grooming

what I wanted to do is remove the <picture> tags first then use this HTML(without picture tag) to find the rest of the <img> tags then use the original HTML content in the rest of the process

will be like this in code

    public function process_content( $content ) {
        $html_no_picture_tags= $this->remove_picture_tags($content);
        $images = $this->get_images( $html_no_picture_tags );

        if ( ! $images ) {
            return $content;
        }

        foreach ( $images as $image ) {
            $tag     = $this->build_picture_tag( $image );
            $content = str_replace( $image['tag'], $tag, $content );
        }

        return $content;
    }

it is the same solution we used in RUCSS to avoid styles in <noscript> tags https://github.com/wp-media/wp-rocket/blob/2d094e01278e3e911d50cdded013f22f53ea4e70/inc/Engine/Optimization/RUCSS/Controller/UsedCSS.php#L427-L479

I think the solution we used in RUCSS is more simple

[iCaspar]

Ready for @wp-media/qa