Pixboost
Search…
Responsive Images
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:
1
<div data-pb-picture
2
data-lg="optimise"
3
data-lg-url="https://yoursite.com/doggy.png"
4
data-md="resize?size=300"
5
data-md-url="https://yoursite.com/doggy.png"
6
data-sm="fit?size=100x100"
7
data-sm-url="https://yoursite.com/doggy.png"></div>
Copied!
when you run picture() function from the library:
1
window.Pixboost.picture({apiKey: 'API_KEY'})
Copied!
then div will be replaced with <picture> tag:
1
<picture>
2
<source srcset="https://pixboost.com/api/2/img/https://yoursite.com/doggy.png/optimise?auth=API_KEY"
3
media="(min-width: 990px)">
4
<source srcset="https://pixboost.com/api/2/img/https://yoursite.com/doggy.png/resize?size=300&auth=API_KEY"
5
media="(min-width: 640px)">
6
<img src="https://pixboost.com/api/2/img/https://yoursite.com/doggy.png/fit?size=100x100&auth=API_KEY">
7
</picture>
Copied!

Operations

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:
1
<div data-pb-picture
2
data-url="https://yoursite.com/doggy.png"
3
data-lg="optimise"
4
data-md="resize?size=300"
5
data-sm="fit?size=100x100"></div>
Copied!

Alt text

You can specify alt text for responsive images using data-alt attribute:
1
<div data-pb-picture
2
data-alt="doggy"
3
data-url="https://yoursite.com/doggy.png"
4
data-lg="optimise"
5
data-md="resize?size=300"
6
data-sm="fit?size=100x100"></div>
Copied!

Supporting Breakpoints

  • 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