Best Practices

Guidelines and recommendations for creating professional, accessible, and effective animated content with Waveify APIs.

Use appropriate width and height parameters to reduce file size

Example: ?width=800&height=150 instead of default 1200x150

Avoid frequently changing parameters to benefit from browser caching

Example: Keep consistent colors and sizes across your project

Don't use extremely fast animations (speed < 1s) as they can be distracting

Example: Use speed=2 or higher for professional appearance

Use colors that match your project's brand identity

Example: Create a color palette and stick to it across all banners

Ensure sufficient contrast between text and background

Example: Test your banners in both light and dark themes

Use different sizes and styles to create clear information hierarchy

Example: Larger waves for headers, smaller badges for status

Always include descriptive alt text for screen readers

Example: ![Build Status - Passing](url) not just ![](url)

Consider users with motion sensitivity when using animations

Example: Provide static alternatives or slower animations

Don't rely solely on color to convey information

Example: Use text labels alongside colored status indicators

Use clear, descriptive text that adds value to your README

Example: Welcome to MyProject instead of just Welcome

Don't overwhelm your README with too many animated elements

Example: Use 1-3 key animations rather than animating everything

Keep animations professional for business/enterprise projects

Example: Subtle waves and clean typography over flashy effects

Test Across Platforms: Check how your animations look on GitHub, GitLab, and other platforms.

Mobile Responsiveness: Consider how your animations appear on mobile devices.

Load Time: SVG animations are lightweight, but multiple large images can still slow loading.

Future-Proof: Use consistent URL patterns so you can easily update all banners later.