- Notifications
You must be signed in to change notification settings - Fork0
🏞️ Make your images load faster. A better save for the web.
License
stacksjs/imgx
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A powerful image optimization toolkit for modern web development.
Advanced Image Optimization
- Lossy & lossless compression
- Smart quality optimization
- Metadata stripping
- Color profile management
Format Support
- WebP, AVIF conversion
- JPEG, PNG optimization
- SVG minification
- Animated GIF optimization
Modern Web Features
- Responsive image generation
- Art direction support
- Lazy loading helpers
- ThumbHash placeholders
- Sprite sheet generation
- OG Image generation
Developer Experience
- Watch mode for development
- Development server with on-the-fly optimization
- CI/CD integration
- Detailed analysis and reporting
- Progress indicators
Privacy & Performance
- Metadata stripping
- Configurable optimization levels
- Cache control
- Web-optimized by default
bun install -d @stacksjs/imgx
Basic optimization:
# Optimize a single imageimgx optimize input.jpg -q 75# Convert to WebPimgx optimize input.jpg output.webp -f webp# Optimize a directory of imagesimgx optimize ./images -R -f webp# Watch mode for developmentimgx optimize ./src/images -w -f webp
Advanced features:
# Generate responsive imagesimgx optimize hero.jpg --responsive --responsive-sizes 320,768,1024,1920# Create sprite sheetimgx sprite ./icons ./dist --retina --optimize# Generate thumbnails with ThumbHashimgx optimize input.jpg -t --thumbhash-size 64x64# Analyze image optimization potentialimgx analyze ./images -o report.json --ci
Development server:
# Start dev server with on-the-fly optimizationimgx serve ./public -p 3000# Access optimized images:# http://localhost:3000/image.jpg?format=webp&quality=75&size=800x600
import{analyzeImage,generateSprite,process}from'@stacksjs/imgx'// Basic optimizationawaitprocess({input:'input.jpg',output:'output.webp',quality:75,format:'webp'})// Generate responsive imagesawaitprocess({input:'hero.jpg',responsive:true,responsiveSizes:[320,768,1024,1920],format:'webp'})// Create sprite sheetawaitgenerateSprite({images:['icon1.png','icon2.png'],output:'./dist',retina:true,format:'webp'})// Analyze imagesconstreport=awaitanalyzeImage('image.jpg')console.log(report.optimizationPotential)
Create animgx.config.ts file:
importtype{ImgxConfig}from'@stacksjs/imgx'exportdefault{// General optionsverbose:true,cache:true,cacheDir:'.imgx-cache',// Default optimization settingsquality:75,format:'webp',progressive:true,stripMetadata:true,// Responsive image settingsresponsive:{sizes:[320,768,1024,1920],formats:['webp','avif'],quality:75},// Sprite generationsprites:{retina:true,padding:2,prefix:'icon',format:'webp'},// Development serverserver:{port:3000,cache:true,cors:true}}satisfiesImgxConfig
imgx optimize [input] [output]Options: -q, --quality<number> Image quality (1-100) (default: 80) -r, --resize<string> Resize image (e.g.,"50%" or"800x600") -f, --format<string> Output format (jpeg, png, webp, avif) -p, --progressive Enable progressive mode (default: true) -m, --preserve-metadata Preserve image metadata -w, --watch Watchfor file changes -R, --recursive Process directories recursively -t, --thumbhash Generate ThumbHash placeholder --responsive Generate responsive images --skip-existing Skip already optimized files --backup Create backup of original filesExamples: $ imgx optimize input.jpg -q 75 -r 50% $ imgx optimize ./images -f webp -R $ imgx optimize input.jpg -t --thumbhash-size 64x64 $ imgx sprite ./icons ./dist --retina --optimize $ imgx analyze ./images --ci --threshold 500KB
Please review theContributing Guide for details.
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
For casual chit-chat with others using this package:
Join the Stacks Discord Server
“Software that is free, but hopes for a postcard.” We love receiving postcards from around the world showing whereimgx is being used! We showcase them on our website too.
Our address: Stacks.js, 12665 Village Ln #2306, Playa Vista, CA 90094, United States 🌎
We would like to extend our thanks to the following sponsors for funding Stacks development. If you are interested in becoming a sponsor, please reach out to us.
The MIT License (MIT). Please seeLICENSE for more information.
Made with 💙
About
🏞️ Make your images load faster. A better save for the web.
