How to use srcset - 10 common examples

};

    const backgroundStyle = {
      ...(options.plain ? styles.plain : null),
      ...(options.light ? styles.light : null),
      ...(options.dark ? styles.dark : null),
      ...(options.plain && options.light ? styles.plain_light : null),
      ...(options.plain && options.dark ? styles.plain_dark : null)
    };

    // Deconstruct srcset strings
    const imageSrcset = srcset
      .parse(src)
      .map(img => ({ ...img, url: getPublicPath(img.url, catalog) }));
    const overlaySrcset = overlay
      ? srcset
          .parse(overlay)
          .map(img => ({ ...img, url: getPublicPath(img.url, catalog) }))
      : [];

    const fallbackSrc = imageSrcset[0].url;
    const fallbackOverlay = overlay ? overlaySrcset[0].url : undefined;

    return (
      <div>
        <div>
          <img src="{fallbackSrc}" srcset="{srcset.stringify(imageSrcset)}">
          {overlay &amp;&amp; (</div></div>

function cleanSrcset( srcset, width ){
  const parsed = srcsetUtil.parse(srcset);
  
  let cleanedSrcset
  if( true ){
    cleanedSrcset = getSmallestSrcset( parsed, width )
  }else{
    cleanedSrcset = noRetinaSrcset( parsed )
  }

  if( cleanedSrcset ){
    return srcsetUtil.stringify(cleanedSrcset)
  }else{
    return false
  }
}
  // chrome.tabs.onUpdated.addListener(

plain_dark: {
        background: theme.bgDark,
        padding: "20px"
      }
    };

    const backgroundStyle = {
      ...(options.plain ? styles.plain : null),
      ...(options.light ? styles.light : null),
      ...(options.dark ? styles.dark : null),
      ...(options.plain && options.light ? styles.plain_light : null),
      ...(options.plain && options.dark ? styles.plain_dark : null)
    };

    // Deconstruct srcset strings
    const imageSrcset = srcset
      .parse(src)
      .map(img => ({ ...img, url: getPublicPath(img.url, catalog) }));
    const overlaySrcset = overlay
      ? srcset
          .parse(overlay)
          .map(img => ({ ...img, url: getPublicPath(img.url, catalog) }))
      : [];

    const fallbackSrc = imageSrcset[0].url;
    const fallbackOverlay = overlay ? overlaySrcset[0].url : undefined;

    return (
      <div>
        <div>
          </div></div>

$(element).each(function() {
      var value = $(this).attr(attribute);
      if (value) {
        var links = [value];
        if (attribute === 'srcset') {
          links = srcset.parse(value).map(function(size) {
            return size.url;
          });
        }
        links.forEach(function(link) {
          var resolvedLink = url.resolve(page, link);
          var parsedLink = url.parse(resolvedLink);
          if (((parsedLink.protocol === 'http:') || (parsedLink.protocol === 'https:') || (parsedLink.protocol === 'file:')) &&
              (!options.onlySameDomain || (parsedLink.hostname === pageHostname)) &&
              !isLinkIgnored(resolvedLink)) {
            // Add to beginning of queue (in order) so links gets processed before the next page
            pendingCallbacks.splice(index, 0, testLink(page, resolvedLink));
            index++;
            linkCount++;
          }
        });
      }

function cleanSrcset( srcset, width ){
  const parsed = srcsetUtil.parse(srcset);
  
  let cleanedSrcset
  if( true ){
    cleanedSrcset = getSmallestSrcset( parsed, width )
  }else{
    cleanedSrcset = noRetinaSrcset( parsed )
  }

  if( cleanedSrcset ){
    return srcsetUtil.stringify(cleanedSrcset)
  }else{
    return false
  }
}
  // chrome.tabs.onUpdated.addListener(

if (a === 'srcset') {
              try {
                parsed = srcset.parse(value);
                each(parsed, function(value) {
                  if (naughtyHref('srcset', value.url)) {
                    value.evil = true;
                  }
                });
                parsed = filter(parsed, function(v) {
                  return !v.evil;
                });
                if (!parsed.length) {
                  delete frame.attribs[a];
                  return;
                } else {
                  value = srcset.stringify(filter(parsed, function(v) {
                    return !v.evil;
                  }));
                  frame.attribs[a] = value;
                }
              } catch (e) {
                // Unparseable srcset
                delete frame.attribs[a];
                return;
              }
            }
            if (a === 'class') {
              value = filterClasses(value, allowedClassesMap[name]);
              if (!value.length) {
                delete frame.attribs[a];
                return;
              }

function cleanSrcset(srcset, width) {
  const parsed = srcsetUtil.parse(srcset);
  let cleanedSrcset;
  switch (parseInt(store.getters.image_srcset)) {
    case 1:
      cleanedSrcset = noRetina(parsed);
      break;
    case 2:
      cleanedSrcset = smallest(parsed, width);
      break;
    case 3:
      cleanedSrcset = smart(parsed, width);
      break;
  }
  if (cleanedSrcset) {
    return srcsetUtil.stringify(cleanedSrcset);
  } else {
    return false;

const pickBiggestSourceFromSrcset = srcset => {
  const sourcesWithBytesize = srcsetParser.parse(srcset).map(source => {
    return fetch(source.url)
      .then(response => response.blob())
      .then(({ size: bytesize }) => Object.assign(source, { bytesize }));
  });

  return Promise.all(sourcesWithBytesize).then(sources => {
    sources.sort((first, second) => {
      if (first.bytesize > second.bytesize) return -1;
      if (first.bytesize < second.bytesize) return 1;
      return 0;
    });

    return sources[0].url;
  });
};

constructor (text) {
		this.text = text || '';
		this.imgSrcsetParts = srcset.parse(this.text);
		this.paths = this.imgSrcsetParts.map(imgSrcset => imgSrcset.url);
	}

function absoluteSrcset(str) {
		return srcset.stringify(
			srcset.parse(str).map(item => ({
				...item,
				url: new URL(item.url, doc.baseURI).href
			}))
		);
	}