Image & Gallery Fields

Image field types

CMS platforms offer two image field types:

Single image

Stores one image per item. Used for:

• Featured images on blog posts.
• Team member headshots.
• Product thumbnails.
• Category hero images.

Multi-image (gallery)

Stores multiple images per item. Used for:

• Product photo galleries.
• Project portfolios (screenshots, process photos).
• Real estate listing photos.
• Event photo recaps.

When to use which

Single image — when each item needs exactly one image in a specific context (hero, thumbnail, avatar).

Multi-image — when items need a variable number of images displayed together (gallery, carousel, grid).

Reference to an Images collection — when images have their own metadata (caption, photographer, alt text, license). This is rare and adds significant complexity.

Image optimization

File format

• JPEG — for photographs. Good compression, small file size.
• PNG — for graphics with transparency. Larger file size.
• WebP — modern format with better compression than JPEG. Not supported by all CMS platforms.
• SVG — for icons and logos. Scalable, tiny file size. Not always supported in image fields.

Dimensions

• Hero images — 1920x1080 or 2400x1600 for retina. Large but important.
• Card thumbnails — 800x600 or 1200x800. Moderate size.
• Avatars/headshots — 400x400 or 600x600. Square format.
• Gallery images — 1600x1200 or similar. Balance quality with load time.

File size targets

• Hero images: under 500KB.
• Card images: under 200KB.
• Gallery images: under 300KB each.

Compress before uploading. Tools like TinyPNG, Squoosh, or ImageOptim can reduce file size 50-80% without visible quality loss.

Alt text

Every image should have alt text for accessibility and SEO:

• Describe what the image shows, not what it is ("Sarah Chen presenting at the 2024 conference" not "Photo").
• Keep it under 125 characters.
• If the image is decorative, use an empty alt attribute.

Most CMS platforms store alt text as a property of the image field. Fill it in for every uploaded image.

Gallery display patterns

Grid

Fixed-size thumbnails in a grid. Click to enlarge. Best for product photos and portfolios.

Carousel / slider

One image at a time with navigation arrows. Good for featured images and real estate listings.

Masonry

Variable-height images in a Pinterest-style layout. Good for photo blogs and creative portfolios.

Lightbox

Full-screen overlay when clicking a thumbnail. Standard for galleries where image detail matters.

Tips

1. Establish aspect ratios — decide on standard ratios for each image context (16:9 for heroes, 1:1 for avatars, 4:3 for cards) and communicate to editors.
2. Multi-image for product galleries — do not create a separate "Product Images" collection. Multi-image fields are simpler and faster.
3. Always compress — unoptimized images are the number one cause of slow websites.
4. Set max file size limits — prevent editors from uploading 5MB photos. Set upload limits in your CMS or document guidelines.
5. Alt text is not optional — it is an accessibility requirement. Make it a habit.