图片元素：我需要在每个scrset属性中设置完整路径吗？

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 (eg 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.

Answer 2

Disclaimer this is not an solution to your question. But a solution for responsive images

SVG

The <svg> element is highly supported.

There is an example of a responsive svg image:

 circle { fill: firebrick; } svg { border: 1px solid black; } 

 <svg width="100%" height="100%" viewBox="0 0 100 100"> <rect x="10" y="10" width="50" height="50" fill="DarkOrange" /> <rect x="40" y="40" width="50" height="50" fill="SeaGreen" /> <circle cx="50" cy="50" r="30" /> </svg> 

Press the run code snippet and then Full page to test it out.

CSS

Or you can simple use an image that scales down properly:

 body { width: 100%; } .container { width: 100%; } .container img { display: block; max-width: 100%; height: auto; } 

 <div class="container"> <img src="http://i.ytimg.com/vi/4rY4PlSCy48/maxresdefault.jpg" /> </div>