🚀 Quick Start Guide
New to PixelPro? Get your first image processed in under 2 minutes.
Upload your image
Drag and drop any image onto the upload zone, or click it to browse your files. Supported formats: JPG, PNG, WebP, GIF, BMP up to 100MB.
Review the metadata
PixelPro instantly reads your image dimensions, file size, megapixels, aspect ratio, and print readiness. The DPI indicator tells you if your image is ready for print.
Crop (optional)
Use the crop tool to frame your image before resizing. Drag the handles to adjust. Click Apply Crop to lock it in, or Skip to use the full image.
Pick a size
Scroll to Social & Marketplace Sizes and click any card — Instagram Post, Etsy Listing, YouTube Thumbnail, etc. PixelPro instantly generates a pixel-perfect export.
Download
Hit ⬇ Download. Choose JPG for smallest file size, PNG for lossless quality, or WebP for the best web performance.
💡 Pro Tip
Save your favourite settings as a Preset (⭐ button) so next time you just click Apply and you're done — no reconfiguring.
What can PixelPro do?
📱
30+ Social Sizes
Instagram, Facebook, Twitter/X, LinkedIn, YouTube, TikTok, Pinterest and more.
🛍️
Marketplace Ready
Etsy, Gumroad, Amazon, eBay, Shopify, Redbubble — exact platform specs built in.
🖨️
Print at 300 DPI
10 standard print sizes with AI upscaling so every image prints sharp.
⚡
Batch Processing
Process 5–20 images at once. Apply one crop/size to all, or export every size simultaneously.
🔍
AI Analysis
Canvas-based pixel analysis reveals how your image was created, its style, and colour profile.
⭐
Saved Presets
Build personal workflows. One click applies your entire saved configuration.
🗺️ Feature Overview
A map of every tool in PixelPro and how they connect.
Single Image Mode
The default mode. Upload one image, work through each step in order. The numbered step badges guide you: ① Upload → ② Metadata → ③ Crop → ④ Social Sizing → ⑤ Print Sizing.
Batch Mode
Switch using the ⊞ Batch Processing tab at the top. Upload 2–20 images, select which social sizes you want, and process all images at once. Results download individually or as a ZIP bundle.
Power Batch (inside Single Mode)
After selecting a social preset in Single Mode, the ⚡ Power Batch Tools panel appears. This is the most powerful workflow: apply your exact crop + preset to multiple new images, or export one image to every preset simultaneously.
ℹ️ Processing order
Always apply crop before selecting a size. The crop is applied first, then the image is scaled to the target dimensions. If you change the crop after selecting a size, click the size card again to refresh.
📤 Upload & Preview
Getting your image into PixelPro.
How to Upload
- Drag & Drop — drag any image file from your desktop, Finder, or File Explorer directly onto the blue dashed upload zone.
- Click to Browse — click anywhere in the upload zone to open your system file picker.
- Supported Formats — JPG / JPEG, PNG, WebP, GIF (first frame), BMP. Maximum file size: 100 MB.
Preview Panel
After upload, a thumbnail of your image appears below the upload zone. Two quick-action buttons appear:
- ✕ Remove — clears the current image and resets everything.
- ↺ Reset Crop — discards any applied crop and returns to the original full image.
⚠️ Large files
Files over 20 MB may take a moment to load in your browser. PixelPro processes everything locally — nothing is uploaded to a server, so your images stay private.
Metadata Panel
Immediately after upload, PixelPro reads and displays: filename, file size, pixel dimensions (width × height), megapixels, aspect ratio, display size at 96 DPI (screen), and a print DPI readiness indicator based on an 8×10" benchmark.
🔍 AI Image Analysis
Canvas-based pixel intelligence — no internet required.
How It Works
Click 🔍 Analyze Image to run PixelPro's built-in analysis engine. It samples up to 300×300 pixels from your image and computes several metrics entirely in your browser using the Canvas API:
- Luminance distribution — average brightness across the image, classified as dark / balanced / bright.
- Saturation — how colourful the image is, from monochrome to highly vivid.
- Edge density (Sobel operator) — detects how much fine detail and texture is present.
- Colour temperature — whether the image skews warm (red-orange bias) or cool (blue bias).
- Dominant colours — extracts the top 6 colours using quantised colour bucketing.
- Style classification — identifies whether the image is likely Black & White, Illustration, Flat Design, or Photography based on the above metrics.
💡 Useful for
Understanding if an image needs colour grading before export, confirming a photo vs. illustration workflow, and matching image style to your brand palette.
Reading the Results
Results appear in a dark panel below the Analyse button. You'll see the classified style, a luminance bar, saturation reading, edge detail score, colour temperature, and a row of dominant colour swatches with hex codes.
✂️ Crop Tool
Frame your image before scaling — the most important step for great results.
Using the Crop Box
The crop box appears automatically
When you upload an image, a dashed selection box covers 80% of the image. Click or drag it to activate the dim overlay.
Move the crop area
Click and drag anywhere inside the crop box to reposition it over the area you want to keep.
Resize the selection
Drag any of the 8 handles (corners and midpoints) to resize. The dimmed area outside the box will be discarded.
Apply or Skip
Click Apply Crop to lock in the selection — the working image updates immediately. Click Skip Crop to use the full image without cropping.
💡 Batch crop
Your crop is stored as proportional fractions (not pixel coordinates). This means it can be applied proportionally to any image in Batch Mode or via a saved Preset — even if the images are different sizes.
Resetting the Crop
↺ Reset Crop (in the crop section) resets the selection box to the default 80% without applying it. ↺ Reset Crop (in the preview panel) discards an applied crop and reverts to the original full image.
⚠️ Apply before sizing
Always click Apply Crop before selecting a social or print size. If you crop after selecting a size, click the size card again to re-render with the new crop.
📱 Social Media & Marketplace Sizes
30+ platform-perfect sizes, one click each.
Choosing a Preset
Scroll to Row 3 after uploading an image. You'll see two tabs:
- Social Media — Instagram (Post, Portrait, Story, Landscape), Facebook (Post, Cover, Story), Twitter/X (Post, Header), LinkedIn, YouTube (Thumbnail, Channel Art), TikTok, Pinterest, Snapchat, Website Hero & Banner.
- Marketplace — Etsy (Listing, Shop Banner, Mini Banner, Profile), Gumroad (Cover, Profile), Amazon Product, eBay Product, Shopify (Product, Banner), Redbubble Sticker.
Click any card. The output preview renders instantly. A green ✓ badge appears on the selected card.
Scale Mode: Fit vs Fill Advanced
- Fit (default) — the entire image fits inside the target dimensions. White padding is added to fill any gaps. Best for product photos where you need to see the full item.
- Fill — the image fills the target completely, cropping the edges if needed. Best for hero images, banners, and backgrounds where edge-to-edge coverage matters.
Output Format & Quality
- JPG — smallest file size, ideal for photos. Choose 85% quality for most uses.
- PNG — lossless, no compression artefacts. Use for logos, illustrations, or images with text.
- WebP — modern format, 25–35% smaller than JPG at equivalent quality. Best for web use.
💡 Etsy sellers
Use the Etsy Listing preset (2000×2000px) for all product images. Etsy recommends at least 2000px on the shortest side. The Fill mode works well for full-bleed product shots.
Custom Size Advanced
Switch to the Custom tab, enter any width and height in pixels, and click Apply Custom Size. The output renders immediately.
🖨️ Print Sizing & DPI
Export print-ready files at 300 DPI — the professional standard.
Understanding DPI
DPI (Dots Per Inch) determines print sharpness. The standard for professional print is 300 DPI. Lower DPI prints look soft or pixelated.
| DPI | Quality | Use case |
|---|
| 72–96 | Screen only | Websites, social media |
| 150–200 | Draft print | Internal documents, proofing |
| 300+ | Professional print | Photos, posters, products |
Available Print Sizes
4×6", 5×7", 8×10", 11×14", 16×20", A4, A3, Poster 18×24", Business Card (3.5×2"), and 8×8" Square — all output at exactly 300 DPI pixel dimensions.
AI Upscaling Advanced
If your source image is too low-resolution for a given print size, PixelPro uses upscaling to expand it. Two methods are available:
- Lanczos (High Quality) — uses the browser's high-quality bicubic resampling. Best for photos.
- Pixel-Perfect — disables smoothing entirely. Best for pixel art, icons, and illustrations where you want crisp edges.
⚠️ Upscaling has limits
No upscaler can recover detail that wasn't in the original. If your DPI gauge shows red (under 100 DPI for the chosen size), the output will be visibly soft. Start with the highest resolution original you have.
DPI Gauge
The coloured bar below the print preview shows your effective DPI. Green = print-ready at 300 DPI. Yellow = acceptable for draft use. Red = needs a higher resolution source.
⇄ Before & After Adjustment Studio
Visual compare with live image adjustments before export.
Opening the Studio
Select a social preset
Upload an image and click any social or marketplace size card to generate an output.
Click ⇄ Compare
The button appears in the output panel below the size cards. Clicking it opens the Adjustment Studio full-screen.
Drag the divider
The split view shows Original (left) vs Optimized (right). Drag the ⇄ divider handle left and right to reveal more of each side.
Adjustment Sliders
All sliders apply to the right (Optimized) side only in real time via CSS filters — instant, no reprocessing needed:
| Slider | Range | What it does |
|---|
| ☀️ Exposure | -100 to +100 | Overall brightness — lift for airy look, pull for moody |
| ◑ Contrast | -100 to +100 | Difference between darks and lights |
| ⬡ Highlights | -100 to +100 | Brighten or recover bright areas |
| ▼ Shadows | -100 to +100 | Lift or deepen dark areas |
| 🌈 Saturation | -100 to +100 | Colour intensity — 0 = monochrome |
| 🌡️ Temperature | -100 to +100 | Warm (orange) ↔ cool (blue) |
| 🟣 Hue Shift | -180° to +180° | Rotate all colours around the colour wheel |
| 🔍 Sharpness | 0 to 100 | Micro-contrast boost for added crispness |
| 🌑 Vignette | 0 to 100 | Darkens corners for a dramatic, focused look |
| 🫧 Blur/Soften | 0 to 20 | Gaussian blur — useful for backgrounds |
Bake & Apply to Export Pro
Click ⬇ Bake & Apply to Export to permanently apply the adjustments to the output canvas via pixel-level processing (HSL, per-channel brightness/contrast, luminance-weighted highlights/shadows, temperature, vignette). The adjusted image becomes the new download target. This is a one-way operation — close and reopen Compare to start fresh.
💡 Workflow tip
Adjust → Bake → Download. Use the Compare slider to verify the improvement before downloading. The "ADJUSTED" label on the right side confirms adjustments are active.
⚡ Batch Processing
Process multiple images simultaneously — the workflow multiplier.
Two Batch Systems
PixelPro has two distinct batch tools for different use cases:
1. Batch Mode Tab Beginner-friendly
Click the ⊞ Batch Processing tab at the top.
Upload multiple images
Drag a folder or multiple files into the batch upload zone. Up to 20 images at once.
Select output sizes
Tick the checkboxes for each social media size you want. You can select multiple sizes — each image will be exported in every checked size.
Process & Download
Click ⚡ Process. A progress bar tracks completion. Download files individually or click ⬇ Download All for a ZIP bundle.
2. Power Batch Tools Advanced
Appears below the social size cards in Single Image Mode after you select a preset. Two sub-tools:
- Apply to Multiple Images — upload 2–20 images. PixelPro applies your exact crop and selected preset to every one. Useful for product photo batches where you want consistent framing.
- Export All Sizes — exports your current image to every social and print preset at once (30+ files). Download as individual files or one ZIP. Perfect when launching a new product and needing every platform covered.
💡 E-commerce workflow
Single image mode → Upload hero shot → Apply crop → Select Etsy Listing → Power Batch → Apply to Multiple. In minutes, your entire product catalog is formatted for Etsy.
⭐ My Presets
Save your workflow. Apply it to any new image in one click.
What Gets Saved
A preset captures your entire configuration at the moment of saving:
- Selected social media or marketplace size
- Selected print size
- Crop area (stored as proportional fractions — works on any image size)
- Scale mode (Fit or Fill)
- Output format (JPG, PNG, WebP)
- Quality setting
- Upscale method
- Print format
Saving a Preset
Configure your settings
Upload an image, apply a crop if needed, select a size, set your format and quality.
Click ＋ Save Current Settings
The button appears in the My Presets section (between upload and crop) once you have at least one setting configured.
Name your preset
Give it a meaningful name like "Etsy Product Photos", "Instagram Feed 2024", or "Client A Print Package". Up to 40 characters.
Applying a Preset
Click ▶ Apply on any preset card. If an image is already loaded, it immediately: selects the correct size cards, sets all dropdowns, applies the proportional crop, and renders the output. If no image is loaded yet, upload one — the settings will be applied automatically.
⚠️ Preset storage
Presets are saved in your browser's localStorage. They persist across sessions but are browser-specific — they won't transfer to another computer or browser automatically. Clear browser data and presets are gone, so note your important preset names.
Preset Ideas by Workflow
- 🛍️ Etsy Product Photos — Etsy Listing (2000×2000), Fill mode, JPG 85%, square crop
- 📷 Instagram Feed — IG Post (1080×1080), Fit mode, JPG 92%
- 📄 Print Package — 8×10", Lanczos upscale, PNG lossless
- 🎨 Portfolio Hero — Website Hero (1920×600), Fill mode, WebP
💡 Pro Tips & Shortcuts
Work faster. Get better results.
Keyboard Shortcuts
| Key | Action |
|---|
| Esc | Close any open modal (Compare, Help) |
| ? | Open this Help panel |
Image Quality Tips
- Always start with the largest original file you have. Downscaling always looks better than upscaling.
- For Etsy and Amazon, use Fill mode so your product fills the entire square — white margins lose clicks.
- For Instagram Stories and TikTok (9:16 ratio), crop to portrait orientation before selecting the preset to avoid unwanted white bars.
- Use PNG for logos and images with flat colours or text — JPG creates artefacts on hard edges.
- Use WebP for web galleries — same visual quality as JPG at 25–35% smaller file size.
- The Exposure slider in the Adjustment Studio is not the same as brightness — it simulates a camera exposure change, which is more natural-looking.
Batch Processing Tips
- Rename your files descriptively before uploading — batch output filenames are based on the original filename.
- For consistent product photos: upload your best-framed image first, set the crop, then use Apply to Multiple to apply that same crop proportionally to the rest.
- Export All Sizes generates 30+ files. Use the ZIP download — individual file downloads trigger browser download prompts for each file.
Preset Best Practices
- Create one preset per platform or client, not per image. Presets are for recurring workflows.
- Include the platform and year in the name: "Etsy Listings 2025" — platforms change their specs occasionally.
- If a client has specific requirements (format, quality, size), make a dedicated preset named for them.
💡 Fastest e-commerce workflow
1. Save an Etsy preset with your preferred crop + Fill mode + JPG 85%. 2. Upload new product photo. 3. Click ▶ Apply on the preset. 4. Hit ⬇ Download. Done in under 30 seconds per image.
❓ Frequently Asked Questions
Quick answers to common questions.
Is my image uploaded to a server? ▶
No. PixelPro processes everything locally in your browser using the Canvas API. Your images never leave your computer. No server, no account, no internet required after the page loads.
Why does my exported image look soft? ▶
This happens when your source image resolution is too low for the target size. Check the DPI gauge in the Print section, or compare pixel dimensions in the Metadata panel. For best results, always start with the highest resolution original. For print, you need at least 300 × the size in inches (e.g., 8×10" requires 2400×3000px minimum).
What is the difference between Fit and Fill? ▶
Fit scales your image until the entire image is visible inside the target dimensions, adding white padding on two sides if the aspect ratio doesn't match. Fill scales until the image covers the entire target, cropping the sides that overflow. Use Fit for product photos where you need to see the whole item; use Fill for backgrounds, banners, and hero images.
My presets disappeared — what happened? ▶
Presets are stored in your browser's localStorage. They are lost if you clear browser data, use a different browser, open the file in a private/incognito window, or move the HTML file. To back up presets, note your preset names and settings — or contact us about a future export feature.
Can I use PixelPro offline? ▶
Yes — once the page has loaded, all processing happens in your browser. The only feature that requires internet is the ZIP download (JSZip library loads from a CDN on first use). After that first load, ZIP works offline too.
How do I process more than 20 images? ▶
Run multiple batch sessions. Upload 20, process and download, then upload the next 20. All processing happens in memory — there's no hard limit, but very large batches may slow your browser depending on image sizes and available RAM.
Why is the Compare button not showing? ▶
The Compare button only appears after you (1) upload an image AND (2) click a social/marketplace size card. Once a preset is selected and the output preview is visible, the ⇄ Compare button appears in the button row below it.
Can I export to multiple formats at once? ▶
Not directly — choose your format from the dropdown (JPG, PNG, or WebP) before downloading. For multiple formats, export once per format. The Export All Sizes feature in Power Batch exports all sizes in JPG. A multi-format export feature may be added in a future version.
What does "Bake & Apply to Export" do in the Adjustment Studio? ▶
It permanently applies your slider adjustments to the output image at the pixel level using Canvas API processing — not just CSS filters. The downloaded file will contain the adjusted image. This is a one-way operation per session; close and reopen Compare to start fresh adjustments.
📚 Glossary
Key terms used throughout PixelPro.
| Term | Definition |
|---|
| DPI | Dots Per Inch — the print resolution. 300 DPI is the professional standard for photo printing. |
| PPI | Pixels Per Inch — same concept as DPI but for digital screens. Most screens are 72–96 PPI. |
| Aspect Ratio | The proportional relationship between width and height (e.g., 16:9, 1:1, 4:5). |
| Upscaling | Enlarging an image beyond its original pixel dimensions. Always reduces quality to some degree. |
| Downscaling | Reducing an image to smaller pixel dimensions. Generally maintains quality well. |
| Fit mode | Scale image to fit entirely within target dimensions; white bars fill the gaps. |
| Fill mode | Scale image to cover the entire target; edges that don't fit are cropped off. |
| Lanczos | A high-quality resampling algorithm. Produces smooth results when upscaling photos. |
| Canvas API | A browser built-in system for drawing and processing images in JavaScript without a server. |
| Lossless | Compression that preserves every pixel exactly (PNG). Files are larger but perfect. |
| Lossy | Compression that discards some data to reduce file size (JPG, WebP). Quality is controlled by the Quality % slider. |
| WebP | A modern image format by Google. Smaller than JPG at equivalent quality; widely supported. |
| Luminance | The perceived brightness of a pixel, calculated from its red, green, and blue channels. |
| Saturation | The intensity of colour in an image. 0% saturation = greyscale; 100% = maximum colour. |
| Vignette | A darkening of the image corners and edges, often used for artistic or dramatic effect. |
| localStorage | A browser storage system where PixelPro saves your presets. Data stays in your browser between sessions. |