
Research
Two Malicious Rust Crates Impersonate Popular Logger to Steal Wallet Keys
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.
@mapbox/appropriate-images
Advanced tools
Generate appropriately resized and optimized images for your website, using a configuration object that can be shared with client-side libraries.
Images are resized with sharp, then each size variant is optimized (including the creation of a webp
version) with imagemin plugins.
@mapbox/appropriate-images-get-url can then be used in the browser to determine which size variant of an image to render, at run time, given an image configuration and the available width.
@mapbox/appropriate-images-react can be used to do this in React, with a component that automatically measures its own available width.
npm install @mapbox/appropriate-images
appropriateImages.generate(imageConfig, [options])
Returns a Promise that resolves with an array of filenames for the resized and optimized images that have been written to your output directory.
When the Promise rejects, it may reject with a single error or an array of errors.
For each image this function will:
png
) and webp
.Output filenames have suffixes corresponding to the size of the variant. For example, with the following property in your image configuration:
{
bear: {
basename: 'bear.png',
sizes: [
{ width: 300 },
{ width: 600, height: 200 }
]
}
/* ... */
}
You will get files with the following basenames:
bear-300.png
bear-300.webp
bear-600x200.png
bear-600x200.webp
// Example
const appropriateImages = require('@mapbox/appropriate-images');
const myImageConfig = require('../path/to/my/image/config.js');
appropriateImages.generate(myImageConfig, {
inputDirectory: '../path/to/my/source/image/directory/',
outputDirectory: '../path/to/directory/where/i/want/resized/optimized/images/'
})
.then(output => {
console.log('You generated all these images:');
console.log(output);
}).catch(errors => {
if (Array.isArray(errors)) {
errors.forEach(err => console.error(err.stack));
} else {
console.error(errors.stack);
}
});
Type: Object
.
An image configuration object. Options for this configuration are documented below.
Type: string
.
Required.
Path to your directory of source images.
Each basename
in your image configuration should be relative to this directory.
Type: string
.
Required.
Path to the directory where resized, optimized images should be written.
Type: Array<string>
.
Ids of images to be processed. Image ids correspond to keys in the image configuration. If this option not provided, all images in the configuration will be processed.
Type: Object
.
Options for imagemin-pngquant.
Type: Object
.
Type: Object
.
appropriateImages.createCli(imageConfig, [options])
Executes a CLI for your specific directory structure.
The CLI runs generate
using your specified configuration.
It provides a quick way to generate and re-generate images, with nice error handling.
The arguments are the same as for generate
.
appropriate-images exposes the createCli
function instead of an actual CLI because it is not convenient to completely configure generate
from the command line, and your configuration should stay constant within a project.
With createCli
, you can define your configuration within a JS file, then run that JS file as a CLI.
#!/usr/bin/env node
'use strict';
const appropriateImages = require('@mapbox/appropriate-images');
const myImageConfig = require('../path/to/my/image/config.js');
const myOptions = {
inputDirectory: '../path/to/my/source/image/directory/',
outputDirectory: '../path/to/directory/where/i/want/resized/optimized/images/'
};
appropriateImages.createCli(myImageConfig, myOptions);
Don't forget to chmod +x path/to/file
to make it executable.
Then you can run it as a CLI:
my-appropriate-images horse bear pig
my-appropriate-images --all --quiet
The image configuration is an object. For every property:
Each image's configuration object includes the following properties.
Type string
.
Required.
The path from options.inputDirectory
to the image (including the image's extension).
Type: Array<Object>
.
Required.
An array of objects representing sizes. Each size must include a width
, and can optionally include other properties.
Type: number
.
Required.
A width for the generated image.
Type: number
.
A height for the generated image.
If no height
is provided, the width
is used and the image's aspect ratio is preserved.
If a height
is provided and it does not fit the image's aspect ratio, the image will be cropped.
Type: object
.
Default: { fit: "cover" }
Defines the manner how the image should fit if both width
and height
are provided. See resize.
6.1.0
FAQs
Get appropriately sized images into your website.
The npm package @mapbox/appropriate-images receives a total of 21 weekly downloads. As such, @mapbox/appropriate-images popularity was classified as not popular.
We found that @mapbox/appropriate-images demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 28 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.
Research
A malicious package uses a QR code as steganography in an innovative technique.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.