Understanding Image Optimisation for the Modern Web

Images play a pivotal role in web design and content delivery, enhancing visual engagement and improving user experience. However, unoptimised images can severely hinder website performance, contributing to slower load times, higher bounce rates, and reduced search engine rankings.

Proper image optimisation ensures that visual content loads quickly without compromising quality, leading to better performance, accessibility, and user satisfaction.

According to various performance studies, images can account for up to 70% of a page’s total weight. Therefore, optimising them is often the most effective way to improve load speed and overall web performance.

Key Concepts in Image Optimisation

To optimise images effectively, web developers and designers must understand a few core principles:

• Compression: Reducing file size while maintaining acceptable quality.
• Resizing: Delivering images that match the display dimensions.
• Responsive delivery: Serving different images based on device or viewport size.
• Caching and CDN usage: Ensuring optimised delivery through content delivery networks.
• Format selection: Choosing the most appropriate image format for the use case.

These principles work together to improve page performance, especially when tailored to the content and audience of the site.

Choosing the Right Image Format

Image formats differ in compression methods, transparency support, and compatibility. Selecting the appropriate format is essential.

WebP, introduced by Google, supports both lossy and lossless compression, transparency, and animation. It’s increasingly supported across major browsers and provides significant file size reductions compared to JPEG and PNG.

AVIF (AV1 Image File Format) is a newer format offering superior compression with high visual fidelity. However, browser support is still growing.

JPEG XL, an emerging format, aims to combine the best aspects of JPEG, PNG, and WebP. Though promising, it is not yet universally supported.

Compression Techniques

Compression is crucial for reducing file size. It is divided into:

• Lossy Compression: Removes some image data, reducing quality to a degree. Best for photos where exact fidelity is less critical.
• Lossless Compression: Retains all image data, ideal for line art, text overlays, and UI components.

Many tools exist for applying these techniques:

Developers should strive to find the optimal balance between quality and file size.

Resizing and Scaling Images

Large images scaled down using HTML or CSS still force the browser to load the full-sized file. Therefore, resizing images to exact display dimensions before uploading is critical.

Best Practices:

• Resize images to the maximum dimensions required on the site.
• Use responsive images via the srcset and sizes attributes.
• Avoid relying solely on CSS for image scaling.

Example:

<img
  src="https://www.platformexecutive.com/news/blog/image-optimisation/image-480.jpg"
  srcset="https://www.platformexecutive.com/image-480.jpg 480w, https://www.platformexecutive.com/image-800.jpg 800w, https://www.platformexecutive.com/image-1200.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px"
  alt="Example of responsive image">

This ensures different devices receive appropriately sized images.

Lazy Loading and Image Delivery Optimisation

Lazy loading defers the loading of images until they are needed (for example, when they appear in the viewport). This can greatly reduce initial page load time.

Modern browsers support the native loading="lazy" attribute:

<img src="https://www.platformexecutive.com/news/blog/image-optimisation/photo.jpg" alt="Scenic view" loading="lazy">

Further performance benefits can be achieved by:

• Using a Content Delivery Network (CDN) to serve images closer to users.
• Implementing browser caching with appropriate HTTP headers.
• Adopting HTTP/2 or HTTP/3 for faster parallel downloads.

Implementing Responsive and Adaptive Images

To cater to diverse devices and connection speeds, images should be both responsive (adapt to screen size) and adaptive (adapt to user conditions).

Key Methods:

• srcset and sizes for responsive images.
• <picture> element for format adaptation:

<picture>
  <source srcset="https://www.platformexecutive.com/image.avif" type="image/avif">
  <source srcset="https://www.platformexecutive.com/image.webp" type="image/webp">
  <img src="https://www.platformexecutive.com/news/blog/image-optimisation/image.jpg" alt="Example fallback">
</picture>

• Use of client hints and server-side logic for image customisation.

Optimising Background Images in CSS

Background images should also be optimised. Unlike <img>, they can’t use srcset, so consider:

