Picture
The HTML5 <picture> element is a container used to specify multiple images for different viewport or screen resolutions.
The browser will choose the most suitable image according to the current layout of the page and the device it will be displayed on.
You can specify different images for breakpoints. It also supports high resolution displays using pixel density descriptors such as 1x, 1.5x, 2x, and 3x.
For example you can include different versions of the image by using names like: filename@1.5x.png, filename@2x.png
The Picture object supports rotation using standard CSS3 transforms. It also has experimental support for CSS3 filters (blur, contrast, brightness, hue, saturation, negative, sepia, grayscale)
The HTML5 <picture> element is a container used to specify multiple images for different viewport or screen resolutions.
The browser will choose the most suitable image according to the current layout of the page and the device it will be displayed on.
You can specify different images for breakpoints. It also supports high resolution displays using pixel density descriptors such as 1x, 1.5x, 2x, and 3x.
For example you can include different versions of the image by using names like: filename@1.5x.png, filename@2x.png
The Picture object supports rotation using standard CSS3 transforms. It also has experimental support for CSS3 filters (blur, contrast, brightness, hue, saturation, negative, sepia, grayscale)
How is the Picture object different than the standard Image object?
A standard Image only supports 1 image which is the same in all breakpoints and for all resolutions. With the picture object you can specify a different image for each breakpoint and for different resolutions.
If you apply a filter to a standard image then a modified version of that image will be published, the image will be processed by the application. If you apply a filter to a Picture then the effect will be processed by the browser. The original image(s) will be published.
The Image object supports many different filters unique to Quick 'n Easy Web Builder, the Picture only support standard CSS filters.
A standard Image only supports 1 image which is the same in all breakpoints and for all resolutions. With the picture object you can specify a different image for each breakpoint and for different resolutions.
If you apply a filter to a standard image then a modified version of that image will be published, the image will be processed by the application. If you apply a filter to a Picture then the effect will be processed by the browser. The original image(s) will be published.
The Image object supports many different filters unique to Quick 'n Easy Web Builder, the Picture only support standard CSS filters.
