How to show a different image on mobile in Webflow?

A hero banner that looks great on desktop is often too wide, too detailed, or poorly cropped when scaled down to a phone screen. Serving a mobile-optimized image — different crop, different aspect ratio, or an entirely different visual — improves both design quality and page load speed. Here are the ways to do it in Webflow.

Method 1: Two Image Elements with Breakpoint Visibility

The simplest approach uses two separate image elements and toggles their visibility per breakpoint.

1. Add both images to the same section — your desktop image and your mobile image
2. Select the desktop image and at the mobile breakpoint, set Display to None
3. Select the mobile image and at the desktop breakpoint, set Display to None, then at the mobile breakpoint, set Display to its original value (usually Block or Inline Block)

The result: desktop visitors see one image, mobile visitors see the other. No code required.

Keep both images in the same container so they occupy the same layout position. Use consistent alt text on both for accessibility.

Method 2: Different Background Images per Breakpoint

If your image is a section background, Webflow lets you set a different background image at each breakpoint.

1. Select the section or div with the background image
2. Switch to the mobile breakpoint
3. In the Style panel, under Background, replace the image with your mobile-optimized version

Background images set at smaller breakpoints override the desktop version automatically. You can also adjust background-size, background-position, and background-repeat independently at each breakpoint.

This method works well for hero sections, banner areas, and full-width image containers.

Method 3: CSS Media Queries with Custom Code

For more control, use an HTML Embed or your site's custom code:

.hero-image {
  background-image: url('desktop-image.jpg');
}

@media (max-width: 767px) {
  .hero-image {
    background-image: url('mobile-image.jpg');
  }
}

This approach is useful when you want exact control over the breakpoint threshold or need to manage multiple image swaps from a single stylesheet.

Choosing the Right Mobile Image

A different mobile image is not just a scaled-down desktop image. Consider these adjustments:

• Tighter crop — focus on the subject, remove wide empty space

• Vertical orientation — match the portrait aspect ratio of phones

• Smaller file size — serve a lower-resolution image to reduce load time on mobile networks

• Simplified composition — less visual complexity for smaller screens

Use WebP format where possible. A 800px-wide WebP at quality 80 is often sufficient for mobile and loads significantly faster than a full-resolution JPEG.

Performance Considerations

With the two-image method, both images load in the HTML regardless of screen size. To avoid this, use the <picture> element in an HTML Embed:

<picture>
  <source media="(max-width: 767px)" srcset="mobile-image.webp">
  <img src="desktop-image.webp" alt="Description" loading="lazy">
</picture>

This ensures only the appropriate image is downloaded by the browser, saving bandwidth on mobile devices.

Key Takeaways

• Use two image elements with per-breakpoint Display settings for the simplest approach

• Set different background images per breakpoint for hero sections and banners

• Optimize the mobile image for portrait orientation and smaller file size

• Use the <picture> element to prevent loading both images on every device

• Apply consistent alt text across desktop and mobile versions