Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.

Stars: ✭ 6,596 (+615.4%)

Mutual labels: images

Lepto

Automated image Editing, Optimization and Analysis via CLI and a web interface. You give to lepto your input and output directories, the plugins you want to use and their options. Then lepto does his job, you keep your original files and the structure of the input directory. Some plugins can even collect data (like primary colors) from your images and save them in a JSON file.

Stars: ✭ 490 (-46.85%)

Mutual labels: images

Alchemy

🔮 File conversion, all from the menu bar

Stars: ✭ 815 (-11.61%)

Mutual labels: images

Laravel Medialibrary

Associate files with Eloquent models

Stars: ✭ 4,743 (+414.43%)

Mutual labels: images

Coil

Image loading for Android backed by Kotlin Coroutines.

Stars: ✭ 7,469 (+710.09%)

Mutual labels: images

Imgix Swift

A Swift client library for generating URLs with imgix

Stars: ✭ 19 (-97.94%)

Mutual labels: images

React Native Cached Image

CachedImage component for react-native

Stars: ✭ 890 (-3.47%)

Mutual labels: images

Garbro

Visual Novels resource browser

Stars: ✭ 764 (-17.14%)

Mutual labels: images

View All Similar Projects ➔

imgix.js is a dependency-free JavaScript library for the browser that allows for easy integration of imgix into websites.

Overview / Resources
Installation
Configuration
Usage
Advanced Usage
- Overriding ix-host
- Disabling auto-initialization
- Manually initializing imgix.js
- imgix.init() idempotency
- [Lazy Loading With lazysizes](#lazy-loading-with-lazysizeshttpsgithubcomafarkaslazysizes)
- Custom Input Attributes
- Null Output Attributes
- Base-64 encoded parameters
- Default parameters
- What is the ixlib param?
Browser Support
Meta
License

Overview / Resources

imgix.js allows developers to easily generate responsive images using the srcset and sizes attributes, or the picture element. This lets you write a single image URL that is parsed and used to make images look great at any screen size, by using imgix to process and resize your images on the fly.

Note: imgix.js is designed to run in the browser, manipulating existing <img> elements on an HTML page. If you're looking for a JavaScript library that can programmatically generate imgix URLs, consider using imgix-core-js instead.

Before getting started with imgix.js, it is highly recommended that you read Eric Portis' seminal article on srcset and sizes. This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of imgix.js is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your imgix.js experience.

Below are some other articles that help explain responsive imagery, and how it can work alongside imgix:

Using imgix with <picture>. Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.
Responsive Images with srcset and imgix. A look into how imgix can work with srcset and sizes to serve the right image.

Installation

There are several ways to install imgix.js. The appropriate method depends on your project.

npm: npm install --save imgix.js
Bower: bower install --save imgix.js
Manual: Download the latest release of imgix.js, and use dist/imgix.js or dist/imgix.min.js.

If your build process will re-run dist/imgix.js or dist/imgix.min.js through Browserify, you'll need to add noParse: [require.resolve('imgix.js')] to your Browserify config. If you skip this, Browserify will attempt to re-require imgix.js' dependencies, which have already been inlined.

Once imgix.js has been included on the page, it will automatically run once, after the DOMContentLoaded event fires. This will detect and process all img, picture, and source tags on the page that are set up to use imgix.js as described in the Usage section of this README.

Configuration

imgix.js has two important global options:

host: A string corresponding to the desired imgix hostname (defaults to null). This enables the use of ix-path and ix-params to define images, instead of having to manually provide URLs out in ix-src. See the ix-path and ix-params section below for details.
useHttps: A boolean (defaults to true), specifying whether to generate http or https-prefixed URLs.

These configuration options (as well as other options described in the "Advanced Usage" section) can be defined in two ways. The easiest way is to specify them with meta tags in your document's <head>:

<head>
  <meta property="ix:host" content="assets.imgix.net">
  <meta property="ix:useHttps" content="true">
</head>

The other way is to manually set these options on the imgix.config object. Note that these options should be set after loading imgix.js, but before the DOMContentLoaded event is fired on the page:

<script src="imgix.js"></script>
<script>
  imgix.config.host = 'assets.imgix.net';
  imgix.config.useHttps = false;
</script>

Usage

After installation and set up are complete, one can begin adding responsive images to the page through one of few ways:

`ix-src`

Creates an img tag with the ix-src attribute:

<img
  ix-src="https://assets.imgix.net/unsplash/hotairballoon.jpg?w=300&amp;h=500&amp;fit=crop&amp;crop=right"
  alt="A hot air balloon on a sunny day"
  sizes="100vw"
>

Please note: 100vw is an appropriate sizes value for a full-bleed image. If your image is not full-bleed, you should use a different value for sizes. Eric Portis' "Srcset and sizes" article goes into depth on how to use the sizes attribute.

This will generate HTML something like the following:

<img
  ix-src="https://assets.imgix.net/unsplash/hotairballoon.jpg?w=300&amp;h=500&amp;fit=crop&amp;crop=right"
  alt="A hot air balloon on a sunny day"
  sizes="100vw"
  srcset="
    https://assets.imgix.net/unsplash/hotairballoon.jpg?w=100&amp;h=167&amp;fit=crop&amp;crop=right 100w,
    https://assets.imgix.net/unsplash/hotairballoon.jpg?w=200&amp;h=333&amp;fit=crop&amp;crop=right 200w,
    …
    https://assets.imgix.net/unsplash/hotairballoon.jpg?w=2560&amp;h=4267&amp;fit=crop&amp;crop=right 2560w
  "
  src="https://assets.imgix.net/unsplash/hotairballoon.jpg?w=300&amp;h=500&amp;fit=crop&amp;crop=right"
  ix-initialized="ix-initialized"
>

Since imgix can generate as many derivative resolutions as needed, imgix.js calculates them programmatically, using the dimensions you specify (note that the w and h params scale appropriately to maintain the correct aspect ratio). All of this information has been placed into the srcset and sizes attributes. Because of this, imgix.js no longer needs to watch or change the img tag, as all responsiveness will be handled automatically by the browser as the page is resized.

`ix-path` and `ix-params`

If configured with a global host option, imgix.js can use the ix-path and ix-params attributes instead of ix-src. The ix-path attribute is used to specify the path to an image, and the ix-params attribute is used to define the imgix URL API parameters to be applied to the image. Using these two attributes instead of ix-src has several advantages:

ix-params automatically URL/Base64-encodes specified parameters, as appropriate.
ix-params is a JSON string, which is easier to read than a URL and can be generated by other tools if necessary.
Not having to re-type https://my-source.imgix.net helps keep code DRY.

Here's how the previous example would be written out using ix-path and ix-params instead of ix-src. Regardless of the method chosen, the end result in-browser will be the same.

<img
  ix-path="unsplash/hotairballoon.jpg"
  ix-params='{
    "w": 300,
    "h": 500,
    "fit": "crop",
    "crop": "right"
  }'
  alt="A hot air balloon on a sunny day"
