1.4.5 • Published 3 years ago
transcoded-client v1.4.5
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/transcoded-client@1.4.2"></script>
Browser usage in this fashion is currently blocked by an upstream dependency and will be offered in a future version.