How do I add alt text and compress images in Webflow?
Set Descriptive or Decorative alt text in Assets, convert JPG and PNG to AVIF or WebP, and upload so responsive variants are created.
Open the Assets panel, open Edit Settings on an image, choose Descriptive and write clear alt text, or mark Decorative for stylistic images. Compress JPG and PNG assets to AVIF or WebP from Assets (or Compress assets in Collections). Avoid compressing Open Graph images to unsupported formats. Upload images in Webflow so responsive srcset variants are generated, then republish.
Add alt text that describes the image
Alt text helps search engines understand images and helps people who use assistive technology. Open the Assets panel (left toolbar or J), hover an image, open more options, then Edit Settings. Choose Descriptive and write a short description of what the image shows, then Save.
If the image is only decorative, such as a gradient bar or dividing line, mark it Decorative instead. Screen readers skip Decorative images. Do this for Assets panel images that appear on the site; keep CMS image fields consistent when editors upload item photos.
Example: a product hero that shows a blue ceramic mug on a wood table gets Descriptive alt text naming the product and setting. A faint background swirl behind a headline is Decorative.
Compress JPG and PNG without breaking shares
From Assets you can compress individual images (more options > Compress) or expand the panel, Select several, and compress in bulk to AVIF or WebP. In CMS, open Collections more options > Compress assets to convert Collection images. Limits apply (for example 100 assets per request and 10 requests per minute), so convert very large files one at a time when needed.
Conversion replaces the original file in Assets and on the canvas. Download backups first if you still need the JPG or PNG. You cannot convert AVIF or WebP back inside Webflow; restore a backup if you convert by mistake. Fully compressed files may fail to convert further.
Open Graph caveat: AVIF is not widely supported for social previews, and Webflow warns against compressing assets used as Open Graph images so shares still render. Prefer leaving OG images as JPG or PNG, or follow Webflow's current WebP guidance for OG carefully. That includes CMS image fields wired to Open Graph on Collection pages.
Upload so responsive variants exist
When you upload images in the Assets panel or a CMS image field, Webflow creates size variants and adds srcset and sizes so browsers pick a smaller file on small screens. Images brought in only through CSV import or the API do not get those variants. Re-upload important photos in Webflow, or size and compress them before import.
Responsive variants apply to inline JPG, PNG, and WebP images, not background images and not images inside rich text the same way. Background images need a correctly sized file up front. After layout changes that resize images across pages, use Control + Shift + I (Windows) or Command + Shift + I (Mac) so the Designer remeasures variants site-wide.
Publish and keep a simple image checklist
After alt text edits and compression, republish so the live site serves the new files. Spot-check a content page, a Collection template, and one social share preview for a page that uses an Open Graph image.
Keep a short checklist for editors: Descriptive vs Decorative decided, file under the 4MB image upload limit, JPG or PNG compressed when not used for Open Graph, upload happened inside Webflow for hero images, site republished. When alt text and asset cleanup keep slipping behind content launches, fold those steps into the same written update request as the copy change.
Questions & answers
When should I mark an image Decorative?
Use Decorative when the image is stylistic only, such as a gradient or divider, and alt text would not help. Screen readers then ignore it.
Can I convert AVIF or WebP back to JPG in Webflow?
No. Conversion replaces the original. Download originals before converting, or restore a site backup that still has them.
Do CSV or API image imports get responsive variants?
No. Responsive variants are created when you upload in the Assets panel or a CMS image field. Optimize those imports yourself or re-upload in Webflow.
What formats can the conversion tool compress?
The built-in tool compresses existing JPEG, JPG, and PNG assets to AVIF or WebP. Other file types are skipped in bulk runs.
Sources & further reading
Need a hand with your Webflow site?
View membership