react-dynamic-image v1.3.2

react-dynamic-image

A lightweight component for cleanly rendering srcSet images in react

npm install --save react-dynamic-image

Improve your website's loadtimes by using DynamicImage

To Start:

import DynamicImage from 'react-dynamic-image'

Place compressed images in same folder as original and name to these conventions.

ImageName_ImageWidth.ext

default image widths are 400, 600, 800, 1100, 1500, 2000, 2500px, but can be changed using the imageWidths prop and passing an array of integers

Include in jsx in place of image

<DynamicImage
    srcProp="/images/example.ext"
    altProp="example image"
/>

Props

You can automate the image compression process using ImageMagick and adding these scripts to your .bashrc file

# Resize Multiple JPG's (Requires Filename as Argument)
# Resize Single JPG's = Provide Width as Second Argument

resizeJPG() {
  FILE_NAME=$1
  SIZES="400 600 800 1100 1500 2000 2500"
  BASE="${FILE_NAME%.*}"

  if [ "$#" -ne 2 ]
  then
    echo "Resizing Multiple Sized JPG's"
    for SIZE in $SIZES
    do
      NEW_FILE="${BASE}_${SIZE}.jpg"
      convert $1 -sampling-factor 4:2:0 -strip -resize $SIZE -quality 70 $NEW_FILE
      echo "Filename: $NEW_FILE, Width: $SIZE pixels"
    done
  else
    echo "Resizing Single Sized JPG"
    NEW_FILE="${BASE}_$2.jpg"
    convert $1 -sampling-factor 4:2:0 -strip -resize $2 -quality 70 $NEW_FILE
    echo "Filename: $NEW_FILE, Width: $2"
  fi
}

# Resize All JPG's = No Arguments

resizeALL(){
  for file in *.jpg; do
    if [ -f "$file" ]; then
        resizeJPG $file;
    fi
  done
}

Enjoy!

To Do:

• Add support for filetypes beyond .jpg
• Add support for images in the src folder
• Add more event listener support