Knowledge base — Definition
Image Optimization
Learn image optimization techniques for faster websites. Compress, resize, and serve WebP images to improve Core Web Vitals and SEO for your Toronto business.
What Is Image Optimization?
Image optimization is the process of reducing image file sizes while maintaining visual quality, ensuring your Toronto business website loads quickly and ranks well on search engines. Properly optimized images improve Core Web Vitals scores, reduce bandwidth costs, and create a better user experience across all devices.
Images typically account for 50-65% of a web page’s total weight. Unoptimized images are the single biggest cause of slow websites, and slow websites lose visitors and search rankings. For Toronto businesses competing in local search, image optimization directly impacts your Google rankings through Core Web Vitals.
Image Optimization Techniques
1. Choose the Right Format
Select the best image format for each use case: JPEG for photographs and complex images with many colours, PNG for images requiring transparency or sharp edges like logos, WebP for modern browsers (30% smaller than JPEG with similar quality), and SVG for icons and simple graphics that scale without quality loss. WebP is now supported by over 95% of browsers and should be your default choice for web images.
2. Compress Images
Compression reduces file size without significantly affecting quality. Lossy compression removes some image data for smaller files — ideal for photographs where slight quality loss is acceptable. Lossless compression preserves all data with modest size reduction — better for graphics and logos. Tools like TinyPNG, Squoosh, and WordPress plugins like Smush or ShortPixel automate compression during upload.
3. Resize Before Uploading
Never upload images larger than needed. If your website displays images at 800px wide, uploading a 4000px original wastes bandwidth and processing time. Resize images to their display dimensions before uploading. WordPress does generate smaller versions, but the original file is still stored and served to some contexts.
4. Implement Lazy Loading
Lazy loading defers loading images that aren’t visible on the initial screen, loading them only as the user scrolls down. This dramatically reduces initial page load time and saves bandwidth. WordPress includes native lazy loading since version 5.5 — just add loading="lazy" to image tags or enable it through your theme or caching plugin.
5. Use Responsive Images
Responsive images serve different image sizes based on the visitor’s screen size. WordPress automatically generates multiple image sizes and uses srcset attributes to serve the appropriate version. This means mobile users download smaller images while desktop users get full-resolution versions.
6. Add Descriptive Alt Text
Alt text (alternative text) describes images for screen readers and search engines. Write descriptive, keyword-relevant alt text for every image — it improves accessibility, helps Google understand your images, and can drive traffic through Google Image Search. For Toronto businesses, include relevant local context in alt text where appropriate.
Image Optimization and SEO
Google uses page speed as a ranking factor, and images are the biggest opportunity for improvement. Optimizing images can reduce page load time by 30-50%, directly improving Core Web Vitals scores. Image search also drives significant traffic — properly named files, descriptive alt text, and surrounding content help Google index your images correctly. For Toronto businesses, optimized images mean faster pages that rank higher and convert better.
Frequently Asked Questions
What is the best image format for websites?
WebP is the best format for most web images — it’s 30% smaller than JPEG with similar quality and is supported by over 95% of browsers. Use JPEG for photographs if WebP isn’t available, PNG for transparent images, and SVG for icons and logos.
How much can image optimization improve page speed?
Image optimization typically reduces page load time by 30-50%. For image-heavy pages, the improvement can be even more significant. Combined with lazy loading and a CDN, optimized images can bring a 5-second page down to under 2 seconds.
Does image optimization affect SEO?
Yes, significantly. Unoptimized images slow your site, which hurts Core Web Vitals scores and Google rankings. Alt text helps Google understand images for search indexing. Properly sized and compressed images improve both user experience and search performance.
Related Resources
Further reading: Learn images — web.dev.