• Avoiding large background images unless necessary.
• Using CSS sprites to combine small images into one file.
• Creating multiple versions for different screen sizes and applying via media queries:

@media (max-width: 600px) {
  body {
    background-image: url('bg-small.webp');
  }
}
@media (min-width: 601px) {
  body {
    background-image: url('bg-large.webp');
  }
}

Image CDN and Automation Solutions

Image CDNs like Cloudinary, Imgix, ImageKit, and Fastly provide automatic optimisation, format conversion, and resizing. These services detect the user’s device and serve the optimal image in real time.

Benefits:

• On-the-fly compression
• Format conversion (for example, to WebP or AVIF)
• Caching and fast delivery
• Custom transformations via URL parameters

SEO and Accessibility Considerations

Optimised images also play a role in search visibility and user experience.

Best Practices:

• Use descriptive alt text for every image.
• Include meaningful filenames (for example, sunset-over-lake.jpg).
• Use structured data for image-rich content.
• Provide image sitemaps for large image libraries.

This not only helps visually impaired users but also enhances indexability in search engines.

Image Optimisation Workflow for Developers

An efficient image workflow ensures consistency and automation.

Suggested Workflow:

1. Design: Export images at required dimensions.
2. Convert: Use tools to convert to modern formats (WebP, AVIF).
3. Compress: Run batch compression tools (Squoosh CLI, ImageMagick).
4. Implement: Use responsive HTML elements.
5. Lazy Load: Enable native or JS-based lazy loading.
6. Audit: Use Lighthouse or WebPageTest for performance monitoring.

Performance Monitoring and Auditing

Regular audits ensure image optimisations are effective.

Tools to Use:

• Google Lighthouse: Offers image format and compression recommendations.
• WebPageTest: Visualises image load order and size impact.
• Chrome DevTools: Provides real-time analysis of image loading.
• PageSpeed Insights: Flags unoptimised images.

Look for the following metrics:

• Image weight in total page size.
• Time to First Byte (TTFB).
• Largest Contentful Paint (LCP).

Content Management System Integration Strategies

Integrating effective image optimisation within a Content Management System (CMS) can significantly streamline workflows and ensure that performance best practices are maintained. Most modern CMS platforms such as WordPress, Joomla, and Drupal offer a variety of tools and plugins that automate optimisation tasks like compression, resizing, lazy loading, and format conversion.

For WordPress users, plugins like Smush, Imagify, and ShortPixel allow for automatic image compression and conversion to next-gen formats such as WebP upon upload. These tools often provide options for bulk optimisation, backup of original files, and integration with Content Delivery Networks (CDNs). Joomla and Drupal users benefit from similar extensions that support dynamic image resizing and cache management.

Another important strategy involves ensuring that CMS media settings are correctly configured. This includes defining multiple image sizes (for example, thumbnail, medium, large) to serve appropriately scaled images depending on context. CMS themes and templates should be designed to pull the correct image size based on layout requirements, avoiding unnecessarily large files.

Developers working with headless CMS platforms like Strapi or Contentful must manage optimisation via their frontend frameworks (for example, Next.js or Gatsby). These systems often leverage build-time tools like sharp for image transformation, with support for lazy loading and responsive formats through <picture> elements or frameworks such as next/image.

Security should also be considered. Limiting file types and dimensions prevents large or malicious image uploads. Many CMS plugins now include these controls as standard.

Image Optimisation for E-Commerce Sites

E-commerce platforms are inherently image-heavy, with product listings, category pages, zoomable product galleries, banners, and lifestyle photography all competing for page load budgets. As such, image optimisation is vital not just for performance but for conversion rate and SEO.

Platform-specific solutions often lead the way. Shopify provides built-in image compression and supports WebP natively across modern themes. For Magento (Adobe Commerce), third-party extensions or CDN integration are often required to enable advanced optimisation, including AVIF support or lazy loading of image grids. WooCommerce (WordPress-based) relies on general WordPress media strategies but can be significantly enhanced with plugins and themes that prioritise image efficiency.

