This guide outlines recommended file types, sizes, and best practices for images used across your Sprocket website and Mobile App.
Using properly sized images improves:
Website performance
Visual quality
Load speed
Mobile responsiveness
If images appear blurry, cropped, stretched, or distorted, review the section below for that image type.
Club Logo & Favicon
Access: Website & App > Settings
Club Logo
File Type
File must be one of the following formats:
JPG
JPEG
PNG
GIF
We recommend saving logos as PNG (PNG-24) with transparency for best results.
Note: SVG format is not supported.
Sizing
Optimal width: 300px
Height: Variable
Logos are automatically scaled to fit within the maximum container width.
If your logo appears blurry or pixelated, confirm the original file is at least 300px wide.
Favicon
A favicon appears in browser tabs.
File Type
PNG with a transparent background
Sizing
Ideal dimensions: 32 x 32px
If your favicon appears blurry, confirm it is exactly 32x32px and saved as a PNG file.
Image Carousel
Image Carousels are typically used as your public homepage banner and private dashboard banner. They can also be used in other places throughout your website by inserting the Image Carousel content option.
The optimal image size will depend on the size and format of your Image Carousel. For optimal performance, image file size should be under 1MB (under 500k if using more than 3 slides); max file size is 10MB. If your site design uses a custom-sized banner, please adjust your image sizes accordingly.
Access: Website & App > Pages
Image Carousels are commonly used for:
Public homepage banners
Private dashboard banners
Page banners (when using the Image Carousel content option)
File Type
For performance and quality, we recommend:
JPG format
High or very high image quality
File Size
Recommended: Under 1MB
If using more than 3 slides: Under 500k
Maximum allowed file size: 10MB
Large files may slow page load times.
Public Homepage Carousel Sizes
Large (80% Window Height)
Minimum: 1800 x 1013px (16:9 aspect ratio)
This format is relative to browser window size and may crop depending on screen dimensions.
If your image includes burned-in text and you want the full image visible at all times, use Large (16:9) or Auto instead.
Large (16:9 Aspect Ratio)
Minimum: 1800 x 1013px
This ensures consistent full-image display.
Medium
Minimum: 1600 x 800px
This format may crop depending on browser window size.
Auto
Minimum width: 1600–1800px
Height is determined by image height
For best results:
Ensure all slides are cropped to the same dimensions
Maintain a consistent aspect ratio across slides
Page Banners
Access: Website & App > Pages
Primary Banner Image
File Type
File must be one of the following formats:
JPG
JPEG
PNG
GIF
For performance and quality, we recommend JPG with high or very high image quality.
Sizing
Full-width panoramic banner: Minimum 1600 x 220px
Standard (not full-width): 1140 x 220px
If your banner appears blurry, confirm the image meets the minimum width.
Adding Multiple Images to a Banner
To add multiple images:
Create a new page using the Blank Page template.
Insert the Image Carousel content option.
Move it to the top of the page.
Add slides using:
Add Text & Image Slide
Add Image-Only Slide
To make the banner full width:
Hover over the banner
Select the Section Options pencil icon
Select Edit Section
Check Display Row Full Width
Secondary Banner Image
File Type
JPG
JPEG
PNG
GIF
Recommended: JPG with high quality.
Sizing
Recommended size: 500 x 250px
Larger images or different aspect ratios will be center-cropped to fit.
Important: You cannot add a Secondary Banner Image to an Image Carousel.
Articles
Access: Website & App > Articles
Article / Club News Thumbnails
File Type
JPG
JPEG
PNG
GIF
Recommended: JPG with high image quality.
Sizing
Aspect ratio: 16:9
Optimal size: 900 x 506px
Recommended file size: Under 500k
Maximum file size: 10MB
If no image is added, your club logo will automatically display as the article thumbnail.
Program Categories & Types
Access: Programs > Manage Programs > Settings
Category & Type Thumbnails
File Type
JPG
JPEG
PNG
GIF
Recommended: JPG with high image quality.
Sizing
Recommended size: 340 x 250px
Recommended file size: Under 500k
Maximum file size: 10MB
Images must first be uploaded to the Asset Library.
Sponsors
Access: Website & App > Sponsors
Sponsor Logos
File Type
JPG
JPEG
PNG
GIF
We recommend saving sponsor logos as PNG (PNG-24) with transparency.
Note: SVG format is not supported.
Sizing
Optimal width: 300px
Height: Variable
Logos are resized to fit within the maximum container width.
Testimonials
Access: Website & App > Testimonials
Testimonial Thumbnails
File Type
JPG
JPEG
PNG
GIF
Recommended: JPG with high image quality.
Sizing
Aspect ratio: 16:9
Optimal size: 346 x 260px
Recommended file size: Under 500k
Maximum file size: 10MB
If no image is added, your club logo will display automatically.
Staff Profiles
Access: Staff > Manage Staff > Public Profile
Staff Profile Image
File Type
JPG
JPEG
PNG
GIF
Sizing
Ideal dimensions: 480 x 600px
If no image is added, your club logo will display as the default profile image.
Images Look Blurry or Cropped? (Troubleshooting)
If your image does not display correctly:
Confirm it meets the recommended dimensions.
Confirm the correct aspect ratio (especially 16:9 where required).
Confirm file size is under limits.
Avoid enlarging small images.
Ensure consistent cropping for carousel slides.
If using banners, confirm whether you are using:
Standard Banner
Image Carousel
These behave differently.
Common Admin Questions (Fin Optimization Layer)
Why is my banner blurry?
Your banner may be blurry if:
The image is smaller than the recommended dimensions (for example, under 1600px wide for full-width banners).
The image was enlarged from a small original file.
The file was compressed at low quality.
Upload a larger image that meets the minimum recommended size.
Why is my carousel cropping my image?
Carousel images may crop depending on browser window size.
If your image includes text and is being cut off:
Use Large (16:9) instead of Large (80% Window Height).
Ensure all slides use the same 16:9 aspect ratio.
What size should my homepage banner be?
For best results:
Use 1800 x 1013px (16:9 ratio) for large homepage banners.
For full-width page banners, use at least 1600 x 220px.
What is the maximum image file size?
Recommended: Under 1MB
If using multiple slides: Under 500k per image
Maximum allowed: 10MB
Do you support SVG files?
No. SVG files are not supported.
Use JPG, PNG, or GIF formats instead.
Why is my image not uploading?
If an image will not upload:
Confirm file size is under 10MB.
Confirm file format is supported.
Try compressing the image before uploading.
Why is my secondary banner image not appearing?
Secondary Banner Images:
Must be uploaded in supported formats.
Cannot be added to an Image Carousel.
Will be center-cropped if oversized.
Why does my article thumbnail look stretched?
Article thumbnails use a 16:9 aspect ratio.
Use an image sized 900 x 506px for best results.