CKEditor: How to make the images responsive?

This plugin seems to be using the new srcset and sizes attributes of the img element. Here is the specification , and the set of browsers that already support them .

On what to put in the fields, assuming that each field refers to the corresponding attribute, I would say the following:

• URL: the URL of the "default" image if the browser does not support srcset ;

• Sourceset: A list with two or more "candidate" images, each image accompanied by its width in pixels or its device-pixel-ratio . Example:

  imagem1.jpg 100w, imagem2.jpg 200w, imagem3.jpg 400w
  

  or

   imagemA.jpg 1x, imagemB.jpg 1.5x, imagemC.jpg 2x
  

• Sizes: a list with zero or media query and the width that the image should occupy in those conditions. Example:

  (max-width: 500px) 95vw, (max-width: 1000px) 50vw, 500px
  

(Note: I do not understand anything about the operation of device-pixel-ratio , but I found an article detailing the concepts involved.)

A concrete example would be the following (see the example in "whole page" and resize the browser window to notice the effect):

<img srcset="http://placehold.it/100x25 100w,
             http://placehold.it/400x100 400w,
             http://placehold.it/1600x400 1600w,
             http://placehold.it/6400x1600 6400w"
     sizes="(max-width: 768px) 96vw,
            (max-width: 1200px) 50vw,
            33vw"
     src="http://placehold.it/400x100"
>

Here I give a list of images and their original widths (each 4 times larger than the previous one) and let the browser decide which one is the most appropriate to be displayed. In addition, I set the widths that these images will indeed occupy on the page under various conditions (expressed as media queries ). Finally, an alternative URL in case of browser does not support any of this.

What criteria does the browser use to choose an image from the list, I can not tell (in my test with Chrome and Firefox on a PC screen both displayed the 1600x400 no matter how much I resized the screen). By looking at the example under various conditions I came to the conclusion that it will choose the best image at the time of loading and continue using it no matter what happens. I do not know if this is by design or some implementation limitation.