Swarm featured images

Why Swarm Images Matter

Swarm images are an essential part of the user experience and serve several purposes:

Attracting attention

Images make content visually engaging and easier to scan.

Enhancing understanding

Visual elements support communication and help users grasp content quickly.

Setting the tone

Images shape the emotional and visual atmosphere of the platform.

Strengthening brand identity

A consistent visual style reinforces organizational identity.

Differentiating content

Images help users distinguish between different types of swarms.

Improving overall design quality

Well-designed visuals make the platform feel professional and cohesive.

Image Size and Cropping

Swarm images are responsive and adapt to screen size. While there is no single fixed pixel size recommendation, the following principles apply.

1. Swarm Card (List View)

  • Always cropped horizontally.

  • Cropping is centered.

  • Width: 360 px (or less on narrow screens).

  • Minimum height: approx. 125 px.

  • Height may increase if title wraps to multiple lines.

  • Bottom ~55 px reserved for overlay text.

  • A dark gradient improves text readability.

On wider screens, multiple cards are displayed side by side rather than increasing image size.

2. Swarm Page (Header Image)

  • Height: 50% of screen height.

  • Width: Full screen (or up to main navigation edge).

  • Cropping is centered.

Bottom overlay includes action buttons:

  • One row ≈ 50 px

  • Two rows ≈ 90 px

Orientation and Cropping Behavior

  • Landscape view → horizontal crop

  • Portrait view → vertical crop

Depending on screen ratio, significant parts of the image edges may be cropped.

When selecting images:

  • Keep the focal point centered

  • Avoid critical elements near edges

  • Avoid placing text near image boundaries

Images work best when they do not rely on one small edge detail.

Ready to use

These example images were created with ChatGPT and are free for Skillhive customers to use in their own Skillhive environment. You can download them and use them as they are, or use them as inspiration for creating your own visual style.

No attribution required.