NamelessMC

I've been tidying up the look of a NamelessMC site recently and wanted to share a few notes on handling images, since banners and backgrounds are usually the heaviest part of a page.

1. Size images for where they display. A header banner rarely needs to be wider than about 1920px, and avatars or server icons can be far smaller. Uploading a 6000px screenshot straight from a shader pack just makes every visitor download it.

2. Use modern formats where you can. WebP or AVIF versions of in-game screenshots are often a fraction of the size of a PNG with no visible difference. Keep PNG for pixel-art logos where sharp edges matter.

3. Mind the template colours. Dark templates make bright, high-contrast screenshots look harsh; slightly lowering brightness or adding a soft gradient overlay behind text keeps titles readable.

4. Compress before uploading. A quick pass through an image optimiser can cut file size by half or more.

5. Check the page on mobile. Background images set to cover can crop out the part you care about, so preview on a phone and pick a focal point that survives cropping.

6. Credit screenshots. If you use builds or renders from your community, a short caption naming the builder is a nice touch.

Curious what others do here: do you serve images from the panel's uploads folder, or put them behind a CDN?