Before uploading assets into Framer, it’s essential to prepare files correctly. Using the right format, compressing images effectively, and naming files strategically can drastically improve performance.

2.1 Choosing the Right File Format

Using the appropriate file type ensures that your images retain quality while keeping file sizes low. 

Here’s how to select the right format:

• JPG or WebP – Ideal for photographs and complex images. WebP offers smaller file sizes without noticeable quality loss.

• PNG – Best for images requiring transparency but should be used sparingly as PNG files tend to be larger.

• SVG – Perfect for icons and vector graphics, as they remain sharp at any resolution with minimal impact on load time.

Since mobile pages load 70.9% slower than desktop on average, ensuring lightweight assets across all devices is critical. A WebP image, for instance, can reduce file size by up to 30% compared to PNG or JPG, making it an optimal choice for balancing quality and speed.

2.2 Compression Tools & Techniques

Even with the right formats, images must be compressed before uploading to Framer. Compression reduces file size without compromising visible quality, keeping your site fast and responsive.

Tools like TinyPNG, Squoosh, and Photoshop’s “Save for Web” allow you to shrink image sizes efficiently. 

Aim for:

• Under 100 KB for hero images, when possible, to prevent unnecessary page bloat.

• A balance between compression and quality, ensuring images still look crisp on high-resolution screens.

A well-optimized image strategy helped Formula Bot achieve an “A+” Google Lighthouse rating, demonstrating how proper compression directly boosts performance metrics.

Additionally, PageSpeed Insights confirms that compressed images significantly improve site load times, which in turn enhances speed optimization.

2.3 Naming & Organizing Files

Framer websites benefit from structured file management, particularly when handling large numbers of assets. 

A well-organized naming convention:

• Improves SEO – Descriptive filenames (e.g., modern-office-hero-image.jpg) help search engines understand image content, improving rankings.

• Enhances workflow efficiency – Categorising images in folders (e.g., /hero-images/ or /icons/) ensures easy updates and prevents duplicate uploads.

As covered in our guide on improving Core Web Vitals in Framer, Google’s Largest Contentful Paint (LCP) metric accounts for 25% of a site’s Performance Score, meaning efficiently organized and optimized images contribute to a better Core Web Vitals assessment.