imgix.js Build Status

imgix.js is a dependency-free JavaScript library that allows you to easily use the imgix API

More examples and additional documentation for the imgix.js library can be found on GitHub at: https://github.com/imgix/imgix.js.

See a demo

Example

Using imgix.js with srcset for resolution switching

<img ix-src="https://assets.imgix.net/coffee.jpg?fit=crop&amp;crop=faces"
     sizes="(min-width: 768px) 540px, 100vw"
     alt="A woman drinking a cup of coffee at Sightglass">

Simplifying configuration with ix-path and ix-params

<img
    ix-path="coffee.jpg"
    ix-params='{
        "fit": "crop,
        "crop": "faces"
    }'
    ix-host="assets.imgix.net"
    sizes="(min-width: 768px) 540px, 100vw"
    alt="A woman drinking a cup of coffee at Sightglass"
>

Art Direction with <picture>

<picture>
  <!-- Wide crop -->
  <source
      media="(min-width: 768px)"
      sizes="640px"
      ix-path="unsplash/astronaut.jpg"
      ix-params='{
          "w": 1600,
          "h": 900
      }'
  >
  <!-- Square crop -->
  <source
      sizes="calc(100vw - 48px)"
      ix-path="unsplash/astronaut.jpg"
      ix-params='{
          "w": 300,
          "h": 300,
          "fit": "crop",
          "crop": "entropy"
      }'
  >
  <img ix-path="unsplash/astronaut.jpg">
</picture>

More tools