Understanding Image Sizes

Learn how the system creates and uses different image sizes automatically.

Automatic Size Generation

When you upload an image, the system automatically creates multiple versions:

Size Name
Width
Best For

Thumbnail

300px

Small previews in lists and grids

Square

500x500px

Profile images, square thumbnails

Small

600px

Blog content, small displays

Medium

900px

Standard content images

Large

1400px

Featured images, larger displays

XLarge

1920px

Full-width hero images

OG

1200x630px

Social media sharing previews

You Don't Need to Choose

The website automatically selects the best size based on:

  • Where the image is displayed

  • The visitor's screen size

  • The device being used (mobile, tablet, desktop)

You don't need to do anything - just upload your original image and the system handles the rest.

Why Multiple Sizes?

  • Faster loading - Smaller images load faster on mobile devices

  • Better quality - Larger screens get higher resolution images

  • Bandwidth savings - Visitors don't download larger files than needed

  • Better SEO - Fast-loading images improve search rankings

For best results, upload images that are:

Use Case
Recommended Minimum

Portfolio/Blog hero images

1920px wide

Gallery images

1400px wide

Content images

1200px wide

Logos

As large as available (vector preferred)

The system will create all the smaller sizes from your original.

Image Format

All uploaded images are automatically converted to WebP format, which:

  • Provides excellent quality

  • Has smaller file sizes than JPG or PNG

  • Is supported by all modern browsers

Tips

  • Upload the largest version you have - You can't upscale later

  • Don't pre-resize images - Let the system handle it

  • Original quality matters - Start with the best image available

  • Portrait images work too - The system handles all orientations

Last updated