Using Performant Next-Gen Images in CSS with image-set()

What CSS image-set() Does

The image-set() CSS functional notation allows browsers to automatically select the most appropriate image from a given set based on multiple factors:

• Device pixel ratio to match screen resolution
• Supported image formats available in the browser
• Network conditions that may influence download speed preferences

Rather than requiring complex JavaScript detection, image-set() delegates selection to the browser, which knows the user's device characteristics including display density, supported MIME types, and current connection quality.

For background images specifically, image-set() provides capabilities that the HTML srcset attribute cannot offer. When working with CSS background-image properties, developers previously had limited options for responsive or format-aware image delivery. The image-set() function closes this gap, enabling sophisticated image selection directly within stylesheets without requiring markup changes or JavaScript interventions. This proves essential for hero sections, card components, and decorative elements where srcset cannot be applied.

Implementing modern CSS techniques like image-set() is a core part of our professional web development services, ensuring your websites leverage the latest standards for optimal performance.

Why Next-Gen Image Formats Matter

AVIF and WebP formats offer substantially smaller file sizes compared to traditional JPEG and PNG formats while maintaining equivalent or superior image quality:

• AVIF: Derived from AV1 video codec, exceptional compression capabilities
• WebP: Widespread browser support, excellent balance between compression and compatibility
• Benefits: Faster page loads, reduced bandwidth, improved Core Web Vitals

AVIF, derived from the AV1 video codec, represents the newest generation of image formats with exceptional compression capabilities. WebP, developed by Google, has achieved widespread browser support and offers an excellent balance between compression efficiency and compatibility. Both formats enable developers to deliver visually rich experiences without the performance penalties traditionally associated with high-quality imagery. Savvy's implementation guide demonstrates how teams achieve 25-50% file size reductions compared to JPEG, making next-gen formats essential for performance-focused development.

Resolution Descriptors

The x notation indicates device pixel ratio requirements:

• 1x: Standard resolution displays including most laptops, desktop monitors, and older mobile devices
• 2x: High-density Retina displays found on modern MacBooks, iPhones, and premium Windows devices
• 3x: Latest high-resolution mobile devices including flagship smartphones and professional displays

Each image must have a unique resolution descriptor to prevent ambiguous selection behavior. The browser evaluates the device pixel ratio and selects the matching option, ensuring crisp rendering without forcing all users to download unnecessarily large files. A user browsing on a standard 1x laptop will receive appropriately sized images, while an iPhone user with a 2x or 3x display will receive higher resolution variants that match their device capabilities. CSS-Tricks documents that this approach prevents over-downloading while maintaining visual quality across the device spectrum.

Format Descriptors with type()

The type() descriptor specifies MIME type for format-based selection. Browsers evaluate declarations in order, selecting the first format they can display:

1. AVIF (most efficient, newest)
2. WebP (widely supported, excellent compression)
3. JPEG/PNG (universal fallback)

This ordering ensures modern browsers receive optimal images while older browsers gracefully fall back to supported alternatives. WebP enjoys nearly universal support in modern browsers, while AVIF support has expanded rapidly since its introduction. According to MDN Web Docs, this progressive enhancement approach allows developers to prioritize smaller, more efficient formats without leaving users with older browsers without a functional experience.

Implementation for Background Images

CSS background images require different optimization approaches than HTML img elements. The srcset attribute works exclusively with img tags, leaving CSS backgrounds without native responsive capabilities. Image-set() fills this gap for:

• Hero sections with large background images
• Card components and feature sections
• Decorative elements and section dividers
• Call-to-action backgrounds

For Next.js applications where Core Web Vitals directly influence search visibility, properly optimized background images significantly impact Largest Contentful Paint metrics. Our search engine optimization services emphasize technical performance factors like image optimization to improve search rankings and user experience. Hero sections featuring large background images that load quickly contribute to better LCP scores. Image-set() enables delivery of appropriately sized and formatted images based on the viewing device, ensuring fast initial rendering without compromising visual impact. Savvy's performance analysis shows that implementing format-aware image selection for background elements can reduce LCP times substantially compared to static image declarations.

Browser Support and Fallback Strategies

Image-set() achieved Baseline availability in September 2023, meaning full support across Chrome, Firefox, Safari, and Edge. However, fallback strategies ensure graceful degradation for older browser versions and edge cases:

Legacy browser handling: Browsers that don't recognize image-set() ignore it entirely and use the standard background-image declaration before it. This enables progressive enhancement where modern browsers receive optimized images while legacy browsers access a functional fallback.

WebKit prefix: Earlier Safari and Chrome versions required -webkit-image-set(). Including both ensures maximum compatibility across browser version variations, particularly for organizations with extended browser update cycles.

Performance Optimization Benefits

Implementing image-set() delivers measurable improvements through multiple mechanisms:

Core Web Vitals Impact:

• Largest Contentful Paint (LCP) improves with faster image loading as smaller, more efficient formats reach users sooner
• Cumulative Layout Shift (CLS) prevented by properly sized images that load before layout calculation completes
• Browser considers network conditions for adaptive behavior, potentially serving lower-resolution images on slower connections

Bandwidth Efficiency:

• 25-50% file size reductions with AVIF/WebP vs JPEG translate directly to faster page loads
• Resolution-aware selection prevents over-downloading on standard resolution displays
• Cumulative savings across all images and page views reduce hosting costs while improving access speeds

As CSS-Tricks confirms, these optimizations compound across all images on a page, creating significant cumulative benefits for overall page performance and user experience.

Best Practices and Recommendations

Image Preparation Workflow:

• Establish consistent naming conventions and directory structures for image variants
• Use automated build processes with tools like sharp or ImageMagick to generate AVIF, WebP, and resolution variants from source images
• Integrate image optimization into CI/CD pipelines to ensure all deployments include properly prepared assets

Testing Strategies:

• Use browser developer tools to inspect network requests and verify which images load in different contexts
• Test with network throttling enabled to verify adaptive behavior on slower connections
• Validate across target browsers and device pixel ratios using both manual testing and automated tools

Tools like squoosh.app and build plugins for webpack or Vite simplify the image preparation workflow, enabling teams to generate all required variants efficiently. Combining these tools with consistent naming conventions ensures maintainable implementations that scale across large projects.

For comprehensive guidance on optimizing your website's performance, explore our guide on tools for auditing CSS to identify additional optimization opportunities.

Sources

1. CSS-Tricks - image-set() - Comprehensive CSS function reference with syntax, examples, and browser support details
2. MDN Web Docs - image-set() - Authoritative documentation on CSS image-set functional notation
3. Savvy - CSS image-set for Better Images and Fallback Support - Practical implementation guide with AVIF/WebP focus