>

Please note: ix-params must be a valid JSON string. This means that keys and string values must be surrounded by double quotes, e.g., "fit": "crop".

`picture` tags

If an art-directed image is desired, imgix.js plays nicely with the picture tag. This allows for specifying more advanced responsive images, by changing properties such as the crop and aspect ratio for different screens. To get started, construct a picture tag with a source attribute for each art-directed image, and a fallback img tag. If new to using the picture tag, consider reading our tutorial to learn more about how it works.

The source tags can be used with ix-src or ix-path and ix-params, just like img tags. The following example will generate HTML that displays Bert and Ernie on small screens, just Bert on medium-sized screens, and just Ernie on large screens.

<picture>
  <source
    media="(min-width: 880px)"
    sizes="430px"
    ix-path="imgixjs-demo-page/bertandernie.jpg"
    ix-params='{
      "w": 300,
      "h": 300,
      "fit": "crop",
      "crop": "left"
    }'
  >
  <source
    media="(min-width: 640px)"
    sizes="calc(100vw - 20px - 50%)"
    ix-path="imgixjs-demo-page/bertandernie.jpg"
    ix-params='{
      "w": 300,
      "h": 300,
      "fit": "crop",
      "crop": "right"
    }'
  >
  <source
    sizes="calc(100vw - 20px)"
    ix-path="imgixjs-demo-page/bertandernie.jpg"
    ix-params='{
      "w": 300,
      "h": 100,
      "fit": "crop"
    }'
  >
  <img ix-path="imgixjs-demo-page/bertandernie.jpg">
</picture>

Advanced Usage

Overriding `ix-host`

When displaying images between multiple imgix Sources, the host option can be overridden on any img or source tag by specifying an ix-host attribute in the tag:

<img
  ix-host="a-different-source.imgix.net"
  ix-path="unsplash/hotairballoon.jpg"
  ix-params='{
    "w": 300,
    "h": 500,
    "fit": "crop",
    "crop": "right"
  }'
  alt="A hot air balloon on a sunny day"
>

Disabling auto-initialization

By default, imgix.js will automatically run as soon as the DOMContentLoaded event fires, immediately processing all img and source tags on the page that are set up to use imgix.js. This auto-initialization behavior can be disabled by including the following meta tag in the document's head:

<head>
  <meta property="ix:autoInit" content="false">
</head>

Manually initializing imgix.js

If auto-initialization is disabled as described above, imgix.js will need to be run manually in order to process the img and source tags on the page. This can be done by invoking imgix.init().

When calling imgix.init(), a map of options can be passed in to override the global configuration settings. For example:

imgix.init({
  useHttps: false,
  host: 'a-different-source.imgix.net'
});

`imgix.init()` idempotency

Whether imgix.init() is run automatically when the DOMContentLoaded event fires or manually initialized, it will always be idempotent. This means that img and source tags that have already been processed by imgix.js will not be re-processed by subsequent calls.

