README

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/whypiio-hero@3x.png" 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/whypiio-hero@3x.png" 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>

Usage no npm install needed!