Library replaces all elements that have data-pb-picture
attribute with <picture>
tag.
Picture tag will include different sources (images) for different CSS breakpoints (screen sizes).
For instance, for the element:
<div data-pb-picturedata-lg="optimise"data-lg-url="https://yoursite.com/doggy.png"data-md="resize?size=300"data-md-url="https://yoursite.com/doggy.png"data-sm="fit?size=100x100"data-sm-url="https://yoursite.com/doggy.png"></div>
when you run picture() function from the library:
window.Pixboost.picture({apiKey: 'API_KEY'})
then div
will be replaced with <picture>
tag:
<picture><source srcset="https://pixboost.com/api/2/img/https://yoursite.com/doggy.png/optimise?auth=API_KEY"media="(min-width: 990px)"><source srcset="https://pixboost.com/api/2/img/https://yoursite.com/doggy.png/resize?size=300&auth=API_KEY"media="(min-width: 640px)"><img src="https://pixboost.com/api/2/img/https://yoursite.com/doggy.png/fit?size=100x100&auth=API_KEY"></picture>
Operations (data-<BREAKPOINT>
attribute):
optimise
resize
fit
asis
hide
You can specify operation arguments by adding them after operation name, e.g. fit?size=100x100
See more about operations here.
If you have the same source image for all operations then you can specify default URL:
<div data-pb-picturedata-url="https://yoursite.com/doggy.png"data-lg="optimise"data-md="resize?size=300"data-sm="fit?size=100x100"></div>
You can specify alt text for responsive images using data-alt
attribute:
<div data-pb-picturedata-alt="doggy"data-url="https://yoursite.com/doggy.png"data-lg="optimise"data-md="resize?size=300"data-sm="fit?size=100x100"></div>
lg - Large devices (desktops, 990px and up) @media (min-width: 990px)
md - Medium devices (tablets, 640px and up) @media (min-width: 640px)
sm - Small devices - everything below tablets