WebP filter changes image placement due to incorrect DOM replacement

Problem/Motivation

The WebP Image filter modifies <img> elements by wrapping them in a <picture> tag. However, the current implementation appends the new
element to the parent and then removes the original <img>. This causes images to lose their original position in the DOM, resulting in layout and alignment issues—especially with CKEditor content.

Steps to reproduce

• Enable the WebP Image filter.
• Add an image via CKEditor (with alignment, e.g., left/right).
• Save the content.
• Inspect rendered HTML.

Actual Result

• Image position changes (usually moved to the end of the parent container)
• Alignment/styles may break

Expected Result

• Image should remain in the same position
• Layout and alignment should remain unchanged

Proposed resolution

The issue is caused by this logic:
$parent->appendChild($picture);
$parent->removeChild($result);
This appends the new
element instead of replacing the <img> in-place.