Future-proof your static resources with a single line of code

Installation - NPM

npm i transcoded-client

Usage

The package requires that you have obtained a free Transcoded ID from our website, for access to transforms, storage and distribution of transcoded resources.

This ID must be passed, with the original resource URL and any options, to the resource constructor.

Options should be in the following format:

const options = {
    userAgent: <string>, //optional on client side, required in Node server side implementations
    width: <number>, //optional, default original width, sets required pixel width of resource
    quality: <number> //optional, default 80, sets required quality (and file size) of resource
};

Any errors in implementation will log to the console as warnings and the resource will fail over to the original URL, where possible.

Example - Node

const Transcoded = require('transcoded-client');

const exampleImageSrc = 'https://www.example/com/image1.jpg';

const options = {
    //Usage in Node requires a user agent string
    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36'
};

const futureProofSrc = Transcoded.imageSrc(exampleImageSrc, <TranscodedID>, options);

Example - ES6 (React)

import { imageSrc } from 'transcoded-client';

const small = '300.jpg';
const medium = '768.jpg';
const large = '1280.jpg';

//User agent string is not required in client side operations

const FutureProofResponsiveImage = () => (
    <img
        src={imageSrc(small, <TranscodedID>)}
        srcSet={`${imageSrc(small, <TranscodedID>)} 300w, ${imageSrc(medium, <TranscodedID>)} 768w, ${imageSrc(large, <TranscodedID>)} 1280w`}
    />
);

Example - Browser

<script src="https://unpkg.com/[email protected]"></script>

Browser usage in this fashion is currently blocked by an upstream dependency and will be offered in a future version.