Large, unoptimized images are one of the most common reasons a chapter page loads slowly. This guide covers the basics of getting your images web-ready before you upload them.
Tip: A photo straight from a phone or DSLR camera is often 3,000–4,000 pixels wide and several megabytes in size — far bigger than any page on your site needs.
1. Know your target size
Most chapter website images only need to display at a few hundred pixels wide. As a rule of thumb:
- Homepage banners: 1600–1920px wide
- Blog/news featured images: 800–1200px wide
- In-page photos: 600–800px wide
- Headshots: 400–600px wide (square, 1:1 ratio)
There’s rarely a reason to upload anything wider than 1920px — even full-width banners don’t need more than that.
2. Resize before you upload
Uploading a giant image and letting WordPress “shrink” it visually doesn’t reduce the file size — the browser still has to download the full original. Resize the actual file first.
Free tools that work well:
- Squoosh — browser-based, no install, great for quick one-off resizing and compression
- Preview (Mac) — Tools > Adjust Size
- Photos app (Windows) or Paint — Resize option
- Headshot Cropper tool — built specifically for chapter headshots
3. Crop to the right aspect ratio
Cropping removes unnecessary background and reduces file size at the same time. Common ratios:
- Square (1:1): Headshots, sponsor logos
- Widescreen (16:9): Banners, event photos
- Standard (4:3): General page photos
Note: Crop for composition first — center on the subject’s face for headshots, and avoid cropping out important context (like a banner or sign) in event photos.
4. Compress the file
After resizing, run the image through a compressor to reduce file size without a visible quality loss:
- Squoosh (linked above) lets you compare quality side-by-side before downloading
- Aim for under 300KB for most photos, and under 800KB for large banners
5. Choose the right file format
- JPG — best for photos
- PNG — best for logos, graphics, or anything needing transparency
- WebP — smaller file size than JPG/PNG with similar quality, supported by all modern browsers
6. Name the file before uploading
Rename the file to something descriptive (e.g., chicagoland-golf-outing-2026.jpg instead of IMG_4821.jpg). This helps with organization and is also good for SEO.
Need more help? Submit a support ticket and we’ll walk you through it.