--- title: "Framer Help: How images are optimized in Framer" description: Learn how Framer automatically resizes, compresses, and serves images for the best performance across devices. published: "Oct 8, 2026, 9:30 AM UTC" --- # How Framer optimizes images Learn how Framer automatically resizes, compresses, and serves images for the best performance across devices. When you upload an image to Framer, it is optimized automatically. In most cases, you do not need to resize images manually or convert them to formats such as WebP or AVIF before uploading. ### [Best practices](#best-practices) For the best results: - Upload JPEG, PNG, WebP, and GIF images without modifying them. - Set **Resolution** to **Auto** in **Fill → Image**. - Let Framer automatically resize and optimize images for different screen sizes. - Upload SVG files as image fills by drawing a frame, selecting **Fill**, and choosing **Image**. ### [How Framer resizes images](#how-framer-resizes-images) Different devices require different image sizes. For example, downloading a 3000 × 2000 px image on a small mobile screen can waste bandwidth and slow down page loading. To improve performance, Framer automatically generates resized versions of every uploaded JPEG, PNG, WebP, and GIF image. Images are resized to the following maximum dimensions: **Size variant** | **Maximum dimension** Small |, 512 px, Medium |, 1024 px, Large |, 2048 px, Full |, 4096 px Framer measures the larger side of the image when creating resized versions. For example: - A 3000 × 2000 px image generates 512 px, 1024 px, and 2048 px variants. - A 2000 × 3000 px image generates variants based on the 3000 px height. Framer never upscales images. If an image is smaller than a target size, the original image is used instead. #### [How image delivery works](#how-image-delivery-works) To serve resized images, Framer generates `srcset` and `sizes` attributes for most image elements. These attributes include every image size and allow browsers to: - Understand how large an image appears on the page. - Choose the most appropriate image size for the visitor’s screen and device. This helps reduce unnecessary downloads while maintaining image quality. #### [Understanding the Resolution setting](#understanding-the-resolution-setting) The **Resolution** dropdown in **Fill → Image** controls how image variants are served. - **Auto**: Framer automatically selects the best image size for each visitor. - **Small**: Forces the 512 px version. - **Medium**: Forces the 1024 px version. - **Large**: Forces the 2048 px version. - **Full**: Forces the 4096 px version. Framer still never upscales images. For example, if an image is 1500 px wide, selecting **Large** or **Full** will serve the original 1500 px image. ### [How Framer lazy-loads images](#how-framer-lazy-loads-images) Framer automatically lazy-loads images located further down the page. This helps most important images to load sooner. To do this, Framer adds a `loading="lazy"` attribute to all images located below \~1000px on a page. The \~1000px boundary is approximate and can vary. In some rare scenarios, Framer may not be able to compute where an image is located on the page; in that case, an image does not get `loading="lazy"`. ### [How Framer converts images to AVIF](#how-framer-converts-images-to-avif) Framer automatically converts most JPEG, PNG, WebP, and GIF images to AVIF. AVIF provides significantly better compression than JPEG, PNG, and WebP while maintaining visual quality. By default: - Images are converted using AVIF lossy compression. - Compression quality is set to 80. #### [Exceptions to AVIF conversion](#exceptions-to-avif-conversion) Some images are handled differently: **Scenario** | **Result** **Auto (Lossless)** selected | Converted to lossless WebP instead of AVIF Animated images | Remain WebP lossy Initial image request | WebP lossy (quality 90) is served while AVIF conversion runs in the background Optimized file larger than original | Original image is served #### [Browser compatibility](#browser-compatibility) Framer serves image formats based on browser support: 1. AVIF is served to browsers that support it. 2. WebP is served when AVIF is not supported. 3. A recompressed version of the original image is served if neither AVIF nor WebP is supported. #### [Why PNG images may use lossy compression](#why-png-images-may-use-lossy-compression) Although PNG is traditionally a lossless format, many uploaded PNG files contain screenshots and similar content. Lossy compression often reduces the file size significantly while maintaining visual quality. Framer uses quality settings designed to avoid visible compression artifacts in most cases. ### [SVG optimization](#svg-optimization) Framer optimizes uploaded SVG files using SVGO. This optimization applies to: - SVG graphics uploaded to Framer. - SVG files used as image fills. #### [Performance considerations for SVG files](#performance-considerations-for-svg-files) SVG graphics render as `` elements on published sites. Complex SVG files containing many paths, layers, or effects can impact page performance. If an SVG is particularly large or complex, consider using it as an image fill instead. ### [Troubleshooting image quality issues](#troubleshooting-image-quality-issues) If an image appears overly compressed or does not look as expected: 1. Verify that the original image has sufficient resolution. 2. Try using **Auto (Lossless)** in **Fill → Image**. 3. Republish the site and check the image again. 4. Contact Framer Support if the issue persists. ## FAQ ###### Why does Framer create multiple versions of my image? Framer generates multiple image sizes so browsers can download the most appropriate version for each screen size and device resolution. This improves loading performance and reduces bandwidth usage. ###### Can Framer increase the size of a small image? No. Framer never upscales images. If the original image is smaller than a requested size, the original image is served instead. ###### Should I convert my images to AVIF before uploading them? No. Framer automatically converts supported image formats and serves the most appropriate version for each browser, so manual conversion is usually unnecessary. Updated September 15, 2026 [Add Framer to Preferred Sources](https://www.google.com/preferences/source?q=framer.com) ## Your next idea starts here Create personal portfolio, Build startup site, `Launch landing page`, Start company blog [Start without AI](https://framer.com/signup) --- ## Navigation - [Enterprise](../../../enterprise/) - [Pricing](../../../pricing) - [Log in](https://framer.com/r/login) - [Sign up](https://www.framer.com/r/signup/) - [Brand guidelines](../../../brand) - [Help center](../../) - [SEO](../../seo/) - [AI](../../../ai/) - [Agents](../../../agents/) - [External Agents](../../../agents/external/) - [Design](../../../design/) - [Collaborate](../../../collaborate/) - [CMS](../../../cms/) - [Hosting](../../../hosting/) - [Performance](../../../performance/) - [SEO](../../../seo/) - [Skills New](../../../skills) - [Convert](../../../convert/) - [Publish](../../../publish/) - [Updates](../../../updates) - [Templates](https://www.framer.com/community/marketplace/templates/) - [Components](https://www.framer.com/community/marketplace/components/) - [Vectors](https://www.framer.com/community/marketplace/vectors/) - [Plugins](https://www.framer.com/community/marketplace/plugins/) - [Gallery](https://www.framer.com/community/gallery/) - [Hire Experts](https://www.framer.com/community/members/) - [Switch](../../../switch/) - [Agencies](../../../agencies/) - [Startups](../../../startups/) - [Academy](../../../academy/) - [Desktop App](../../../downloads/) - [Developers](../../../developers/) - [Affiliates](../../../creators) - [Experts New](../../../expert/apply/) - [Guides](../../../guides) - [Blog](../../../blog/) - [Newsletter](../../../newsletter) - [Stories](../../../stories/) - [Students](../../../education/students/) - [Ambassadors](../../../education/ambassadors/) - [Help Articles](../../) - [Meetups](../../../meetups/) - [Contact](../../../contact/) - [Designers](../../../solutions/designers/) - [Agencies](../../../solutions/agencies/) - [Marketers](../../../solutions/marketers/) - [Growth](../../../solutions/growth/) - [Builders](../../../solutions/builders/) - [Engineers](../../../solutions/engineers/) - [Site Teams](../../../solutions/site-teams/) - [Founders](../../../solutions/founders/) - [AI website builder](../../../solutions/ai-website-builder/) - [AI design agent](../../../solutions/ai-designer/) - [Website builder](../../../solutions/website-builder/) - [Landing pages](../../../solutions/landing-pages/) - [Portfolio maker](../../../solutions/portfolio-website/) - [UI/UX design](../../../solutions/ui-ux-design/) - [Figma to HTML](../../../solutions/figma-to-html/) - [No-code](../../../solutions/no-code-website-builder/) - [Compare](../../../compare) - [Webflow](../../../compare/framer-vs-webflow) - [Figma](../../../compare/framer-vs-figma) - [Wix](../../../compare/framer-vs-wix) - [Squarespace](../../../compare/framer-vs-squarespace) - [WordPress](../../../compare/framer-vs-wordpress) - [Readymag](../../../compare/framer-vs-readymag) - [Ceros](../../../compare/framer-vs-ceros) - [Unbounce](../../../compare/framer-vs-unbounce) - [Lovable](../../../compare/framer-vs-lovable) - [Claude Code](../../../compare/framer-vs-claude-code) - [ChatGPT](../../../compare/framer-vs-chatgpt) - [Codex](../../../compare/framer-vs-codex) - [Contentful](../../../compare/framer-vs-contentful) - [Sanity](../../../compare/framer-vs-sanity) - [AEM](../../../compare/framer-vs-adobe-experience-manager) - [Replit](../../../compare/framer-vs-replit) - [v0](../../../compare/framer-vs-v0) - [Careers](../../../careers/) - [Security](../../../legal/security) - [Brand](../../../brand) - [Abuse](mailto:abuse@framer.com) - [Legal](../../../legal/community-terms) - [Trust](https://app.eu.vanta.com/framer.com/trust/ow67ujg7iav0t6qtd1o6r2) - [Merch](../../../store) - [Keyboard](../../../f1) - [Stack Score](../../../stack-score/) - [Free domains](../../../domains/) - [AEO scanner](../../../aeo) - [State of Sites](https://www.framer.com/state-of-sites-2026/) - [CanvasBench](../../../canvasbench/) - [Link Preview](https://www.linkpreview.app/) - [Checking status](https://www.framerstatus.com/)