imgix.js Build Status

imgix.js is a dependency-free JavaScript library for the browser that allows you to easily use the imgix API to make images on your site responsive.

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 Frontend Libraries