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:

<div data-pb-picture
    data-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"/>

when you run picture() function from the library:

    window.Pixboost.picture({apiKey: 'API_KEY'})

then inserted <picture> tag will be:

<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

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-picture
    data-url="https://yoursite.com/doggy.png"
    data-lg="optimise"
    data-md="resize?size=300"
    data-sm="fit?size=100x100"/>

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

results matching ""

    No results matching ""