WriteAlt for Webflow: Generate Alt Text and Optimize Images
WriteAlt helps Webflow teams create clear, descriptive alt text for CMS and Designer images. It uses AI to generate image descriptions, saves them to Webflow, and optimizes selected images through the secure WriteAlt backend.
Connect WriteAlt to Webflow
Open the WriteAlt installation page.
Sign in to WriteAlt or create an account.
Open WriteAlt Dashboard > Settings > API and copy your personal API key.
Return to WriteAlt and paste the key into the API key field.
Select Connect Webflow.
Review the requested Webflow permissions and select Authorize.
After authorization, choose the Webflow site you want to manage.
Each user should use their own WriteAlt account and API key. WriteAlt does not ask for or store a Webflow password. API keys are stored securely on the WriteAlt server and are not saved in browser storage.
Choose a Site and CMS Collection
After connecting Webflow:
Select the site you want to manage.
Select a CMS collection.
Choose the Image or Multi-Image field containing the images.
Select the language and generation style.
Add optional SEO keywords.
Save the settings.
Select Refresh images.
WriteAlt displays the available images, filenames, current alt text, file sizes, and processing status.
Generate Alt Text
You can process images individually or in bulk:
Generate alt text processes one image.
Generate selected processes selected images.
Generate all missing alt text processes only images without alt text.
Regenerate alt text replaces an existing description only when you choose it manually.
Existing alt text is not changed by the missing-alt-text action. Each generated description appears on the image card so you can review the result.
One generated or regenerated image in one selected language uses one WriteAlt credit. Image optimization does not consume generation credits.
Save Alt Text to Webflow
When generation succeeds, WriteAlt saves the description to the selected Webflow CMS image field and updates the original image reference.
The image card refreshes automatically and shows the saved description and current status.
WriteAlt does not create duplicate CMS items when saving alt text.
Optimize CMS Images
WriteAlt can optimize selected CMS images by reducing file size or converting them to WebP through the secure WriteAlt backend.
For CMS images:
WriteAlt temporarily fetches the selected image.
The backend compresses or converts the image.
WriteAlt uploads the optimized replacement.
The selected CMS image reference is updated.
The original Webflow asset may remain because it could be used elsewhere. No duplicate CMS item is created.
If the optimized version is not smaller than the original, WriteAlt keeps the original file unchanged and reports that no replacement was necessary.
Optimization does not consume WriteAlt generation credits.
Publish Your Changes
WriteAlt saves changes to Webflow, but it does not publish the site automatically.
After generating alt text or optimizing images:
Save the CMS item in Webflow.
Review the updated image metadata.
Publish the Webflow site using Webflow’s normal Publish controls.
The updated alt text becomes available on the published site after Webflow completes publishing.
Use WriteAlt Inside Webflow Designer
The WriteAlt Designer Extension lets you work with a selected Webflow Image element without leaving the Designer.
Open the Webflow Designer.
Select an Image element.
Open the WriteAlt Designer Extension.
Connect WriteAlt if it is not already connected.
Choose a language and writing style.
Select Generate alt text or Optimize image.
Review the result shown by the extension.
Generated text is saved to the selected Webflow Image element.
For Designer optimization, the selected image is sent to the WriteAlt backend, optimized, and returned to Webflow. After confirmation, the selected asset is replaced in place and its existing alt text is preserved. No duplicate asset is created.
If Webflow does not provide a usable image URL, the extension may send a rendered snapshot of the selected Image element to the WriteAlt backend for processing.
The extension prevents a result from being saved if the selected image changes while the request is running.
Disconnect WriteAlt
To disconnect the dashboard, open WriteAlt settings and select Disconnect Webflow. WriteAlt removes the saved connection, deletes the stored connection credentials, and stops making Webflow API requests for that connection.
To disconnect inside the Designer Extension, select Disconnect WriteAlt. This removes the encrypted WriteAlt API key associated with that Webflow site.
Disconnecting does not delete content, assets, or alt text already saved in Webflow.
Troubleshooting
No sites appear: Reconnect Webflow and complete the OAuth authorization flow again.
No collections appear: Choose a site containing CMS collections, then refresh the site data.
No images appear: Select a collection with an Image or Multi-Image field and refresh the image list.
Generation is unavailable: Confirm that your WriteAlt API key is connected and that your account has available trial or paid credits.
Credits are not displayed: Reopen the Designer Extension, confirm the connection, and select Refresh or Load languages.
An image fails: Review the error displayed on that image card and retry the individual image. Other images are not affected.
An image changes while processing: WriteAlt cancels the write to prevent the result from being applied to the wrong image.
Changes are not visible publicly: Save the CMS item and publish the Webflow site.
Best Practices
Use descriptions that explain the subject and purpose of each image. Avoid keyword stuffing and repeated phrases.
Review generated descriptions when images contain product details, text, people, logos, or important visual information.
Decorative images may need an empty alt value. Functional images should describe their purpose, while complex images may require a longer human-authored explanation.
Generated alt text is an assistive starting point and should be reviewed according to the image’s role in the page and the surrounding content.
