Skip to main content

Image Optimization

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

Images on websites do not automatically scale and when they do, it usually creates is havoc. A couple of common use cases which utilise special design techniques through CSS or JavaScript could work but there are other issues with that too, like file size.

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.

What OnePlugin Fields does?#

OnePlugin Fields automatically cre­ates & opti­mizes these images using native Craft trans­forms for all the images that are uploaded via the plugin. These respon­sive image trans­forms are cre­at­ed when an asset is saved, rather than at page load time, to ensure that fron­tend per­for­mance 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.