A 400px card requesting a 4000px JPEG fails LCP even if quality is “optimized.” Geometry first: content column 720px → ~1440px bitmap for 2×. Full-bleed heroes 1200–1920 depending on the theme. Shopify PDPs often use 2048 on the long edge for zoom; collection tiles are smaller — one master, derivatives.
Open Graph / Slack unfurls: 1200×628-class. Favicons: 32×32 and 180×180 from a PNG master (PNG spoke for alpha). Logos in headers: retina 2× of the CSS height, PNG or SVG — not a photographic crush.
WordPress will generate sizes, but a 20 MB original still hurts backups and clumsy themes that request full. Amazon and eBay have their own minima — listing stills can be larger than a marketing site card; export two files. Encode after the box. HEIC: convert before the CMS.
100% client-side · No uploads · Powered by HTML5 Canvas
Need the main tool? Image Resizer
Written by Safaat Rahman Siham, Founder & Developer at Convertify4u. Contact us.
Pixels that rank because they match the layout
LCP is decode and transfer of the largest above-the-fold still
If that still is a Camera dump, lab and field scores suffer. Export near the displayed size. 600–800px cards, 1200–1600px article heroes, 1920 only if the theme is truly full-bleed on large desktops. Then Image Compressor. srcset is a developer follow-up; garbage masters still hurt.
Commerce grids versus marketplace zoom
Shopify collection cards want uniformity (often square). Amazon main images want enough pixels to zoom and often a white field (isolation is another tool). Do not ship one 6000px PNG to both. 2048-class PDP, smaller card, both sized here.
Brand crumbs: logo, icon, favicon
Downscale PNG with alpha (png spoke). 32×32, 180×180, 512 PWA. Never JPEG a mark that needs holes. Thumbnail cards: 400–800px wide is enough for most blogs.
How it works
- 1
Measure how large the still renders in CSS
DevTools or a ruler. Multiply by 2 if you serve 2×. That ceiling is the export width.
- 2
Export heroes and banners to that ceiling
1920×1080 is a common full-bleed. 1200×630-class for many OG cards. Do not confuse them.
- 3
Publish, then encode if KB remains the issue
Reduce-size spoke or Image Compressor. Wrong pixels cannot be fixed by a quality slider.
Use cases
Shopify product grids
Uniform squares so masonry does not jump.
Blog featured stills
1200×630-class OG-friendly heroes.
Newsletter banners
600px wide is still a common email width.
Favicon packs
From a large PNG master, not a screenshot of a header.
Problems we solve
Camera originals in WordPress
The CMS is not a magic performance layer. Size first.
Marketplace rejections
Amazon/eBay pixel minima and maxima. Hit the integers, then encode.
10× “retina” mistakes
2× of the CSS size is enough. 10× is a Camera dump.
Trust & technology
Local SEO-friendly exports
Right-size before CDN. No middleman copy.
Crisp thumbs
High-quality downsample for grids.
No watermark
Production storefront stills.