Guide
Lovable Images in WordPress: Where They Go
In a Lovable project, images live in public/ or in src/assets/ and are referenced from JSX. When you convert the project with the IQDesk converter, those files are copied into the generated block theme and the patterns point at them, so they are part of the theme folder rather than the WordPress Media Library. That works and it is fast, but it means WordPress will not generate responsive sizes for them. This guide shows where each image ends up, how to check it, and how to move the ones you want to edit later into the Media Library.
Where images live in a Lovable project
Lovable builds a React and TypeScript app with Tailwind CSS. Images reach the browser in one of three ways, and the way matters for what happens next.
The first is the public/ folder. Files there are copied to the build output untouched, and the markup refers to them with an absolute path like /hero.jpg. The second is src/assets/. Those files are imported in a component, and the bundler gives them a hashed file name in dist/assets/. The third is a remote URL: an image hosted on another domain, pasted into the code.
Everything else on the page that looks like an image may not be one. Lovable often draws decorative shapes, gradients and fake screenshots with styled div elements and Tailwind classes. Icons usually come from an icon component, not from a file. Keep that distinction in mind when you compare the original with the converted site.
Where they go in the WordPress theme
The converter copies the image files it finds into the generated block theme and rewrites every reference to the new location. The patterns that make up your pages then point at files inside the theme folder, so nothing depends on Lovable's servers after the move.
Concretely, this is what you get after activation:
- Content images become core image blocks. A photo in a hero, a card or a gallery becomes a normal
wp:imageblock in the page pattern, with its aspect ratio kept. - The logo becomes the site logo. It is set as the site logo block in the header template part, so you change it once in the Site Editor.
- Backgrounds stay backgrounds. A section background image is applied to the group or cover block that wraps the section.
- Remote URLs stay remote. An image loaded from another domain keeps that URL. If that domain disappears, the image disappears with it.
- Drawn decorations do not come along. Mockups made of positioned
divelements are not converted, and absolutely positioned decorations are left out. See supported features for the full list.
Why they are not in the Media Library
A theme is a folder of files. The Media Library is a set of database records plus files in wp-content/uploads. The converter produces a theme, so the images travel with the theme folder, not as library entries.
That has real advantages. The theme is self-contained, so the same ZIP installs on staging and on production with identical images. Nothing breaks if you move hosts. There is no import step and no risk of duplicate attachments.
It also has two costs. You cannot swap an image from the Media Library picker without first uploading it, and WordPress does not create the smaller -768x, -1024x variants it normally generates on upload. The browser downloads the one file you shipped, at whatever size it is. For images that are already reasonably sized, that is fine. For a 4000-pixel hero photo, it is not.
Moving an image into the Media Library
Do this for the images you expect to change often, such as a team photo or a product shot. Leave the rest in the theme.
The replacement is done in the Site Editor, so no file editing is needed.
- Open
Appearance → Editorand navigate to the page or template part that holds the image. - Select the image block. In the toolbar choose Replace, then Open Media Library.
- Upload the new file. WordPress stores it in
wp-content/uploadsand generates the responsive sizes. - Save. The block now points at an attachment URL instead of the theme file.
- Repeat for the header logo if you want it editable: select the site logo block and replace it the same way.
Keeping the images fast
Page weight on a converted site is almost always image weight. Fix it once, before launch, and you will not have to think about it again.
Start by looking at the actual files in the theme folder, or in the Lovable project before you convert. Anything over a few hundred kilobytes deserves attention. The cheapest win is resizing: an image displayed 800 pixels wide does not need to be 3000 pixels wide.
A practical order of work:
- Resize before you convert. Shrink oversized files in the Lovable project. The converter copies what it finds, so smaller inputs mean a smaller theme.
- Use modern formats. WebP is widely supported and much smaller than JPEG at the same quality. Convert the heavy ones.
- Keep lazy loading on below-the-fold images. WordPress adds
loading="lazy"to image blocks by default. Leave it alone except on the hero. - Turn lazy loading off for the hero. The first image in the viewport should load immediately. Select the block and check its settings in the Site Editor.
- Write alt text. The converter cannot invent it. Add it per image block; it helps accessibility and image search.
- Add a caching or image plugin if you need more. Plugins from wordpress.org can serve WebP and resize on the fly, but they usually act on Media Library attachments, not on theme files.
Checking the result before you launch
The converter's review screen shows the converted site next to the original inside WordPress Playground, in the browser. Scroll both at the same width and look for gaps where an image should be. Missing items are usually drawn decorations or absolutely positioned elements, not real files.
If a real image is wrong, the AI fix agent can read the source project, measure both pages and edit the theme. Every account includes two free AI-fix attempts; pricing covers the paid credits. Instructions are limited to 2,000 characters, so be specific: name the section and say what should change.
After installing the theme on a live site, do one last pass. Open each page, confirm every image loads over your own domain, and check a page on a phone. WordPress stacks columns on mobile, so an image that sat beside text on desktop will now sit above it. That is expected.
Then uncheck Discourage search engines from indexing this site under Settings → Reading when you are ready to be indexed. For the rest of the sequence, see the complete conversion guide.
FAQ
Are Lovable images added to the WordPress Media Library during conversion?
No. The converter copies the image files into the generated block theme and points the patterns at them there. They render normally on the front end but do not appear in the Media Library. You can replace any image with a Media Library upload later from the Site Editor.
Why does WordPress not create thumbnail sizes for my converted images?
WordPress generates responsive sizes when a file is uploaded to the Media Library. Images shipped inside a theme folder skip that step, so the browser downloads the single file you provided. Resize and compress those files before conversion, or re-upload the heavy ones through the Media Library.
What happens to images that Lovable loaded from an external URL?
They keep the external URL in the converted theme. The page will look correct as long as that host stays online. If you want full control, download the file and replace the image block with your own upload.
Why are some visuals from my Lovable site missing in WordPress?
They were probably not image files. Lovable often draws decorative shapes and fake screenshots with styled div elements, and absolutely positioned decorations are not converted. Real image files in the public or assets folder are copied across.
How do I change the logo on a converted Lovable site?
The logo is set as the WordPress site logo block in the header template part. Open Appearance then Editor, select the logo, and use Replace to upload a new file. The change applies everywhere the header appears.