a responsive image is an image which is displayed in its best form on a web page, depending on the device your website is being viewed from.
One of the modern way to serve quickly responsive images is to benefit from the
srcset html attribute. Shortly, depending on parameters and your viewport (i.e. browser window) the
srcset attribute will tell the browser to download the best appropriate image for the current display.
For example, if you put the following HTML element
Your server logic can serve up to four different images representing the same pictures.
You may guess that creating all this different resized pictures can be painful manually. In this blog post we propose the following Powershell script to help you for the automation of this task.
Now you can simply invoke the script like this:
.\SrcsetBuilder.ps1 "..\images\MyImage.jpg" 85. Then all generated images: MyImage-200.jpg, MyImage-400.jpg, MyImage-600.jpg, MyImage-800.jpg are located next to MyImage.jpg.
You can modify the generated images widths by changing the values in the array
$canvasWidths (line 11).