Thumbolidator

Thumbnail image consolidator

This is still a proof of concept. Please don't use in any serious project. Check Todos for further details.

Try demo here!

⚠️Thumbolidator provides only Linux version of drop-patched jpegtran binary. please use linux to make thumbnails.

Concept

Jpegtran can merge jpeg files into a big jpeg file. This will help reduce downloading many number of jpeg files through http.

Jpegtran drop-patch does not re-encode jpegs so thumbnails can be added later on without dropping quality.`

Thumbolidator creates two tiles of the thumbnails, Micro and Thumbo. The Thumbo react component will shows a micro thumbnail while loading thumbnails.

Install

npm install -g thumbolidator
npm install --save react-thumbolidator

Usage

Server-side script

$ thumbolidator ./public/images/2019-11-23/

React component

import React, { Component } from 'react'

import { Thumbo } from 'thumbolidator'

class Example extends Component {
  render ({ files }) {
    return (
      <>
        {files.map(file => (
          <Thumbo src={`http://localhost/images/${file}`} key={file} size={64} />
        ))}
      </>
    )
  }
}

Running example in your local environment

Needs Docker

Put some image files in public directory with sub-directories.

$ thumbolidator ./public/images1
$ thumbolidator ./public/images2
$ docker-compose up -d
$ cd react
$ npm start

Todo

docker container for thumbolidator genertator
Add unit tests

kennyhyun/thumbolidator