Images make websites beautiful and engaging, but they're also the largest source of bloat that slows down pages. A single unoptimised image can add 5-10 seconds to load time, especially for visitors on slower connections. Since Google now uses page speed as a ranking factor, and slow websites drive away customers, image optimisation isn't optional—it's essential. The good news is you don't need to use tiny, low-quality images to be fast. With modern techniques and tools, you can maintain visual quality while dramatically reducing file sizes.
Why Image Size Matters for Website Speed
Every image on your website must be downloaded by each visitor. Larger files mean longer downloads, especially for people on mobile networks or slower connections. This matters because:
- User experience: People abandon slow websites. Studies show each additional second of load time reduces conversions.
- SEO rankings: Google prioritises fast-loading websites in search results.
- Mobile experience: Many Ontario customers browse on phones with limited bandwidth. Oversized images ruin the experience.
- Accessibility: Poorly optimised sites frustrate visitors with disabilities who rely on adaptive technology.
A professional website image optimisation strategy ensures every picture loads quickly without sacrificing the visual quality that attracts customers.
Modern Image Formats: WebP and AVIF
JPEG and PNG, the traditional web image formats, are outdated. Modern formats like WebP and AVIF compress images far more effectively while maintaining quality. WebP files are typically 25-35% smaller than JPEGs. AVIF, the newest standard, compresses even further.
WebP is widely supported across browsers now, and AVIF support is growing rapidly. The smart approach is offering multiple formats: modern browsers get WebP or AVIF, while older browsers fall back to JPEG or PNG. This is called "progressive enhancement" and gives everyone the best experience their browser supports.
You don't need to manually create these formats. Online tools and your website platform can handle conversion automatically. When you upload an image, the system generates optimised versions in modern formats without extra effort on your part.
Image Compression Tools and Techniques
Compression reduces file size by removing unnecessary data. "Lossy" compression removes some data to reduce file size (generally unnoticeable), while "lossless" compression removes only redundant data (no quality loss). For photography and illustrations, lossy compression offers the best balance.
Popular optimisation tools include:
- TinyPNG/TinyJPG: Simple drag-and-drop compression that removes up to 70% of file size.
- ImageOptim (Mac) or FileOptimizer (Windows): Local applications for batch processing multiple images.
- Squoosh (Google): Free web-based tool with visual comparison showing quality vs. compression trade-offs.
- Built-in CMS tools: Many platforms automatically optimise images when you upload them.
Aim for a balance: an image that looks sharp and professional but isn't unnecessarily large. For web, images under 200KB usually load instantly. Most website platforms optimise automatically, but knowing these tools helps you understand what's happening behind the scenes.
Lazy Loading: Loading Images Only When Needed
Lazy loading defers image loading until the moment a visitor scrolls near that image. This dramatically improves initial page load time, especially for image-heavy pages. Instead of loading every image on the page (many of which visitors might never see), lazy loading only loads visible images.
For technical implementation, adding the "loading=lazy" attribute to image tags is simple. For older browsers that don't support native lazy loading, JavaScript libraries provide fallback functionality. Modern website platforms handle this automatically—you just need to ensure it's enabled.
The benefit is significant: a portfolio page that previously took 8 seconds to load might now load in 2-3 seconds, with remaining images loading as users scroll. This keeps visitors on your page instead of bouncing away.
Responsive Images for All Device Sizes
A visitor on an iPhone doesn't need a 4000-pixel-wide image. A desktop visitor does. Responsive images serve different sizes depending on device, reducing unnecessary data transfer on mobile.
Using the "srcset" attribute, you can provide multiple image versions. The browser automatically selects the right size for the device being used. A visitor on a phone might download a 800-pixel version, while a desktop visitor gets a 2000-pixel version. Both see sharp images, but the mobile visitor saves bandwidth.
Most modern website builders handle this automatically. When you upload an image, the platform generates multiple sizes and serves the appropriate version to each device. This "mobile-first" approach ensures your website stays fast across all devices.
Alt Text: SEO and Accessibility
Alt text (alternative text) describes images in words. It serves two purposes: helping screen readers describe images to visitors with visual impairments, and helping search engines understand what images show.
Good alt text is descriptive but concise: "Portrait of owner Sarah Johnson at the office" rather than "image123.jpg" or "picture." Alt text naturally includes keywords relevant to your business—"professional headshot" tells both search engines and screen readers what the image contains.
When optimising images, never skip alt text. It improves accessibility for all visitors and contributes to your SEO strategy. For images that are purely decorative, use empty alt text (alt="") so screen readers skip them without reading irrelevant information.
CDN and Image Delivery Networks
A Content Delivery Network (CDN) stores copies of your images on servers around the world. When a visitor requests an image, they receive it from the server nearest them, reducing latency. For Ontario businesses with customers worldwide, a CDN can cut image load times in half.
Services like Cloudflare offer CDN functionality for reasonable costs. Your website platform might include CDN access automatically. The benefit compounds for image-heavy sites—portfolios, e-commerce sites with product galleries, and media-rich blogs all see dramatic speed improvements.
Image Dimensions: Setting Height and Width
Specifying image width and height in HTML prevents layout shift—the annoying effect where page elements move around as images load. Layout shift hurts user experience and also impacts your search ranking.
By declaring "width: 800px" and "height: 600px" on an image tag, the browser reserves the appropriate space before the image downloads. Content doesn't suddenly jump when the image appears. This seems technical, but modern website platforms handle it automatically.
Reducing Image Count Strategically
Sometimes the best optimisation is using fewer images. Before adding an image, ask: Does this image communicate something words can't? Does it add genuine value? Unnecessary decorative images slow the site without benefit.
Strategic image use is better than maximum image use. A portfolio page with carefully chosen before-and-after photos loads faster and has more impact than a page with dozens of cluttered images. Smart website photography choices balance visual appeal with performance.
Monitoring Image Performance
Website analytics tools reveal how image optimisation affects real users. Google PageSpeed Insights identifies unoptimised images and suggests improvements. GTmetrix provides detailed performance reports including image analysis.
Monitor these metrics:
- Total page size and load time
- Cumulative Layout Shift (how much content moves around)
- Largest Contentful Paint (how long before the main image appears)
- Number of unoptimised images slowing the site
Review these reports quarterly. As you add new images, ensure they follow optimisation standards. Many slow websites become slower gradually—continuous attention prevents this.
Putting It All Together
Image optimisation isn't one thing—it's a system. Modern formats + compression + lazy loading + responsive images + CDN delivery + alt text = a fast, accessible, search-engine-friendly website. Good news: most professional website platforms handle this automatically once configured correctly.
If you're managing a website with countless unoptimised images, professional help makes a difference. Heartwood Digital creates custom websites starting at $750, built on platforms that automatically optimise images, lazy load content, and serve appropriate formats to every device. Let's discuss building a fast, optimised website during a free consultation.
Real-World Impact
A portfolio website that previously loaded in 12 seconds can be optimised to load in 3-4 seconds through image strategies alone. That 8-9 second improvement means more visitors stay on your site, more look at your work, and more become customers. Search rankings improve too—Google notices the speed improvement and ranks you higher.
Fast websites matter. Our managed hosting at $75/month keeps your optimised website running smoothly, with automatic backups, security updates, and performance monitoring so your site stays quick and reliable.
Sources
- Google. (2024). PageSpeed Insights and Core Web Vitals Documentation. Technical guidance on image optimisation and performance metrics. Retrieved from developers.google.com/speed
- Mozilla Developer Network. (2025). Image Optimisation and Responsive Images Guide. Standards-based best practices for modern image formats and delivery. Retrieved from developer.mozilla.org