I'm able to get the ckeditor to display the sourceEditing plugin correctly. What I'm trying to do is customize the ckeditor so when I upload an image instead of the image source being something like this:

<figure class="image image-style-side">
    <img src="https://c.cksource.com/a/1/img/docs/sample-image-bilingual-personality-disorder.jpg">
    <figcaption>
        One language, one person.
    </figcaption>
</figure>

I want it to display images of different size when depending on screen width like this:

<picture class="image image-style-side">
  <source media="(max-width: 799px)" https://small-c.cksource.com/a/1/img/docs/sample-image-bilingual-personality-disorder.jpg">
  <source media="(min-width: 800px)" https://medium-c.cksource.com/a/1/img/docs/sample-image-bilingual-personality-disorder.jpgg">
  <img src="elva-800w.jpg" alt="https://largmc-.cksource.com/a/1/img/docs/sample-image-bilingual-personality-disorder.jpgElva">
</picture>

Is something like this even possible?