Product images should be served in different sizes based on their function. Thumbnails, gallery views, and zoomed-in details each warrant different resolutions. This can be managed through responsive image techniques like srcset and sizes or automated via image CDNs that dynamically generate and serve appropriately sized images on-the-fly.

One best practice is to separate lifestyle or promotional photography (often larger and more stylised) from core product photos, and apply different compression levels and formats. For example, AVIF or WebP is ideal for clean product shots, while JPEG may still be suitable for editorial imagery where broader compatibility or artefact tolerance is acceptable.

Zoomable and 360-degree product views should be treated with care. These features can be heavy and may impact mobile performance unless conditionally loaded or selectively degraded.

Visual consistency also plays a commercial role. Cropping and background removal tools can streamline appearance, and optimised images with neutral backgrounds load faster and appear more uniform in product listings.

Ultimately, image optimisation in e-commerce is not solely about saving bandwidth, it directly influences user experience, page speed, bounce rate, and sales. A systematic approach involving responsive images, CDN-backed delivery, format conversion, and compression policies is essential for scalable success.

Accessibility-First Image Design

Image optimisation efforts must go hand-in-hand with accessibility to ensure all users can experience the content equally. Accessible design doesn’t stop at readable text—it also encompasses non-text elements like images, icons, and infographics.

The most critical step is the effective use of the alt attribute. Each image must include descriptive alternative text that conveys its purpose. For decorative images, a blank alt="" tells screen readers to skip it, avoiding unnecessary noise. Functional images, such as buttons or icons, should describe their function, for example, alt="Search" on a magnifying glass icon.

When compressing images or using new formats, developers must ensure assistive technologies can still interpret the visual context. This involves maintaining compatibility with screen readers and ensuring that images are not embedded in inaccessible formats like background images or inline SVGs without fallbacks.

High-contrast imagery is also key, particularly for users with low vision. If images contain embedded text (which is generally discouraged), it must meet WCAG contrast ratios and not convey critical information unavailable elsewhere on the page.

Responsive design introduces further complexity. As image containers resize, alt attributes and captions should remain visible and meaningful. Care must also be taken when using lazy loading. If improperly implemented, lazy-loaded images may not be announced by screen readers or may delay their appearance in ways that disrupt keyboard navigation.

Icon fonts or images used purely for visual indicators (for example, warning signs, arrows) must either have appropriate aria-labels or be paired with accessible text. SVGs, while versatile and resolution-friendly, must include <title> and <desc> tags if used for complex illustrations.

Accessibility audits should include manual and automated checks to verify that all images meet inclusive design principles. Tools like Axe, Lighthouse, and screen reader testing are invaluable in this process.

By prioritising accessibility throughout the image optimisation process, developers not only meet compliance standards but deliver a more inclusive, effective user experience.

Legal and Ethical Considerations

While technical efficiency is the primary focus of image optimisation, legal and ethical concerns play a significant role in web development and content strategy. These considerations impact how images are sourced, presented, and stored.

Copyright compliance is foundational. All images must be properly licensed, whether sourced from stock photography, creative commons libraries, or generated in-house. Developers and content managers must avoid hotlinking images from third-party websites or using assets without appropriate attribution or permissions, even if they appear to be in the public domain.

Creative Commons (CC) licences require careful reading. Not all CC images are approved for commercial use, and many require attribution. Sites using CC-licensed media must include credits, which must remain legible and accessible across devices.

For user-uploaded images, terms and conditions must clearly state ownership rights, consent for display, and data storage policies. Image moderation systems may be necessary to ensure inappropriate or illegal content is not published.

GDPR and other privacy regulations introduce additional concerns. For example, images showing identifiable individuals (especially minors) may be considered personal data under the GDPR. Developers must provide mechanisms for consent management and honour data removal requests, including deletion from CDNs and back-ups.

