Guide · 7 min read
How to Compress Images for an Online Store
Shrink product photos for faster online store pages: target sizes, exact dimensions, and format choices that keep listings sharp.
Last updated: 2026-10-03
Tools for this guide
Match the pixels to the display size
Phone cameras produce images several thousand pixels wide, while a product slot on a store page often displays only a fraction of that. Every extra pixel still has to be downloaded, decoded, and stored, so the first saving comes from sizing the image to its actual job rather than from any quality slider. Open one listing, note roughly how large the image appears, and treat that as your ceiling with a little margin for high-density screens.
The Image Resizer makes this concrete: it offers presets including 1920 × 1080 for full-width banners, 1280 × 720, square crops such as 1080 × 1080 and 512 × 512, an 800 × 600 small size, and a 256 × 256 thumbnail, plus custom width and height fields with an aspect-ratio lock. It reads each queued file's real dimensions, so per-file aspect math stays correct even when a batch mixes portrait and landscape shots.
A reliable routine is resizing the master photo to the largest size the store will ever show — the zoomed detail view, not the thumbnail — and letting the storefront scale down from there. If the compressor also offers a limit-width field, use it as a safety net: any image wider than your chosen width is scaled down proportionally before encoding, which catches the one oversized file you forgot about.
Choose quality mode or target-size mode
The Image Compressor offers two modes, and they suit different moments. Quality mode gives you a slider from 30% to 100% (starting at 82%) with plain-language hints: 90% and above means high quality with modest savings, 70–89% is the balanced zone that is usually indistinguishable from the original, and lower values warn that artifacts may appear in detailed areas. Use quality mode when you want one consistent look across a whole catalog and are willing to accept whatever sizes result.
Target-size mode works the other way: you pick a goal — presets of 100 KB, 200 KB, 500 KB, or 1024 KB, plus a custom value — and the tool adjusts quality and dimensions automatically to land on it. One honest detail worth knowing: some files simply cannot reach an aggressive target without being destroyed, and instead of ruining them the tool reports which files missed and keeps the smallest honest output it could produce. When you see that note, raise the target rather than forcing the file through again.
For store work, start with quality mode around the balanced zone for hero images where sharpness sells, and target-size mode for thumbnails and gallery secondary shots where every kilobyte multiplies across dozens of listings. Run a small test batch first, inspect the results, and only then apply the winning setting to the full catalog.
Serve photos as WebP or JPG, graphics as PNG or WebP
Format choice is the second large lever after dimensions. Photographs of products — fabric texture, reflections, gradients — encode efficiently as JPG or WebP, and WebP versions are often much smaller at matched visual quality. The compressor states its position plainly: PNG output stays lossless, and for much smaller files it suggests WebP or JPG output instead. That single sentence saves hours of confusion about why a photographic PNG barely shrinks.
Keep PNG (or WebP) for images that need transparency or razor-sharp edges: logos, badges, size-chart diagrams, and screenshots with small text. JPG has no transparency at all, so a logo with a transparent background must never be saved as JPG. The PNG to WebP converter bridges the gap for graphics that need both transparency and small files — transparency survives, and the file usually gets clearly lighter.
A common store scenario shows why this matters: a supplier sends product renders as multi-megabyte PNGs. Those are photographs in practice, so converting them to WebP or JPG at balanced quality — after resizing to display size — typically turns each file into a fraction of its original weight with no visible difference on the page.
Compress the whole catalog in batches
Store catalogs mean dozens or hundreds of images, so batch behavior matters. The compressor and resizer each accept up to 10 files per run at up to 60 MB apiece, and everything is processed locally in the browser — supplier photos never travel to a server, which also keeps unreleased products confidential. Shared settings apply across the batch, so one tested combination of format, quality, and width covers ten images at once.
After a run, each file gets its own download with the new extension appended, and batches offer a single ZIP bundle named after the tool for grabbing everything at once. A Cancel button stops a long batch mid-flight and Clear resets the queue, so a mistaken file choice costs seconds rather than a re-upload. Work through the catalog ten at a time, keeping folder names that mirror your product categories.
Consistency across the batch is worth protecting: identical settings produce identical character, so gallery grids look uniform instead of mixing crisp and soft images. If one image in a batch looks worse than its siblings, pull it out and treat it individually — flat white-background shots and busy lifestyle photos compress differently, and outliers deserve their own pass.
Inspect every result at full zoom before uploading
Compression artifacts hide at thumbnail size and reveal themselves on the product page. Open each result at full zoom and look at the places that fail first: smooth gradients such as skies or studio backdrops where banding appears, fine fabric weave, small printed text on packaging, and edges around the product silhouette. If those areas look clean, the image is ready; if they shimmer or smear, step one quality level gentler and run that single file again.
Resist the urge to compress an already-compressed file a second time to squeeze out a few more kilobytes — repeated encoding stacks artifacts faster than it shrinks bytes. Always go back to the resized master and re-run with adjusted settings instead. The tool's miss notice in target-size mode is part of the same honesty: it tells you the limit was unreachable rather than silently degrading the image until the numbers fit.
Judge images in context at least once: place the compressed hero shot into a draft listing and view it the way a shopper would, including the zoomed detail view if your store offers one. An image that survives full-zoom inspection and looks right in the page layout has passed both tests that matter.
Keep originals and name files for search
Never compress the only copy of a product photo. Keep the camera originals or supplier masters in an archive folder, and treat compressed files as disposable exports you can regenerate any time. Future needs — a homepage banner, a print catalog, a marketplace with different requirements — will want those full-resolution masters, and storage is inexpensive compared to a reshoot.
Name compressed files the way shoppers search, not the way cameras count: a descriptive slug with product and variant beats an alphanumeric dump, and it carries over into image search and accessibility text workflows. Because outputs arrive with the new extension appended, a quick rename pass while downloading each batch keeps the catalog folder clean without extra effort.
Finally, fold compression into the listing routine rather than treating it as a one-time cleanup: resize on import, compress before upload, spot-check the live page. Ten minutes of habit per product batch keeps every page fast from launch day, which is far easier than auditing hundreds of listings later.
Treat packshots, detail crops, and lifestyle photos as separate jobs
A catalog usually contains three visual species that behave nothing alike under compression, so triage them before you touch a slider. The packshot — a garment on a mannequin against a seamless backdrop, a sneaker centered on white, a ceramic mug with soft shadow — carries large flat areas plus one textured subject; it tolerates the balanced quality zone gracefully because the background compresses to nearly nothing while the product retains weave, stitching, and glaze. The detail crop — a zipper pull, a fabric macro, printed care-label text — is the opposite: every pixel matters, edges must stay razor sharp, and aggressive settings smear exactly the information shoppers zoom to verify. The lifestyle frame — a model crossing a patterned courtyard, a kitchen scene with foliage, tile, glassware, and linen — spreads complexity across the entire frame with no flat refuge, so it needs gentler handling and realistic size expectations.
Run each species through the Image Resizer with intent rather than habit. For grid packshots, type the catalog width with Lock ratio switched on and let each file derive its own height from its own proportions, which keeps portraits and landscapes undistorted inside one queue; the Width field shows the first image as a hint such as First image: 4032 x 3024, and presets cover 1920 x 1080 full-bleed banners, 1280 x 720, square 1080 x 1080 posts, 800 x 600 small slots, 512 x 512 avatars, and 256 x 256 thumbnails. When only width matters, the compressor Limit width field works as a proportional safety net that scales down anything wider and leaves narrower files untouched. For detail crops headed to zoom views, preserve pixels first and compress second: keep dimensions generous, stay in Quality mode with the slider between 30% and 100% starting at 82%, and heed the plain-language hints that flag 90% and above as modest savings, 70 to 89% as balanced, and lower values as visibly risky on intricate areas.
Format discipline separates smooth catalogs from bloated ones. Photographic supplier files that arrive as multi-megabyte PNGs are photographs wearing a lossless costume: the compressor says so directly, noting PNG output stays lossless and recommending WebP or JPG for much smaller files, with the quality slider disabled for PNG because there is no quality dial on lossless data. Convert those to WebP or JPG at balanced quality after resizing and the file usually becomes a fraction of its former weight with no visible change on the page. Reserve PNG for genuine graphics — logos, badges, size-chart diagrams, screenshots with small text — where exact pixels and transparency justify the weight, and use the PNG to WebP converter when a graphic needs both transparency and a lighter payload. Target-size mode with its 100 KB, 200 KB, 500 KB, and 1024 KB presets plus custom values automates the grind for thumbnails, and its honest miss notice names files that could not reach the goal while keeping the smallest achievable output instead of destroying quality.
Turn compression into a repeatable intake routine
New arrivals deserve a conveyor belt, not a weekend rescue mission. Create three folders per season or category — masters, working, and live — and never let compressed exports overwrite the masters. When supplier imagery lands, quarantine it in masters with filenames that describe the product and variant rather than camera counters, then queue up to 10 files per run at up to 60 MB apiece through the browser-local pipeline, which keeps unreleased designs confidential because nothing travels to a server. Apply one tested combination of output format, quality or target size, and width to the coherent majority, and isolate outliers — neon fabrics that band, metallic surfaces that shimmer, charcoal wool that crushes to mud — for an individual pass with adjusted settings. That triage habit converts a chaotic inbox into uniform gallery grids where every tile shares the same character.
Read the results panel the way an accountant reads a ledger. After each run it shows Original versus Result totals with per-file rows stating bytes before and after plus a percentage delta, an already-optimized notice when savings fall under five percent, and a warning when an output outweighs its source because the input was already lean. Download discipline matters at this point: each file arrives with the new extension appended, batches offer a single Download all (.zip) bundle named after the tool, and a Start over control plus Clear and Cancel buttons make mistaken queues cost seconds rather than re-uploads. Rename during download into shopper vocabulary — product, colorway, angle — so image search and accessibility workflows inherit sensible slugs without a later marathon.
Close the loop with inspection in context, because thumbnails lie. Open hero shots at full magnification and scrutinize gradients for banding, jacquard and herringbone for moiré, printed packaging for legibility, and silhouette edges for halos; then place the survivors into a draft listing and view the carousel, grid tile, and zoomed detail exactly as shoppers will. If an image falters, return to the resized master and re-run gentler — never squeeze the squeezed copy, since repeated encoding stacks artifacts faster than it trims bytes. Schedule the same thirty-second spot check whenever the store platform changes its display sizes or a supplier switches cameras, and log the winning width, format, and quality beside the category so the next intake inherits proven numbers instead of rediscovered guesses.
Recover gracefully from misses, warnings, and stubborn files
Even a practiced routine meets files that refuse to shrink, and the tooling narrates each refusal instead of disguising it. When target-size mode cannot land a photograph under the declared goal without ruining it, the miss notice names the file and quotes the closest achievable size alongside the goal, keeping the smallest honest output rather than degrading pixels until arithmetic complies. The correct response is raising the target to that quoted figure — or splitting duties so the balky panorama keeps a higher allowance while featherweight icons hold a stricter one — then re-running from the untouched master rather than feeding the compressed copy back through. A companion honesty signal appears in the results ledger whenever savings dip under five percent: the file is already well optimized, and further passes waste effort while risking softness.
Growth warnings deserve the same calm reading. Occasionally an output outweighs its input, typically when a lean source meets a mismatched format — a crisp line graphic forced into a photographic encoding, or an already-taut thumbnail re-saved at maximum quality. The panel flags this plainly instead of celebrating phantom savings, and the remedy is structural: switch photographic content out of PNG into JPG or WebP, confirm the Limit width field is not upscaling small originals, and verify the mode selector sits where intended rather than stranded on a leftover target from a prior batch. The Cancel control halts a misconfigured ten-file queue mid-flight, Clear empties the staging area, and Start over resets the results so a corrected configuration begins from a clean slate with masters intact.
Quarantine repeat offenders instead of letting them poison batch averages. Neon activewear that bands across gradients, bronze cookware that shimmers along highlights, charcoal suiting that collapses into murk, and translucent packaging that halos at edges each want bespoke handling: isolate the troublemaker, test gentler quality steps or wider dimensions individually, and record the verdict — dimensions, format, quality — in a shared ledger beside fabric, season, and photographer. Supplier drops with inconsistent white balance or mixed color spaces repay a normalization pass before compression, and seasonal bulk ingests of swimwear, knitwear, denim, and outerwear each earn their own calibration row since per-category textures compress nothing alike. That quarantine log compounds across quarters until stubborn files become solved cases rather than recurring surprises.
Frequently asked questions
What file size should I aim for per product image?
There is no single correct number — it depends on dimensions and detail. A practical approach is picking a target such as 200 KB in target-size mode, checking the result at full zoom, and adjusting up or down from there.
Why is my PNG still large after compressing it?
PNG output stays lossless, so the quality slider is disabled for it and savings come only from smaller dimensions. For photographic PNGs, converting to WebP or JPG usually shrinks the file far more.
Will compression remove the background from my product photos?
No. Compression changes file size and encoding quality, never image content. Background removal is an editing job — compress after the edit is finished.
Should every product image share the same dimensions?
Consistent dimensions make listing grids look tidy and let you reuse one tested setting across the batch. Square crops such as 1080 × 1080 work well for grids; wider shots suit detail views.
Can I reuse one tested setting across mixed supplier photos?
Yes for the coherent majority: shared format, quality, and width apply to all 10 files in a batch, and output names carry the new extension so the set stays organized. Pull outliers out for an individual pass — flat studio shots and busy outdoor scenes respond differently — and when target mode reports a file could not reach the goal, raise the target rather than re-running the output.
Try it now — free, no signup
Reduce image size while keeping the quality you need. Files stay on your device.
Open Image Compressor