Step-by-step image optimisation techniques to reduce page load times, improve conversions, and support accurate attribution for US-based stores and SaaS sites.
Image via 123RF
Fill out the form below and our team will get back to you within 24 hours
Discover what makes us different
Clean, current interfaces built around your brand rather than a stock template.
Designed for mobile first, where the majority of South African traffic lands.
A 2.5 second average load time across the 300+ websites we have built.
Official Shopify partners for ecommerce builds, migrations and support.
Here's what sets us apart from the competition
Find answers to common questions
We build Shopify and WooCommerce sites with a technical-first approach that combines user experience, conversion-rate optimisation, and back-end analytics to support revenue-focused outcomes and scalable growth.
We implement GA4, Google Tag Manager, server-side tracking, and data pipeline practices (ETL) to reduce signal loss and align marketing metrics with actual revenue and customer journeys.
CRO is integrated throughout design and development: we use quantitative analytics and A/B testing to identify friction, iterate page layouts and copy, and prioritise changes that increase revenue per visitor.
Design decisions are evaluated by measurable impacts on conversion rate, average order value, customer lifetime value, and acquisition cost, with priorities set to improve profitability rather than vanity metrics.
We handle both new builds and redesigns as well as migrations, performance optimisation, and technical debt remediation while preserving or improving revenue-critical tracking and integrations.
In This Article
Choose the right format
Serve responsive images
Measure revenue impact
Images are often the largest assets on a page. Poorly optimised images increase time-to-interactive, lower Core Web Vitals, and directly reduce conversion rates - especially for US eCommerce stores on Shopify and WooCommerce. This guide shows how to optimise images for faster website loading while preserving visual quality and accurate analytics.
Slow pages increase bounce at the top of funnel (TOF), reduce engagement at the middle (MOF), and cause cart abandonment at the bottom (BOF). Improving image load time improves metrics across the funnel and helps attribution systems like GA4 register full sessions and conversions more reliably.
Measure before and after optimisations using PageSpeed Insights and Lighthouse, then monitor conversion impact in GA4. For implementation and measurement best practices, see Prebo Digital’s services overview: Services.
| Format | Best for | Notes |
|---|---|---|
| AVIF | Highest compression for photos | Best quality/size ratio; check browser support |
| WebP | Photos and graphics | Good support; widely used for web delivery |
| SVG | Icons, logos, UI | Scales without weight; keep file complexity low |
| PNG | Transparency, simple graphics | Larger than WebP for photos |
For Shopify and WordPress stores, automated generation of WebP/AVIF via build steps or plugins reduces manual work. Prebo Digital’s approach pairs front-end optimisation with server-side tracking to ensure fast load times and accurate attribution - read about our team and experience: About Prebo Digital.
Implement image optimisation in stages: build an automated pipeline, deploy to staging, run performance tests, then roll out. Example implementation flow:
Use srcset and sizes to deliver scaled images. Example pattern (concept):
<img src="image-800.jpg" srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" sizes="(max-width: 640px) 100vw, 50vw" alt="product" loading="lazy"/>
For modern projects, serve picture with type checks to prefer AVIF/WebP and fallback to JPEG/PNG for older browsers.
Example: a US Shopify store reduced homepage weight from 2.5MB to 700KB by converting hero images to WebP, resizing to display sizes, and lazy-loading product thumbnails. Estimated impact: a 0.5-1.2s improvement in LCP and a measurable uplift in mobile checkout conversions. These figures are estimates and will vary by audience and implementation.
If you use analytics for performance-to-revenue correlation, ensure server-side tracking and clean pipelines to avoid double-counting. Learn more about combining optimisation with analytics and tracking via Prebo Digital’s homepage resources: Prebo Digital and see implementation options on our contact page for project inquiries: Contact.
Translate speed gains into revenue by tracking conversion rate by segment (mobile vs desktop), cart value, and recovery rate. A structured test might use an A/B experiment where the test group receives optimised images. For structured growth systems that combine optimisation with CRO and paid media, review our strategic approach in Services: Services.
Image optimisation is iterative. Start with the biggest pages (home, product, collection) and measure conversion impact. Pair image work with code-splitting, font loading strategies, and server-side tracking to ensure performance wins translate to measurable revenue improvements. For implementation partnerships and growth retainers focused on profitability and clean attribution, explore how a structured framework can be applied to your store or platform: Services.
Here's what sets us apart
Don't just take our word for it
Keep reading
Speak with our web design specialists. Free design mockup & consultation.
Get Free Design Quote
