This is some text inside of a div block.

Images

Updated
May 7, 2025

Image standards

File types

  • Primary: AVIF
  • Fallback: WEBP, JPG
  • Icons: SVG

Dimensions

  • Hero: 1920x1080px
  • Inline content: 800x600px
  • Thumbnails: 400x300px
  • Profile: 200x200px

Technical specs

Max size: 200KB
Format: RGB
Resolution: 72 DPI
Compression: 80% quality

Naming convention

[page]-[purpose]-[dimensions].[format]
Example: about-hero-1920x1080.avif

Accessibility

  • Alt text required
  • No text in images
  • Minimum contrast ratio 3:1

Optimization

  • Lazy loading required for images below the fold
  • CDN delivery mandatory

Image Checklist

1. Prep your images before upload

  • Resize in Photoshop, Figma, or TinyPNG to no larger than you actually need.
  • Example: If the image only ever displays at ~600px wide, don’t upload a 4000px monster.
  • Compress it! (Use TinyPNG, Squoosh, ImageOptim — whatever gives you joy. Then compress it in Webflow if it isn't under 200kb.)
  • Use the right format:
  • Photos → .avif
  • Graphics, logos → .svg
  • Hero images → Use .avif for best performance

2. Set intrinsic width/height in Webflow settings

  • Go to the element settings panel → fill in the width and height to match the image’s natural dimensions (intrinsic size)
  • Why? Helps the browser reserve space and reduces layout shift.

‍

Example: Uploaded image = 1200 × 800 → set width = 1200, height = 800

3. Style responsively in Webflow Designer

  • Width: Images are set to a default 100%
  • Height: Defaults to auto → maintains aspect ratio
  • Never slap on fixed pixel dimensions.

4. Add alt text like a boss

  • Fill in the alt attribute → helps with SEO and accessibility
  • Be descriptive but not spammy
  • Use the image alt text generator from ahrefs. (Note: when using this option you may have to edit some of the content so it actually represents what's in the image.)

‍‍‍Example: alt="Person holding surfboard at sunset"

6. Image loading

  • Webflow images lazy load by default → let the magic happen.
  • For images above the fold, use Eager: loads with page

For background images, be mindful: no lazy loading there, so optimize them even harder.

‍