Best Practices for URL-Based Image Generation

Creating images with URLs is powerful, but following best practices ensures you get the best results. Here are professional tips for creating high-quality images with DrawByURL.

1. Element Order Matters

Elements are drawn in the order they appear in the URL. Always place backgrounds first, then shapes, then text:

✅ Good: `/background-color-blue/circle-color-white/text-value-Hello`

❌ Bad: `/circle-color-white/background-color-blue/text-value-Hello`

2. Use Consistent Attribute Order

While attribute order doesn't affect functionality, keeping a consistent order improves readability:

✅ Good: `/circle-color-blue-size-150-x-400-y-225`

❌ Less readable: `/circle-x-400-y-225-color-blue-size-150`

Recommended order: type → color → size → position → other attributes

3. Always Position Text Explicitly

Text doesn't have default positioning. Always specify x and y coordinates:

✅ Good: `/text-value-Hello-x-400-y-225-size-48`

❌ Bad: `/text-value-Hello-size-48` (text may not appear where expected)

4. Set Canvas Size for Your Use Case

Different platforms require different image dimensions:

- OpenGraph: 1200×630

- Instagram: 1080×1080

- Twitter: 1200×675

- LinkedIn: 1200×627

Use query parameters: `?width=1200&height=630`

5. Use Z-Index for Complex Layering

When you need precise control over element stacking:

/circle-color-blue-z-1/square-color-red-z-2

Higher z values appear on top.

6. Optimize for Performance

- Use appropriate canvas sizes (don't create unnecessarily large images)

- Choose the right format (PNG for transparency, JPEG for photos, WebP for modern browsers)

- Set quality appropriately (90 is usually sufficient)

7. Keep URLs Readable

While URLs can be long, keeping them readable helps with debugging:

✅ Readable: `/circle-color-blue-size-150-x-400-y-225-stroke-4-stroke-color-white`

❌ Hard to read: `/circle-color-blue-size-150-x-400-y-225-stroke-4-stroke-color-white-rotate-45-opacity-0.8`

Consider breaking very complex images into multiple simpler ones.

8. Use Named Colors When Possible

Named colors are more readable than hex codes:

✅ Good: `/circle-color-blue`

❌ Less readable: `/circle-color-0000ff`

Use hex codes only when you need specific colors not in the named list.

9. Test Your Images

Always preview your images before using them in production. Use the DrawByURL playground or open the URL directly in a browser.

10. Document Your URLs

If you're using URLs in code, add comments explaining what they create:

// Creates a blue circle badge for online statusconst badgeUrl = '/circle-color-green-size-80';

Common Mistakes to Avoid

1. **Forgetting to position text** - Text without x/y coordinates may not appear

2. **Wrong element order** - Backgrounds should come first

3. **Incorrect canvas size** - Not setting appropriate dimensions for your use case

4. **Overly complex URLs** - Sometimes simpler is better

5. **Not testing** - Always preview before using in production

Advanced Tips

Reusable Patterns

Create reusable URL patterns for common use cases:

const badgePattern = (color, text) => `/circle-color-${color}-size-80/text-value-${text}-color-white-x-400-y-225-size-24`;

Dynamic Generation

Generate URLs programmatically based on data:

const statusColor = status === 'online' ? 'green' : 'red';const statusUrl = `/circle-color-${statusColor}-size-80`;

Conclusion

Following these best practices will help you create better images with DrawByURL. Remember to keep URLs readable, test your images, and choose appropriate dimensions and formats for your use case.

For more advanced techniques, check out our [tutorials](/tutorials) and [examples](/examples).