I spent two hours creating a beautiful infographic image for my best-selling product. Detailed feature callouts, precise dimension lines, a comparison chart with three columns. It looked incredible on my 27-inch monitor.
On my phone, the text was unreadable. The dimension lines were invisible. The comparison chart was a blur of tiny numbers. Two hours of work, completely wasted for 70% of my customers.
That was the wake-up call. I now design every product image mobile-first and check every image on my phone before uploading.
The Mobile Reality
- Amazon: 70%+ of browsing is on mobile
- Shopify: 65-75% of traffic is mobile (varies by store)
- Etsy: 60-70% mobile
- TikTok Shop: 100% mobile
- eBay: 60-65% mobile
If you're only checking your images on a desktop monitor, you're optimizing for the minority of your customers.
What Changes on Mobile
Text Becomes Unreadable
Text that's perfectly legible at 24pt on a desktop monitor becomes microscopic on a phone. The image is displayed at maybe 400px wide on a phone screen — your 2500px image is shrunk to 16% of its original size.
Rule: Any text in your product images must be readable when the image is displayed at 400px wide. In practice, this means:
- Minimum 36pt font (at 2500px image size)
- Maximum 4-5 words per callout
- High contrast (dark text on light background or vice versa)
- Sans-serif fonts (easier to read at small sizes)
Details Disappear
That beautiful stitching detail? Invisible on mobile. The subtle texture of the leather? Gone. The small logo on the product? A blur.
Rule: If a detail matters, give it its own dedicated close-up image. Don't rely on customers zooming in — most mobile users don't zoom on product images.
Product Looks Smaller
A product that fills 70% of the frame on desktop fills 70% of a much smaller frame on mobile. The product becomes a small object on a small screen.
Rule: Fill 85-90% of the frame for main images. On mobile, bigger is always better.
Swiping vs Scrolling
On desktop, customers see multiple images at once (thumbnail strip). On mobile, they swipe through images one at a time. This changes how you should order your images.
Rule: Front-load your best images. The first 3 images get the most views on mobile. Put your hero shot, lifestyle shot, and key feature infographic in positions 1-3.
My Mobile Optimization Checklist
Before uploading any product image, I check it on my phone:
- [ ] Can I identify the product immediately at thumbnail size?
- [ ] Can I read all text without zooming?
- [ ] Are important details visible without zooming?
- [ ] Does the product fill enough of the frame?
- [ ] Do the first 3 images tell a complete story?
If any answer is "no," I fix it before uploading.
Infographic Redesign for Mobile
My old infographic style: 6 feature callouts with detailed descriptions, dimension lines with measurements, a comparison table.
My new infographic style: 3 feature callouts with 2-3 word labels, large icons, bold text. One piece of information per image instead of cramming everything into one.
Before (one busy infographic):
- 6 features with descriptions
- Dimensions with measurements
- Material specifications
- Comparison chart
After (three simple infographics):
- Image 1: 3 key features with large icons and short labels
- Image 2: Dimensions with large numbers and clear lines
- Image 3: Material close-up with one-word labels
More images, less information per image. Each image communicates one thing clearly instead of six things poorly.
The Zoom Myth
"Customers can just zoom in to see the details."
On desktop, yes. Hover-zoom is intuitive and most customers use it.
On mobile, zooming requires a deliberate pinch gesture. In my analytics, less than 15% of mobile users zoom into product images. The other 85% make their purchase decision based on what they can see at the default display size.
Design for the 85%, not the 15%.
Testing on Mobile
I use three devices for testing:
- My phone (iPhone) — primary check
- My partner's phone (Android) — different screen size and rendering
- Chrome DevTools mobile emulation — quick check without picking up a phone
The Chrome DevTools method: right-click → Inspect → toggle device toolbar → select a phone model. It's not perfect (screen brightness and color differ from real devices) but it catches the obvious issues.
The Impact
After redesigning all my product images for mobile:
- Mobile conversion rate: +28% (from 2.1% to 2.7%)
- Mobile bounce rate: -15% (from 52% to 44%)
- Mobile time on page: +22% (from 35s to 43s)
Desktop metrics stayed the same — mobile-optimized images work fine on desktop too. But desktop-optimized images fail on mobile.
For the image processing, I use pic1.ai which outputs at the right resolution for each platform. But resolution alone doesn't solve the mobile problem — you also need to design the content of each image with mobile viewing in mind.
For the technical image optimization (file size, lazy loading, Core Web Vitals), check out how I fixed my PageSpeed score. And for the infographic design tips, here's what I learned testing 30 Amazon infographic designs.