S
Soyeb Ali
While optimizing performance in Framer projects, I noticed there is currently no way to control the fetch priority of images in the UI.
Fetch priority is critical for improving Largest Contentful Paint (LCP), especially for images that appear above the fold. Without control over this, important images may not load as quickly as they should, negatively impacting performance and user experience.
Proposed Feature:
  1. UI Support (Image Settings Panel)(See Attached Image)
  • Add a toggle option in the Image (Fill) settings:
Fetch Priority Toggle (Default: Off)
ON → fetchpriority="high"
OFF → default browser behavior
Helper text:
“Enable this for above-the-fold images to improve loading performance and reduce LCP.”
  1. Code Component Support
Extend ControlType.ResponsiveImage to include fetch priority as a prop, so developers can control it in custom components as well.
export function MyComponent(props) {
return (
<img
src={props.image.src}
srcSet={props.image.srcSet}
alt={props.image.alt}
fetchpriority={props.image.fetchPriority}
/>
)
}
addPropertyControls(MyComponent, {
image: {
type: ControlType.ResponsiveImage,
}
})
This would allow:
  • Keeping parity between Framer UI and Code Components
  • Better flexibility for advanced use cases
Use Cases:
  • Hero images and landing visuals
  • Above-the-fold banners
  • Performance-critical assets
Why This Matters:
This feature would significantly improve performance optimization capabilities in Framer:
  • Helps reduce LCP (Core Web Vitals)
  • Gives users control without relying on hacks like overrides
  • Aligns Framer with modern browser standards
Current Limitation:
  • No way to control fetch priority in UI
  • No support in ControlType.ResponsiveImage
  • Forces developers to rely on workarounds like overrides or ignore optimization opportunities
Summary:
Adding fetch priority support across both Framer UI and Code Components would be a small but highly impactful improvement for performance-focused users.