Optimised images with Cloudinary.

'react-cloudinary-lazy-image' is React component which cover "blur-up" effect, lazy-loading and formatting. The component is based on Gatsby image by Kyle Mathew, however instead of GraphQL and Gatsby it uses Cloudinary API. Have a speed and optimized gatsby-images without gatsby.

1. Downsize larger images to the size needed by your design - even on desktop there is no need to get as big image as possible.
2. Remove metadata from delivered images - by default images contain a lot of information useful for cameras and graphics applications, but not for web users.
3. Format images to newer formats like JPEG-XR and WebP - common formats like PNG, JPG or GIF are not optimised to be send wireless.
4. Lower image quality - many images have extra-high resolution, however it’s possible to lower quality without a significant visual impact.
5. Downsize images on smaller device - display images for mobile users faster as there is probably slower internet connection.
6. Lazy load images - allow images to download only when user scroll to it allows to speed up initial page load.
7. Hold position of element - page doesn’t jump while images load.
8. “Blur-up” technique - show very low resolution image before the original loads.

Points 1-4 are handled by Cloudinary.

npm install react-cloudinary-lazy-image --save

Fixed example:

import React from 'react'
import Img from 'react-cloudinary-lazy-image'

export default ({publicId}) => (
    <div>
        <h1>Lazy-image with Cloudinary</h1>
        <Img
            cloudName={'cloud'}
            imageName={publicId}
            fixed={{
                width: 300,
                height: 300
            }}
            urlParams={'g_face,c_lfill'}
        />
    </div>
)

Fluid example:

import React from 'react'
import Img from 'react-cloudinary-lazy-image'

export default ({publicId}) => (
    <div>
        <h1>Lazy-image with Cloudinary</h1>
        <Img
            cloudName={'cloud'}
            imageName={publicId}
            fluid={{
                maxWidth: 300,
                height: 300
            }}
            style={{
                width: '40vw',
                height: '20vh'
            }}
        />
    </div>
)

Same as in gatsby-image there are two types of responsive images. Fixed and fluid.

1. Images with fixed height and width. Cover double pixel density for retina display.
2. Images in fluid container. Takes smallest possible picture to fill container. Configurable step allow you to have control over breakpoints.

You can set image transformation according to Cloudinary documentation, by setting urlParams. You can also find all formats that can be passed to imgFormat prop or get more info about quality prop.