Hosting optimised images on third-party CDNs can raise jurisdictional issues, especially if data sovereignty is a concern. For example, European businesses may prefer EU-based CDNs to avoid legal entanglements with non-EU data handling laws.

Ethically, websites should avoid using manipulative or deceptive imagery, such as altered product images that exaggerate benefits, or compressing images so aggressively that they misrepresent the product.

Inclusivity is also a growing ethical concern. Image libraries should reflect diversity in gender, ethnicity, age, and ability to promote accurate and fair representation.

Ethical sourcing, user privacy, and fair attribution are as essential as technical performance. Ensuring that images are optimised responsibly protects organisations from legal exposure while reinforcing brand credibility and trust.

Image Optimisation in Mobile-First and PWA Environments

Mobile-first design principles demand a fundamental rethinking of how images are served and prioritised. In mobile contexts, images must be smaller, faster to load, and intelligently selected to suit variable screen sizes, device capabilities, and network conditions.

One of the core strategies is the use of responsive images through the <picture> element, combined with srcset and sizes attributes. These allow developers to serve different image versions based on screen width, pixel density, and orientation. For mobile devices, lower resolution images or cropped alternatives (for example, square thumbnails) often perform better without compromising the visual experience.

Progressive Web Apps (PWAs) take this further by integrating offline support and background syncing. Service Workers can cache image assets intelligently, enabling seamless offline access and faster subsequent loads. When images are precached or lazily fetched and stored using CacheStorage, users benefit from snappy experiences even in poor connectivity zones.

Modern image formats are especially critical in mobile-first environments. AVIF and WebP often offer up to 30–50% file size savings over JPEG and PNG, with equivalent or better visual quality, ideal for conserving mobile data.

Another best practice is conditional loading. For example, instead of loading all product images immediately, developers can use Intersection Observer APIs to trigger image downloads only when they scroll into view. This reduces Time to Interactive (TTI) and saves data.

In mobile apps and PWAs, prioritising critical content images (for example, logos, hero banners) above the fold, while delaying non-essential visual assets, helps improve perceived performance. Coupled with image placeholders or low-quality image previews (LQIP), these techniques smooth the visual loading experience.

Finally, it’s important to test image performance across a range of devices and network speeds. Tools like Chrome DevTools, Lighthouse, and WebPageTest allow developers to emulate slow connections and analyse image behaviour.

By tailoring image strategies to the constraints and opportunities of mobile-first and PWA contexts, developers can create experiences that are both performant and robust across the user journey.

Conclusion

Effective image optimisation is no longer optional in modern web development—it is a fundamental component of performance, user experience, and accessibility. With the evolution of new image formats such as WebP and AVIF, developers and designers now have the tools to significantly reduce image file sizes without compromising quality. This not only speeds up page load times but also contributes to improved SEO rankings, reduced server load, and enhanced mobile performance.

The strategies discussed throughout this Covering the Bases article, ranging from responsive image delivery and automation via CI/CD, to specific considerations for e-commerce and CMS platforms—illustrate that image optimisation is a multidisciplinary task. It requires technical execution, aesthetic judgement, and strategic planning to ensure optimal outcomes.

Incorporating ethical and legal considerations, particularly around licensing and accessibility, ensures that web images serve not just performance goals but also inclusivity and compliance standards. Likewise, integrating with modern development workflows and mobile-first frameworks ensures that sites remain competitive in a mobile-centric and performance-driven landscape.

Ultimately, image optimisation should be treated as an ongoing, iterative process, revisited regularly as browser capabilities, design trends, and user expectations evolve. By staying informed and applying the techniques detailed in this guide, developers and content creators can build faster, cleaner, and more accessible web experiences for all users.

Trends and Future Outlook

The image optimisation space is evolving rapidly with:

• Increased AVIF and JPEG XL adoption
• AI-powered compression algorithms
• Edge-based image processing
• Greater integration with design tools (Figma plugins)

Staying current with these trends ensures web teams are prepared to deliver high-performance, future-proof experiences.