How to Add Alt Attributes to Images in Webflow

In this tutorial, Sandro, co-founder of the Gemeos Webflow agency, shows you how to add and manage alt attributes on Webflow images for SEO and accessibility.

1. Add alt text in the Designer

Select your image in the Designer. In the Settings panel (gear icon), fill in the Alt Text field. Write a short, accurate description of what’s visible in the image.

2. Dynamic alt text in the CMS

For images in your CMS collections, connect the Alt Text field to a CMS text field. In the Designer, click the Alt Text field’s connection icon and select the matching CMS field. Each image will automatically display its own alt text.

3. Decorative images: empty alt

For purely decorative images (backgrounds, separators, non-informative illustrations), leave the alt field empty or add alt="". Screen readers will ignore them. Not adding any alt text at all is different from using an empty alt.

Conclusion

Alt attributes improve both SEO and accessibility at the same time. Audit your missing images with WAVE: improve visual accessibility.