$ Namespace
An extended Cheerio engine containing specific $ namespace methods for performance optimizations.
.optimizeImg([opts]) 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
|
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>.quality(quality) 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>