Responsive web design (RWD) or responsive design is an approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction.Wikipedia
To explain where the problem lies, let’s look at it this way. Having a high-resolution image on your 4K display looks really awesome with all the details but what happens when you view it on your mobile device? It is possible that your mobile device has a 4K display but you would miss a lot of the details. As the image is shrunk down to fit the mobile device, you miss the vital information that is being communicated. But what if, instead there is a scaled down or cropped version with the message just for your mobile device. Awesome right? Yeah.
Having several versions of your images to suit the difference device categories is important. Typically you would have an extra large version, a large version, a version for a medium-sized screen and another for mobile devices. You then have to tell the browser how to respond in case of changes i.e. telling the browser; use the medium-sized version for a tablet screen or an extra-large for a 4K monitor.
This can be handled by using the
picture tag, where you can specify the different images to be served in different screen sizes.
OnePlugin Fields automatically creates & optimizes these images using native Craft transforms for all the images that are uploaded via the plugin. These responsive image transforms are created when an asset is saved, rather than at page load time, to ensure that frontend performance is optimal. OnePlugin Fields outputs image tags using
picture element as the default option letting browsers decide which image set they want to use based on the device dimensions.
You can specify the settings to be used for creating image transforms in the Settings page.
You can checkout the generated image variants by double clicking the asset in the Control Panel.