Picture element: do I need to set the full path in every scrset attribute?

Question

Responsive images, the use-cases and the new HTML5 picture element are explained quite well in this article.

Update: To be more specific, I mean with responsive images, resized images for different devices. Less image weight, so faster loading sites. Up to 72% less weight.

The shown Examples are just filenames (no path), in practice it will be more verbose like:

<picture>
<source
    media="(min-width: 1280px)"
    sizes="50vw"
    srcset="wp-content/uploads/2015/03/opera-fullshot-200.webp 200w,
            wp-content/uploads/2015/03/opera-fullshot-400.webp 400w,
            wp-content/uploads/2015/03/opera-fullshot-800.webp 800w,
            wp-content/uploads/2015/03/opera-fullshot-1200.webp 1200w,
            wp-content/uploads/2015/03/opera-fullshot-1600.webp 1600w,
            wp-content/uploads/2015/03/opera-fullshot-2000.webp 2000w"
    type="image/webp">
<source
    sizes="(min-width: 640px) 60vw, 100vw"
    srcset="wp-content/uploads/2015/03/opera-closeup-200.webp 200w,
            wp-content/uploads/2015/03/opera-closeup-400.webp 400w,
            wp-content/uploads/2015/03/opera-closeup-800.webp 800w,
            wp-content/uploads/2015/03/opera-closeup-1200.webp 1200w,
            wp-content/uploads/2015/03/opera-closeup-1600.webp 1600w,
            wp-content/uploads/2015/03/opera-closeup-2000.webp 2000w"
    type="image/webp">
<source
    media="(min-width: 1280px)"
    sizes="50vw"
    srcset="wp-content/uploads/2015/03/opera-fullshot-200.jpg 200w,
            wp-content/uploads/2015/03/opera-fullshot-400.jpg 400w,
            wp-content/uploads/2015/03/opera-fullshot-800.jpg 800w,
            wp-content/uploads/2015/03/opera-fullshot-1200.jpg 1200w,
            wp-content/uploads/2015/03/opera-fullshot-1600.jpg 1800w,
            wp-content/uploads/2015/03/opera-fullshot-2000.jpg 2000w">
<img
    src="wp-content/uploads/2015/03/opera-closeup-400.jpg" alt="The Oslo Opera House"
    sizes="(min-width: 640px) 60vw, 100vw"
    srcset="wp-content/uploads/2015/03/opera-closeup-200.jpg 200w,
            wp-content/uploads/2015/03/opera-closeup-400.jpg 400w,
            wp-content/uploads/2015/03/opera-closeup-800.jpg 800w,
            wp-content/uploads/2015/03/opera-closeup-1200.jpg 1200w,
            wp-content/uploads/2015/03/opera-closeup-1600.jpg 1600w,
            wp-content/uploads/2015/03/opera-closeup-2000.jpg 2000w">
</picture>

Setting the full path every time seems akward.

I prefer this:

<picture pathset="http://example.com/wp-content/uploads/2015/03/">
<source
    media="(min-width: 1280px)"
    sizes="50vw"
    srcset="opera-fullshot-200.webp 200w,
            opera-fullshot-400.webp 400w,
            opera-fullshot-800.webp 800w,
            opera-fullshot-1200.webp 1200w,
            opera-fullshot-1600.webp 1600w,
            opera-fullshot-2000.webp 2000w"
    type="image/webp">
<source
    sizes="(min-width: 640px) 60vw, 100vw"
    srcset="opera-closeup-200.webp 200w,
            opera-closeup-400.webp 400w,
            opera-closeup-800.webp 800w,
            opera-closeup-1200.webp 1200w,
            opera-closeup-1600.webp 1600w,
            opera-closeup-2000.webp 2000w"
    type="image/webp">
<source
    media="(min-width: 1280px)"
    sizes="50vw"
    srcset="opera-fullshot-200.jpg 200w,
            opera-fullshot-400.jpg 400w,
            opera-fullshot-800.jpg 800w,
            opera-fullshot-1200.jpg 1200w,
            opera-fullshot-1600.jpg 1800w,
            opera-fullshot-2000.jpg 2000w">
<img
    src="http://example.com/wp-content/uploads/2015/03/opera-closeup-400.jpg" alt="The Oslo Opera House"
    sizes="(min-width: 640px) 60vw, 100vw"
    srcset="opera-closeup-200.jpg 200w,
            opera-closeup-400.jpg 400w,
            opera-closeup-800.jpg 800w,
            opera-closeup-1200.jpg 1200w,
            opera-closeup-1600.jpg 1600w,
            opera-closeup-2000.jpg 2000w">
</picture>

BTW for readability and programming logic I prefer the responsive stuff in the path not in filename. The you can do this

<picture pathset=/pathtoimages/>
 <source fileset=opera-fullshot.webp
      sizes="(min-width: 640px) 60vw, 100vw"
...
    srcset="200w/ 200w,
            800w/ 800w,
            1200w/ 1200w,
            1600w/ 1600w,">
...
<source fileset=opera-closeup.webp
...
    srcset="200w/ 200w,
            800w/ 800w,
            1200w/ 1200w,
            1600w/ 1600w,">
</picture>

If you drop support for a certain width, just delete the directory.

But the main issue, we need quite a lot of code for 1 image.

So, to limit that (without any JS solution):

Can I set something like a pathsrc attribute or scoped base element?

Answer 1

Nope.

It is an obvious idea to use a template syntax in srcset. In fact it was part of the earliest srcset draft. However, URLs can and do contain anything, and don't always map to a template (e.g. generated GUIDs for different images), so it didn't work.

In theory you could use XHTML and xml:base. In practice, you don't use XHTML, and xml:base support is being removed from browsers.

I would recommend not worrying so much about the repetition, just make sure you use gzip.