Help guides › Speed and mobile
How to Compress and Resize Photos for Your Shop Website
Photos are usually the heaviest thing on a small-business website. A photo straight off a modern phone is often several megabytes, far bigger than any web page needs. Shrinking photos is the single easiest speed fix most shops can make.
Step 1: Resize to the size it's shown at
If a photo displays about 1,200 pixels wide on the page, there's no benefit to uploading a 4,000-pixel-wide original. As a rule of thumb, full-width banner photos rarely need to be wider than about 2,000 pixels, and photos in a column far less. Your website builder may resize automatically; check its settings, or resize before uploading with any photo editor (the built-in Photos app on most computers can export a smaller copy).
Step 2: Compress it
- Photos: save as JPEG or, better, WebP or AVIF, which are usually smaller at similar quality. Most modern browsers support them.
- Logos, icons and graphics with flat colors: SVG or PNG usually work better than JPEG.
- Compression tools let you choose a quality level. Lower it until you can just see a difference, then go back up a notch.
Step 3: Let the page load images smartly
- Lazy loading: images further down the page can load only when the visitor scrolls near them. Many builders turn this on by default.
- Don't lazy-load the main image at the top of the page. That one should load right away, because it is often what Google's speed measurement (Largest Contentful Paint) is timing.
- Set width and height on images so the page doesn't jump around as they load (this affects the layout-shift score).
Common mistakes
- Image sliders with 6 huge photos at the top of the homepage. One good photo is faster and clearer.
- Uploading the same giant photo for small thumbnails.
- Putting important text (prices, coupons) inside images. Use real text instead; it's lighter, readable by screen readers, and searchable.
After compressing, re-test the page with PageSpeed Insights. Don't forget alt text for each photo.
Check your own site in seconds
Our free website check for auto repair shops looks at one page for broken links, Google basics, phone setup, HTTPS, image descriptions and business details for Google, and explains what it finds in plain English.
Official sources
- web.dev: Learn Images
- web.dev: Choose the right image format
- web.dev: Use WebP images
- web.dev: Browser-level image lazy loading
- PageSpeed Insights
Related guides
- Why Is My Shop Website Slow on Phones? (And How to Speed It Up)
- Core Web Vitals Explained for Shop Owners (LCP, INP, CLS)
- Caching, CDNs and Hosting: Speeding Up Your Shop Website
General information for shop owners, not legal advice. Last reviewed October 2026.