Learn how to improve your responsive image generation workflow with the latest update of imglab integration libraries: automatic srcset generation.
As web developers, we are constantly looking for ways to improve the performance and user experience of our websites. One powerful tool in our arsenal for this task is the srcset attribute for images.
The srcset attribute allows us to specify multiple versions of an image, each tailored to a specific screen pixel density or pixel width. The browser will then select the most appropriate image to display, based on the device's screen size and pixel density. This ensures that the user is only downloading the image that is best suited for their device, resulting in faster page load times and a better visual experience.
An example of a <img> element using the srcset attribute is the following:
<img
srcset="bird.jpeg 1x, bird-2x.jpeg 2x, bird-3x.jpeg 3x, bird-4x.jpeg 4x"
src="bird.jpeg"
>
However, manually writing values for the srcset attribute can be a tedious and error-prone process:
This is where imglab and the new automatic srcset generation feature come into play, saving you time and reducing the chance of errors:
Using responsive images is more complex than simply setting a value for the
srcsetattribute. For example, when defining a<img>element it is important to set a value for thewidthandheightattributes,sizesattribute must be set when using width descriptors, and many more details. In this post we will focus only on how to generate values for thesrcsetattribute, but keep in mind that defining successful responsive images for the Web will require many more details in addition to the assignment of this only attribute.
There are two modes of generating automatic values with imglab libraries for the srcset attribute, the fixed size mode and the fluid width mode:
width or height parameters, generating an string value for srcset using pixel density descriptors for each image candidate string. width parameter, generating a string value for srcset using width descriptors for each image candidate string. A special case within this mode is when no size value is specified and a default width sequence will be used. In the following sections we will focus on showing examples of the imglab library for JavaScript (imglab-js), you can find the same functionality implemented for the rest of our libraries.
When enough information is provided about the image output size (using width or height parameters) and the used values are fixed the Imglab.srcset function will generate a collection of image candidate strings with a default sequence of pixel density descriptors.
In the following example we are specifying a width fixed value of 600 pixels:
const Imglab = require('@imglab/core')
Imglab.srcset('play', 'bird.jpeg', { width: 600 })
Generating the following output including image candidate strings for pixel density between 1x and 6x:
https://play.imglab-cdn.net/bird.jpeg?width=600&dpr=1 1x,
https://play.imglab-cdn.net/bird.jpeg?width=600&dpr=2 2x,
https://play.imglab-cdn.net/bird.jpeg?width=600&dpr=3 3x,
https://play.imglab-cdn.net/bird.jpeg?width=600&dpr=4 4x,
https://play.imglab-cdn.net/bird.jpeg?width=600&dpr=5 5x,
https://play.imglab-cdn.net/bird.jpeg?width=600&dpr=6 6x
If we want to support a specific set of pixel densities we can use the dpr parameter. In the following example we are specifying an array of values:
Imglab.srcset(
'play',
'bird.jpeg',
{ width: 600, dpr: [1, 2, 3, 4] }
)
Generating an output with image candidate strings including pixel densities between 1x and 4x:
https://play.imglab-cdn.net/bird.jpeg?width=600&dpr=1 1x,
https://play.imglab-cdn.net/bird.jpeg?width=600&dpr=2 2x,
https://play.imglab-cdn.net/bird.jpeg?width=600&dpr=3 3x,
https://play.imglab-cdn.net/bird.jpeg?width=600&dpr=4 4x
It is also possible to use Imglab.range instead of an array to define a range of values:
const range = Imglab.range
Imglab.srcset(
'play',
'bird.jpeg',
{ width: 600, dpr: range(1, 3) }
)
Generating image candidate strings with pixel densities between 1x and 3x:
https://play.imglab-cdn.net/bird.jpeg?width=600&dpr=1 1x,
https://play.imglab-cdn.net/bird.jpeg?width=600&dpr=2 2x,
https://play.imglab-cdn.net/bird.jpeg?width=600&dpr=3 3x
When instead of a fixed value for width parameter we specify an array, Imglab.range or Imglab.sequence , the Imglab.srcset function will generate a collection of image candidate strings using width descriptors.
For the following example we are setting an array of values for width parameter:
Imglab.srcset('play', 'bird.jpeg', { width: [600, 1200, 2400] })Generating the following output:
https://play.imglab-cdn.net/bird.jpeg?width=600 600w,
https://play.imglab-cdn.net/bird.jpeg?width=1200 1200w,
https://play.imglab-cdn.net/bird.jpeg?width=2400 2400w
It is also possible to use a range with Imglab.range function. In the following example we will use a range between 600 and 2400 pixels:
Imglab.srcset('play', 'bird.jpeg', { width: range(600, 2400) })
When a range is used a default sequence of 16 image candidate strings will be generated inside the specified range of values. In this case between 600w and 2400w:
https://play.imglab-cdn.net/bird.jpeg?width=600 600w,
https://play.imglab-cdn.net/bird.jpeg?width=658 658w,
https://play.imglab-cdn.net/bird.jpeg?width=722 722w,
https://play.imglab-cdn.net/bird.jpeg?width=792 792w,
https://play.imglab-cdn.net/bird.jpeg?width=868 868w,
https://play.imglab-cdn.net/bird.jpeg?width=952 952w,
https://play.imglab-cdn.net/bird.jpeg?width=1045 1045w,
https://play.imglab-cdn.net/bird.jpeg?width=1146 1146w,
https://play.imglab-cdn.net/bird.jpeg?width=1257 1257w,
https://play.imglab-cdn.net/bird.jpeg?width=1378 1378w,
https://play.imglab-cdn.net/bird.jpeg?width=1512 1512w,
https://play.imglab-cdn.net/bird.jpeg?width=1658 1658w,
https://play.imglab-cdn.net/bird.jpeg?width=1819 1819w,
https://play.imglab-cdn.net/bird.jpeg?width=1995 1995w,
https://play.imglab-cdn.net/bird.jpeg?width=2188 2188w,
https://play.imglab-cdn.net/bird.jpeg?width=2400 2400w
If a different number of image candidate strings are required you can use Imglab.sequence to generate a specific sequence. In the following example we will generate a sequence of 4 strings instead of the default 16 for the same previous range:
const sequence = Imglab.sequence
Imglab.srcset('play', 'bird.jpeg', { width: sequence(600, 2400, 4) })https://play.imglab-cdn.net/bird.jpeg?width=600 600w,
https://play.imglab-cdn.net/bird.jpeg?width=952 952w,
https://play.imglab-cdn.net/bird.jpeg?width=1512 1512w,
https://play.imglab-cdn.net/bird.jpeg?width=2400 2400w
A special case for fluid width mode is when no values are set for width or height parameters. In this scenario a default sequence of 16 image candidate strings will be generated using width descriptors in the range of 100w to 8192w.
In the following example we are not setting any size value:
Imglab.srcset('play', 'bird.jpeg')
Generating the following output with 16 image candidates strings and using width descriptors in the range 100w to 8192w:
https://play.imglab-cdn.net/bird.jpeg?width=100 100w,
https://play.imglab-cdn.net/bird.jpeg?width=134 134w,
https://play.imglab-cdn.net/bird.jpeg?width=180 180w,
https://play.imglab-cdn.net/bird.jpeg?width=241 241w,
https://play.imglab-cdn.net/bird.jpeg?width=324 324w,
https://play.imglab-cdn.net/bird.jpeg?width=434 434w,
https://play.imglab-cdn.net/bird.jpeg?width=583 583w,
https://play.imglab-cdn.net/bird.jpeg?width=781 781w,
https://play.imglab-cdn.net/bird.jpeg?width=1048 1048w,
https://play.imglab-cdn.net/bird.jpeg?width=1406 1406w,
https://play.imglab-cdn.net/bird.jpeg?width=1886 1886w,
https://play.imglab-cdn.net/bird.jpeg?width=2530 2530w,
https://play.imglab-cdn.net/bird.jpeg?width=3394 3394w,
https://play.imglab-cdn.net/bird.jpeg?width=4553 4553w,
https://play.imglab-cdn.net/bird.jpeg?width=6107 6107w,
https://play.imglab-cdn.net/bird.jpeg?width=8192 8192wThis case is especially useful to generate generic responsive images with good performance for any screen size and pixel density, allowing the browser to select the most appropriate image to display.
A widely used technique to optimize the size of image files is to reduce the quality of images with high pixel density. This can be achieved by using an array or Imglab.range function with quality parameter, gradually reducing the quality and file size while increasing the image resolution in pixels.
In the following example we are using a quality range between 80 and 40 using Imglab.range function:
Imglab.srcset('play', 'bird.jpeg', { width: 600, quality: range(80, 40) })
The generated output will generate image candidate strings starting with a quality of 80 and gradually reducing it until 40:
https://play.imglab-cdn.net/bird.jpeg?width=600&quality=80&dpr=1 1x,
https://play.imglab-cdn.net/bird.jpeg?width=600&quality=70&dpr=2 2x,
https://play.imglab-cdn.net/bird.jpeg?width=600&quality=61&dpr=3 3x,
https://play.imglab-cdn.net/bird.jpeg?width=600&quality=53&dpr=4 4x,
https://play.imglab-cdn.net/bird.jpeg?width=600&quality=46&dpr=5 5x,
https://play.imglab-cdn.net/bird.jpeg?width=600&quality=40&dpr=6 6x
If necessary is possible to use a range of values for quality and dpr at the same time. In the following example we are setting a range of values for quality between 80 and 50 while we use a range between 1 and 4 for dpr:
Imglab.srcset(
'play',
'bird.jpeg',
{ width: 600, quality: range(80, 50), dpr: range(1, 4) }
)
This will generate an output with image candidate strings using the specified range of qualities and using width descriptors between 1x and 4x:
https://play.imglab-cdn.net/bird.jpeg?width=600&quality=80&dpr=1 1x,
https://play.imglab-cdn.net/bird.jpeg?width=600&quality=68&dpr=2 2x,
https://play.imglab-cdn.net/bird.jpeg?width=600&quality=58&dpr=3 3x,
https://play.imglab-cdn.net/bird.jpeg?width=600&quality=50&dpr=4 4x
It is also possible to use a specific array of values for quality and dpr parameters:
Imglab.srcset(
'play',
'bird.jpeg',
{ width: 600, quality: [80, 70, 60], dpr: [1, 2, 3] }
)https://play.imglab-cdn.net/bird.jpeg?width=600&quality=80&dpr=1 1x,
https://play.imglab-cdn.net/bird.jpeg?width=600&quality=70&dpr=2 2x,
https://play.imglab-cdn.net/bird.jpeg?width=600&quality=60&dpr=3 3x
Fluid quality works with both modes (fixed size and fluid width). Let's use it with an explicit array of values for width parameter (fluid with mode):
Imglab.srcset(
'play',
'bird.jpeg',
{ width: [600, 1200, 2400], quality: [80, 70, 60] }
)Generating the following output:
https://play.imglab-cdn.net/bird.jpeg?width=600&quality=80 600w,
https://play.imglab-cdn.net/bird.jpeg?width=1200&quality=70 1200w,
https://play.imglab-cdn.net/bird.jpeg?width=2400&quality=60 2400w
Imglab.srcset function works similarly to Imglab.url so you can use any imglab supported parameter to generate your images.
In the following example we are setting a fixed value for width parameter, additionally we are setting values for aspect-ratio, mode, and format:
Imglab.srcset(
'play',
'bird.jpeg',
{ width: 600, aspectRatio: "1:1", mode: 'crop', format: 'webp' }
)The following output will be generated:
https://play.imglab-cdn.net/bird.jpeg?width=600&aspect-ratio=1%3A1&mode=crop&format=webp&dpr=1 1x,
https://play.imglab-cdn.net/bird.jpeg?width=600&aspect-ratio=1%3A1&mode=crop&format=webp&dpr=2 2x,
https://play.imglab-cdn.net/bird.jpeg?width=600&aspect-ratio=1%3A1&mode=crop&format=webp&dpr=3 3x,
https://play.imglab-cdn.net/bird.jpeg?width=600&aspect-ratio=1%3A1&mode=crop&format=webp&dpr=4 4x,
https://play.imglab-cdn.net/bird.jpeg?width=600&aspect-ratio=1%3A1&mode=crop&format=webp&dpr=5 5x,
https://play.imglab-cdn.net/bird.jpeg?width=600&aspect-ratio=1%3A1&mode=crop&format=webp&dpr=6 6x
In this post, we demonstrated the simplicity of generating values for the srcset attribute using the Imglab.srcset function. However, this is just the tip of the iceberg in terms of the capabilities of this function. For a deeper understanding of its functionality, we recommend consulting the documentation available in our integration library repositories.
If you have questions about this or other features related to imglab services we are available at our contact page or you can send us an email to [email protected]