Quick Start

What is Mobify.js?

Mobify.js is an library for improving responsive sites
by providing responsive images, JS/CSS optimization, Adaptive
Templating and more. Mobify.js also provides a
“Capturing” API for manipulating the DOM before any resources have
loaded, giving developers the ability to enable the listed features above
without changing any backend markup.

Getting started

Let’s get started by using the Image API
(one of many APIs available in mobify.js)
to automatically resize and optimize images in your page.

Note: If you’re using this API locally and your images aren’t publicly
available, the original images will load. To see the images resize, try this
on an environment that is publicly available.

With Capturing

If you don’t want to have to worry about changing src attributes, you can let
Capturing take care of that for you. It requires
a special script tag that must
be placed after the opening <head> tag (must be placed above
any element that loads external resources!):
Unminified version on Github

If you have purchased a Mobify platform subscription, please head over to
cloud.mobify.com
to get your tag instead.

If you want to use the Image API
without Capturing, you must change
src to x-src (this is configurable) for every <img> and
<picture> element you have in your site (you
also may want to add <noscript> fallbacks if you’re worried
about browsers with JavaScript disabled/unavailable). This snippet will
load mobify.js asynchronously in order to be able to start loading images before
the DOM is ready.

Then, paste the following tag before </head>, or top of
<body>:

If you have purchased a Mobify platform subscription, please head over to
cloud.mobify.com
to get your tag instead.