Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@mapbox/appropriate-images
Advanced tools
Changelog
6.1.0
Readme
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.
FAQs
Get appropriately sized images into your website.
The npm package @mapbox/appropriate-images receives a total of 110 weekly downloads. As such, @mapbox/appropriate-images popularity was classified as not popular.
We found that @mapbox/appropriate-images demonstrated a healthy version release cadence and project activity because the last version was released less than 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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.