Simple Image CDN

Simple and free image CDN

Install

yarn add simple-image-cdn

npm i simple-image-cdn

Usage

import getImageUrl from 'simple-image-cdn';

Example

const url = 'https://cdn.pixabay.com/photo/2016/03/27/18/54/technology-1283624_960_720.jpg';
const src = getImageUrl(url, {w: '100', h: '100', fit: 'cover' });

console.log(src)

//expect url:
//https://images.weserv.nl/?url=https%3A%2F%2Fcdn.pixabay.com%2Fphoto%2F2016%2F03%2F27%2F18%2F54%2Ftechnology-1283624_960_720.jpg&w=100&h=100&fit=cover

Options

Name	param	options	description	example
Width	w	Number (pixels)	Sets the width of the image, in pixels.	{w : 1080}
Height	h	Number (pixels)	Sets the height of the image, in pixels.	{h: 1080}
Fit	fit	cover, fill, contain, inside, outside, we	Set height of the image	{fit: 'cover'}
Device pixel ratio	dpr	Values between 1 and 8	The device pixel ratio is used to easily convert between CSS pixels and device pixels.	{dpr: 2}
Smart crop	a	>**entropy:** focus on the region with the highest. >**attention:** focus on the region with the highest luminance frequency, color saturation and presence of skin tones.	An experimental strategy-based approach to crop the image by removing boring parts. This only works with {fit : cover}	{fit : cover, a : attention}
Blur	blur	Use values between 0 and 100.	Adds a blur effect to the image.	{blur: 5}
Contrast	con	Use values between -100 and +100, where 0 represents no change.	Adjusts the image contrast.	{blur: 5}
Gamma	gam	Use values between 1 and 3. The default value is 2.2.	Adjusts the image gamma.	{gam: 3}
Brightness	mod	> '>1' will increase brightness > '< 1' will decrease the brightness.	Adjusts the brightness of the image.	{mod: 2}
Output	output	Accepts jpg, png, gif, tiff, webp or json.	Encodes the image to a specific format.	{output: 'jpg'}
Quality	q	Values between 0 and 100. Defaults to 85.	Defines the quality of the image. his only works when the output image is jpg, tiff or webp.	{q: 90}
Compression level	l	Use a value between 0 and 9.	The default value is 6. This only works when the output image is png	{l: 4}
Filename	filename	String	The filename must only contain alphanumeric characters.	{filename: "foto"}

You can get the full documentation here: https://images.weserv.nl/docs/

Limitation

You can only process 700 images per hour.

Special Thanks

We use Images.weserv.nl, a cool and free service. Checkout here: https://images.weserv.nl/