Optimizing Images for the Web
Drag the slider - same photo, compressed and resized.
Unoptimized images are one of the most common causes of a slow storefront. This reference covers the basics for keeping images fast without sacrificing quality.
Choose the right format: use JPEG for photos, PNG when you need transparency, and modern formats like WebP or AVIF when supported for smaller file sizes at similar quality.
Resize before uploading: export images at the actual dimensions they'll display, not larger. A hero banner rarely needs to be wider than about 1920px.
Compress everything: run images through a compression step before uploading; this alone can often cut file size by 50 percent or more with no visible quality loss.
Use responsive images: serve different image sizes for different screen widths with srcset so mobile visitors aren't downloading a desktop-sized file.
Lazy load offscreen images: images below the fold can load only as the visitor scrolls near them, which speeds up initial page load significantly.
Add alt text: beyond accessibility, alt text helps search engines understand image content and improves overall page context.
Small habits like these add up to noticeably faster pages and a better shopping experience.