Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including uploadcare-picture with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var uploadcarePicture = require("uploadcare-picture")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

uploadcare-picture v1.1.0

Create responsive picture with Uploadcare CDN.

Uploadcare Picture

This is an Uploadcare responsive <picture> component. It provides more control over image behavior: you can adjust image sizes to different media queries, control output formats, etc.

You also get:

NPM version Build Status Code coverage devDependencies Uploadcare stack on StackShare


You can get the component via npm:

npm install uploadcare-picture

You would not need an Uploadcare account for testing purposes: just use UUIDs provided in this readme. However, implementing the component requires you to have an Uploadcare account; you can get one here.


The function can be used directly or through one of the adapters.

import getPictureObject from 'uploadcare-picture'

const uuid = '18d1c520-c52d-4c34-82a0-7e07dcbcf105'
const options = {
  sizes: {
    '(max-width: 1024px)': '768px',
    'default': '1024px'
  formats: ['jpg', 'webp'],
  name: 'example'
const picture = getPictureObject(uuid, options)

The function provides an object in the output, like this:

  sources: [
      srcset: ` 1x, 2x`,
      type: 'image/webp',
      media: '(max-width: 1024px)',
      sizes: '768px',
      srcset: ` 1x, 2x`,
      type: 'image/webp',
      sizes: '1024px',
      srcset: ` 1x, 2x`,
      type: 'image/jpg',
      media: '(max-width: 1024px)',
      sizes: '768px',
      srcset: ` 1x, 2x`,
      type: 'image/jpg',
      sizes: '1024px',
  image: {
    alt: 'example',
    src: ``,
    srcset: ` 2x`,
    sizes: '1024px',

You can further transpile such objects to <picture> via any library or framework you like.


width string|number

Required, if not set sizes.default.

Sets the width of an <img /> element.

sizes object

Required, if not set width.

Keys in the object are media queries while sizes define your picture dimensions for them.

formats array<string>

Optional, default values is ['auto'].

An array holding the allowed formats for your picture sources.

pixel_density array<number|string>|number|string

Optional, default value is [1, 2].

An array of pixel density value(-s) for resizing your picture sources.

name string


An RFC3986-compliant filename.



import UploadcarePicture from 'uploadcare-picture/adapters/jsx'

const Picture = () =>
    formats={['webp', 'jpg']}
      '(max-width: 1024px)': '768px',
      'default': 1024,
    name='example' />


import {configure} from 'nunjucks'
import UploadcarePicture from 'uploadcare-picture/adapters/nunjucks'

const nunjucks = configure('templates', {autoescape: false})

nunjucks.addExtension('UploadcarePicture', new UploadcarePicture())

const template = `{% uploadcarePicture
  formats=['webp', 'jpg'],
    '(max-width: 1024px)': 768,
    'default': 1024

const picture = nunjucks.renderString(template)


Run linters and tests

npm test


GitHub issues and PRs are welcome. You can also post any questions around the UC Community Area.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free