Piio Images for React

Piio Images will allow you to easily optimize all your images based on your visitor's browser, device pixel ratio and screen-size. With thoughtful compression and new-generation formats, your images will have crisp quality and consume less data, including Lazy Loading, out of the box.

Piio Images will also improve your load time and reduce unnecessary network usage.

• Effortless integration
• WebP, Avif and other new-generation formats
• Pixel-perfect responsive images
• Thoughtful image compression
• High DPI Support and Scalability
• Compatible with legacy browsers
• Lazy loading integrated

Read more about Piio and register at https://app.piio.co/register

Getting started

NPM Installation

npm install piio-images-react

Manual Installation

If you aren't using npm installation, you can install Piio manually by following these steps:

• Download the directory Piio-images containing index.js,index.js.map,index.modern.js,index.modern.js.map.
• Load index.js in your code and import {Piio, PiioElement}

Import component

Add the following lines to import the component:

import { PiioElement, Piio } from 'piio-images-react'

Initialize the component by adding it to your template file:

  <Piio domainKey="DOMAIN-KEY"/>

Replace DOMAIN-KEY with the Piio Domain Key you get from your dashboard at https://app.piio.co/

Usage

Image tag

Add the PiioElement with the tag attribute set as img and your image as path

   <PiioElement tag="img" path="https://piio.co/img/[email protected]" alt="Piio Element" class="example-class" />

Background image

Add the PiioElement with the tag attribute set as the element you want to have the background applied. You can add any other attributes and content to the element as it will be added.

Here is an example using a div tag:

  <PiioElement path="https://piio.co/img/[email protected]" tag="div">
    <h1>Example content</h1>
  </PiioElement>

Picture

Add a PiioElement for each source you need inside the picture tag. Set tag as source and add any other attributes you need, e.g media attribute.

This example follows the Art Direction: Showing different images per device idea.

<picture>
  <PiioElement path="https://secureservercdn.net/198.71.233.106/w4y.80f.myftpupload.com/wp-content/uploads/2020/02/backpack-desktop.jpg" tag="source" media="(min-width:969px)"/>
  <PiioElement path="https://secureservercdn.net/198.71.233.106/w4y.80f.myftpupload.com/wp-content/uploads/2020/02/backpack-mobile.jpg" tag="source" media="(max-width:969px)"/>
  <PiioElement path="https://secureservercdn.net/198.71.233.106/w4y.80f.myftpupload.com/wp-content/uploads/2020/02/backpack-mobile.jpg" tag="img"/>
</picture>

Read more about Art Direction here.

For more settings check our Docs at https://docs.piio.co/