nitish24p / React Worker Image
Licence: mit
React component to fetch image resources via web workers 🤖🤖
Stars: ✭ 226
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Worker Image
Ultimatepp
U++ is a C++ cross-platform rapid application development framework focused on programmer's productivity. It includes a set of libraries (GUI, SQL, Network etc.), and integrated development environment (TheIDE).
Stars: ✭ 237 (+4.87%)
Mutual labels: image, performance
Tifig
A fast HEIF image converter aimed at thumbnailing
Stars: ✭ 345 (+52.65%)
Mutual labels: image, performance
Medium Zoom
🔎🖼 A JavaScript library for zooming images like Medium
Stars: ✭ 2,799 (+1138.5%)
Mutual labels: image, performance
Sharp
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
Stars: ✭ 21,131 (+9250%)
Mutual labels: image, performance
Image Optimize Command
Easily optimize images using WP CLI
Stars: ✭ 138 (-38.94%)
Mutual labels: image, performance
Sqip
"SQIP" (pronounced \skwɪb\ like the non-magical folk of magical descent) is a SVG-based LQIP technique.
Stars: ✭ 3,074 (+1260.18%)
Mutual labels: image, performance
Image Optimizer
Image optimization / compression library. This library is able to optimize png, jpg and gif files in very easy and handy way. It uses optipng, pngquant, pngcrush, pngout, gifsicle, jpegoptim and jpegtran tools.
Stars: ✭ 785 (+247.35%)
Mutual labels: image, performance
Laravel Image Optimizer
Optimize images in your Laravel app
Stars: ✭ 873 (+286.28%)
Mutual labels: image, performance
Jekyll Cloudinary
Jekyll plugin adding a Liquid tag for Cloudinary, for better responsive images
Stars: ✭ 79 (-65.04%)
Mutual labels: image, performance
Image Optimizer
Easily optimize images using PHP
Stars: ✭ 2,127 (+841.15%)
Mutual labels: image, performance
Nanolog
Nanosecond scale logger inspired by https://github.com/PlatformLab/NanoLog
Stars: ✭ 220 (-2.65%)
Mutual labels: performance
Snmpcollector
A full featured Generic SNMP data collector with Web Administration Interface for InfluxDB
Stars: ✭ 216 (-4.42%)
Mutual labels: performance
Bv
Quickly view satellite imagery, hyperspectral imagery, and machine learning image outputs directly in your iTerm2 terminal.
Stars: ✭ 215 (-4.87%)
Mutual labels: image
Web Launch Checklist
📋 A simple website launch checklist to keep track of the most important enrichment possibilities for a website.
Stars: ✭ 214 (-5.31%)
Mutual labels: performance
Vue Img Cutter
简单易用的vue图片裁剪插件，支持移动图像，裁剪图片，放大缩小图片，上下左右移动，固定比例，固定尺寸，远程图片裁剪，只需要很少的代码就可以实现裁剪功能，也可以通过调整参数以适应你自己的业务需求。
Stars: ✭ 220 (-2.65%)
Mutual labels: image
Profilinggo
A quick tour (or reminder) of Go performance tools
Stars: ✭ 219 (-3.1%)
Mutual labels: performance
Wasm Worker
Move a WebAssembly module into its own thread
Stars: ✭ 215 (-4.87%)
Mutual labels: web-worker
Gulp Image
Optimize PNG, JPEG, GIF, SVG images with gulp task.
Stars: ✭ 213 (-5.75%)
Mutual labels: image
Memoize One
A memoization library which only remembers the latest invocation
Stars: ✭ 2,649 (+1072.12%)
Mutual labels: performance
react-worker-image
React component to fetch image resources via web workers
react-worker-image is a React component for loading images via a web worker. Thereby not blocking the main thread and speeding up page load time.
Installation
Using npm
npm install react-worker-image
yarn add react-worker-image
Usage
react-worker-image exports one react component which takes src as a prop, and an optional prop of placeholder, style and imageClass which are applied to the img tag.
const ImageWorker = require('react-worker-image').default;
or
import ImageWorker from 'react-worker-image';
usage in code
<ImageWorker src='http://image-url' />
Props List
| Prop type | Required | type |
|---|---|---|
| src | yes | string |
| placeholder | optional | string or Component |
| style | optional | Object |
| imageClass | optional | string |
| containerClass | optional | string |
The above props are applied to the img tag.
Found a bug file them here.
Component in Action
Observe the page Load time at the bottom right corner in both cases.
The first is via a webworker and the second is the regular get.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].