This PR creates a new class method in URLBuilder that will generate a srcset string, which can be used in the srcset attribute on an <img> HTML element. createSrcSet() takes a path and params argument similar to createURL(), and will return a String in one of two srcset formats.
Srcset Width-Pairs
The first format creates srcset width-pairs, a comma-delimited list of URLs and width descriptors corresponding to each one. This allows for responsive size switching based on the current width of the browser viewport. createSrcSet() will append any params passed to the method to each URL constructed within the list. The following is an example of how to generate a width-pair srcset:
URLBuilder ub = new URLBuilder("test.imgix.net", true, "", false);
HashMap<String,String> params = new HashMap<String,String> ();
params.put("fit", "crop");
params.put("crop", "faces");
System.out.println(ub.createSrcSet("bridge.png", params));
will return the following String (collapsed for brevity):
Notice that a w= parameter is automatically inserted for each entry in the srcset list. This is required in order for the element to properly display the correctly-sized image corresponding to the viewport's width.
Device Pixel Ratio (DPR) Srcset
The second format this method can return is a srcset list of same-size images in varying resolutions. In this case, images are scaled using the dpr= parameter to adjust for the device pixel ratio of the browser. A DPR srcset will be automatically generated instead of a width-pair srcset if exact dimensions for the output image are specified, by providing either a w (width) or a h (height) and ar (aspect ratio) in the params argument.
The following is an example of how to generate a DPR srcset:
URLBuilder ub = new URLBuilder("test.imgix.net", true, "", false);
HashMap<String,String> params = new HashMap<String,String> ();
params.put("h", "200");
params.put("ar", "3:2");
System.out.println(ub.createSrcSet("bridge.png", params));
Signing URLscreateSrcSet() also supports signing URLs, which can be very useful for generating server-side and then passing to the client. This will avoid having to expose your imgix source's secure token to the client.
URLBuilder ub = new URLBuilder("test.imgix.net", true, "my-token", false);
HashMap<String,String> params = new HashMap<String,String> ();
params.put("w", "100");
System.out.println(ub.createSrcSet("bridge.png", params));
generates a srcset with unique signatures for each URL:
This PR creates a new class method in
URLBuilderthat will generate asrcsetstring, which can be used in thesrcsetattribute on an<img>HTML element.createSrcSet()takes apathandparamsargument similar tocreateURL(), and will return aStringin one of twosrcsetformats.Srcset Width-Pairs The first format creates
srcsetwidth-pairs, a comma-delimited list of URLs and width descriptors corresponding to each one. This allows for responsive size switching based on the current width of the browser viewport.createSrcSet()will append anyparamspassed to the method to each URL constructed within the list. The following is an example of how to generate a width-pairsrcset:will return the following
String(collapsed for brevity):Notice that a
w=parameter is automatically inserted for each entry in thesrcsetlist. This is required in order for the element to properly display the correctly-sized image corresponding to the viewport's width.Device Pixel Ratio (DPR) Srcset The second format this method can return is a
srcsetlist of same-size images in varying resolutions. In this case, images are scaled using thedpr=parameter to adjust for the device pixel ratio of the browser. A DPRsrcsetwill be automatically generated instead of a width-pair srcset if exact dimensions for the output image are specified, by providing either aw(width) or ah(height) andar(aspect ratio) in theparamsargument. The following is an example of how to generate a DPRsrcset:which will return the following
String:Signing URLs
createSrcSet()also supports signing URLs, which can be very useful for generating server-side and then passing to the client. This will avoid having to expose your imgix source's secure token to the client.generates a
srcsetwith unique signatures for each URL:For more information on
srcset, building responsive images, and resolution switching: