Responsive Widget Images

Overview

Several Dashboard widgets support responsive images—allowing you to upload different images optimised for desktop, tablet, mobile, and small mobile screen sizes. This ensures your Dashboard looks crisp and professional across all devices, with images tailored to each screen size.

Responsive images improve loading times on mobile devices (smaller file sizes), provide better visual composition for different aspect ratios, and give you complete control over how visual content appears to your users.

Functionality Breakdown

Widgets That Support Responsive Images

The following widget types support responsive image uploads:

Breakpoint Sizes

Learn Amp uses four breakpoints for responsive images:

Image Dimensions

For best results, use these recommended dimensions:

Featured Image Widget:

Banner Widget:

💡 Tip: You don't need to upload all four sizes. The system uses fallback logic—if a specific size isn't provided, it uses the next larger size available.

Fallback Behaviour

When a specific breakpoint image isn't uploaded:

1. Desktop image is always required as the fallback

2. If no tablet image is uploaded, desktop image is used

3. If no mobile image is uploaded, tablet image (or desktop) is used

4. If no small mobile image is uploaded, mobile image (or next available) is used

This means you can upload just a desktop image for a simple setup, or provide all four for a fully optimised experience.

Pre-requisites

To upload responsive images:

• You must have edit access to the Dashboard

• Images must be in supported formats (JPG, PNG, GIF, WebP)

• File sizes should be optimised for web use

Role Requirements

Quick Start Guide

Adding Responsive Images to a Widget

1. Navigate to Settings in the sidebar, then select Dashboards

2. Find and edit the Dashboard containing your widget

3. Click on the widget you want to add images to (Featured Image, Banner, or External Link)

4. Click Edit from the widget menu

5. Look for the Images section with tabs for each breakpoint:

   • Desktop

   • Tablet

   • Mobile

   • Small Mobile

6. Click on the tab for the screen size you want to configure

7. Click the upload button and select your image

8. Optionally add Alt text for accessibility (recommended)

9. Repeat for other breakpoints as needed

10. Save the widget

Adding Alt Text for Accessibility

Each image can have its own alt text, which is important for screen readers and accessibility:

1. After uploading an image for a breakpoint

2. Find the Alt text field below the image preview

3. Enter a brief description of the image content

4. The correct alt text will be displayed based on the user's device

💡 Tip: Alt text should describe what's in the image, not just repeat the widget title. For example: "Team collaborating around a laptop" rather than "Featured Image".

Testing Responsive Images

To verify your images display correctly:

1. View the Dashboard in your browser

2. Use browser developer tools (F12) to simulate different screen sizes

3. Or test on actual devices (phone, tablet) to see the real experience

4. Check that images load correctly at each breakpoint

Best Practices

Image Optimisation

Visual Consistency

Mobile-First Considerations

FAQs

Q: Do I need to upload all four image sizes?
No. Only the desktop image is required. The system will use fallback images for missing sizes. However, for the best user experience on all devices, uploading optimised images for each breakpoint is recommended.

Q: What happens if I only upload a desktop image?
The desktop image will be used for all screen sizes. It will scale down for smaller screens, which may affect quality or composition.

Q: Can I use different images with different content for each breakpoint?
Yes! This is a powerful feature. For example, you might show a landscape group photo on desktop but a cropped close-up on mobile where the full image would be too small to see clearly.

Q: What image formats are supported?
JPG, PNG, GIF, and WebP formats are supported. WebP offers the best compression for web use.

Q: How do I remove a responsive image?
Edit the widget, navigate to the specific breakpoint tab, and click the remove/delete option next to the image preview.

Q: Will my existing widgets need updating?
No. Existing widgets with single images will continue to work normally, using that image for all screen sizes.

Troubleshooting