Menu Developer Moovweb University

$ Namespace

An extended Cheerio engine containing specific $ namespace methods for performance optimizations.


.optimizeImg([opts])
moov_perf
Source (L75)

Modifies the `src` attribute of selected `img` tags to run through Moovweb's image-optimization service at opt.moovweb.net, which provides configurable settings for optimizing images. Utilizes Perf's `.optimizeImageAttributes()` method for each element in the matched set in order to rewrite all `src` attribute URLs to the opt.moovweb.net optimizer, with the given settings.

Parameters

Name Type Description
[ opts ] Object Optional. An object containing optimization options. The default options object contains the settings that come from Perf's `.optimizeImageAttribs()` method (the list of attributes attached to the input node, along with the settings `{ link_encoded: false, preserve_aspect: true }`, unless the host is blacklisted, in which case, the object only contains `bypass_attributes: true`, a reserved property-value pair for knowing not to set height or width HTML attributes). The usable attributes (that get passed in to other Perf methods) are as follows:
Properties
Name Type Description
[ width ] Number | String Optional. A number or a string containing the number for the desired pixel width.
[ height ] Number | String Optional. A number or string containing the number for the desired pixel height.
[ link_encoded ] Boolean Optional. A boolean for whether the link should be base64-encoded.
[ preserve_aspect ] Boolean Optional. A boolean for whether the aspect ratio should be preserved, provded that only one dimension is given. If both dimensions are given, width is given priority. If both dimensions are set, this setting is ignored.
[ quality ] Number | String Optional. A number or string containing the number for the desired quality, on a scale from 1 (worst) to 100 (best).
[ format ] String Optional. A string containing the desired file format. Options include jpg, png, and webp.

Return Value

The updated form of the original Cheerio matched-set. object.

Examples

const Perf = require("moov_perf");
let perf = new Perf($);
$body.find("img").optimizeImg();
// => HTML input:
//    <body>
//      <img src="http://www.bing.com/img.jpeg" alt="selfie">
//    </body>
// => Returns: original object associated with $body.find("img")
// => HTML output:
//    <body>
//      <img src="//opt.moovweb.net/img?img=http%3A%2F%2Fwww.bing.com%2Fimg.jpeg&linkEncoded=0&preserve_aspect=1" alt="selfie">
//    </body>
const Perf = require("moov_perf");
let perf = new Perf($);
perf.ignore("http://www.google.com/");
$body.find("img").optimizeImg({
  height: 666,
  width: 777,
  quality: 88,
  format: 'webp'
});
// => HTML input:
//    <body>
//      <img src="http://www.bing.com/img.jpeg" alt="selfie">
//      <img src="http://www.google.com/img.jpeg" alt="selfie">
//    </body>
// => Returns: original object associated with $body.find("img")
// => HTML output:
//    <body>
//      <img src="//opt.moovweb.net/img?img=http%3A%2F%2Fwww.bing.com%2Fimg.jpeg&linkEncoded=0&width=777&height=666&preserve_aspect=1&quality=88&format=webp" alt="selfie" height="666" width="777" quality="88" format="webp">
//      <img src="http://www.google.com/img.jpeg" alt="selfie" height="666" width="777" quality="88" format="webp">
//    </body>
const Perf = require("moov_perf");
let perf = new Perf($);
$body.find("img").optimizeImg({
  width: 777,
  quality: 88,
  preserve_aspect: false,
  link_encoded: true
});
// => HTML input:
//    <body>
//      <img src="http://www.bing.com/img.jpeg" alt="selfie">
//    </body>
// => Returns: original object associated with $body.find("img")
// => HTML output:
//    <body>
//      <img src="//opt.moovweb.net/img?img=aHR0cDovL3d3dy5iaW5nLmNvbS9pbWcuanBlZw==&linkEncoded=1&width=777&quality=80" alt="selfie" width="777" quality="80" preserve_aspect="false" link_encoded="true">
//    </body>

Back to top


.quality(quality)
moov_perf
Source (L21)

Sets the quality for an optimized image as an alternative shorthand to the quality setting as a second object parameter to `.optimizeImg()`. This sets the quality as an HTML attribute, which can then be read by the opt.moovweb.net optimizer application as a way to dramatically reduce image quality without reducing fidelity. This should come before any call to `.optimizeImg()`.

Parameters

Name Type Description
quality String | Number A number or string containing the number for the desired quality from 1 (worst) to 100 (best).

Return Value

The updated form of the original Cheerio matched-set object.

Examples

const Perf = require("moov_perf");
let perf = new Perf($);
$body.find("img").quality("88");
// => HTML input:
//    <body>
//      <img src="http://www.bing.com/img.jpeg" alt="selfie">
//    </body>
// => Returns: original object associated with $body.find("img")
// => HTML output:
//    <body>
//      <img src="http://www.bing.com/img.jpeg" alt="selfie" quality="88">
//    </body>
const Perf = require("moov_perf");
let perf = new Perf($);
$body.find("img").quality("88").optimizeImg();
// => HTML input:
//    <body>
//      <img src="http://www.bing.com/img.jpeg" alt="selfie">
//    </body>
// => Returns: original object associated with $body.find("img")
// => HTML output:
//    <body>
//      <img src="//opt.moovweb.net/img?img=http%3A%2F%2Fwww.bing.com%2Fimg.jpeg&linkEncoded=0&preserve_aspect=1&quality=88" alt="selfie" quality="88">
//    </body>

Back to top


Last updated Tue Nov 15 2016 22:28:30 GMT+0000 (UTC)