However, if you would like to re-process all imgix.js-ready img and source tags, you can override the function's idempotency by calling imgix.init() again and passing in the force: true option:

imgix.init({
  force: true
})

Lazy Loading With lazysizes

If lazy loading images is desired, we recommend using lazysizes. In order to use imgix.js with lazysizes, generate images using lazysizes-compatible attributes instead of the standard src, srcset, and sizes by changing some configuration settings:

Using <meta> tags:

<head>
  <meta property="ix:srcAttribute" content="data-src">
  <meta property="ix:srcsetAttribute" content="data-srcset">
  <meta property="ix:sizesAttribute" content="data-sizes">
</head>

Using JavaScript:

imgix.config.srcAttribute = 'data-src';
imgix.config.srcsetAttribute = 'data-srcset';
imgix.config.sizesAttribute = 'data-sizes';

Custom Input Attributes

imgix.js defaults to pulling its data from the ix-src, ix-path, ix-params, and ix-host attributes. If custom input attributes are desired, they can be specified by changing some configuration settings. This can be useful if, say, there is a concern about W3C compliance.

Using <meta> tags:

<head>
  <meta property="ix:srcInputAttribute" content="data-ix-src">
  <meta property="ix:pathInputAttribute" content="data-ix-path">
  <meta property="ix:paramsInputAttribute" content="data-ix-params">
  <meta property="ix:hostInputAttribute" content="data-ix-host">
</head>

Using JavaScript:

imgix.config.srcInputAttribute = 'data-ix-src';
imgix.config.pathInputAttribute = 'data-ix-path';
imgix.config.paramsInputAttribute = 'data-ix-params';
imgix.config.hostInputAttribute = 'data-ix-host';

Null Output Attributes

In rare cases, it may be undesirable to have imgix.js modify the src, srcset, or sizes attributes of the <img> elements it's targeting. In such cases, the default behavior can be overridden by setting some configuration values to null:

Using <meta> tags:

<head>
  <meta property="ix:srcAttribute" content="">
  <meta property="ix:srcsetAttribute" content="">
  <meta property="ix:sizesAttribute" content="">
</head>

Using JavaScript:

imgix.config.srcAttribute = null;
imgix.config.srcsetAttribute = null;
imgix.config.sizesAttribute = null;

Base-64 encoded parameters

All of imgix's API parameters can be provided as Base64 variants. This is especially useful when providing text for the txt parameter, or URLs for parameters such as mark or blend.

When providing parameters via the ix-params attribute, note that the values for any Base64 variant parameters will be automatically base64-encoded by imgix.js, and can therefore be provided unencoded.

<img
  ix-path="unsplash/hotairballoon.jpg"
  ix-params='{
    "txt64": "Hello, World!"
  }'
  alt="A hot air balloon on a sunny day"
>

When providing a URL with parameters via the ix-src attribute, note that the values for any Base64 variant parameters will not be automatically base64-encoded by imgix.js.

<img
  ix-src="https://assets.imgix.net/unsplash/hotairballoon.jpg?txt64=SGVsbG8sIFdvcmxkIQ"
  alt="A hot air balloon on a sunny day"
  sizes="100vw"
>

Default parameters

If a default set of parameters are desired, they can be extracted out into a global config using imgix.defaultParameters. These settings will become the default paramters for each imgix tag globally, before any specific parameters are loaded from ix-params or ix-src

// setup
imgix.config.defaultParams = {
	auto: 'format,compress',
	fit: 'crop'
}

// later
<img
  ix-path="hero.png"
  ix-params='{"fit":"clip"}'
>

// becomes
<img src=".../hero.png?auto=format,compress&fit=clip">

What is the `ixlib` param?

For security and diagnostic purposes, we default to signing all requests with the language and version of library used to generate the URL. This can be disabled by setting the includeLibraryParam configuration option to false.

Using a <meta> tag:

<head>
  <meta property="ix:includeLibraryParam" content="false">
</head>

Using JavaScript:

imgix.config.includeLibraryParam = false;

Browser Support

By default, browsers that don't support srcset, sizes, or picture will gracefully fall back to the default img src when appropriate. If you want to provide a fully-responsive experience for these browsers, imgix.js works great alongside Picturefill!
If using Base64 variant params and require IE <= 9 support, we recommend using a polyfill for atob/btoa, such as Base64.js.

License

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 922

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (6) 🔗

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

imgix / Imgix.js

Programming Languages

Labels

Projects that are alternatives of or similar to Imgix.js

Overview / Resources

Installation

Configuration

Usage

ix-src

ix-path and ix-params

picture tags

Advanced Usage

Overriding ix-host

Disabling auto-initialization

Manually initializing imgix.js

imgix.init() idempotency

Lazy Loading With lazysizes

Custom Input Attributes

Null Output Attributes

Base-64 encoded parameters

Default parameters

What is the ixlib param?

Browser Support

Meta

License

`ix-src`

`ix-path` and `ix-params`

`picture` tags

Overriding `ix-host`

`imgix.init()` idempotency

What is the `ixlib` param?