The Finalsite CMS Media guide series provides comprehensive guidance on image sizing, file formats, video optimization, and media best practices for school websites. This overview links to each part of the series covering branding standards, module-specific specs, hero areas, and video.
💡Quick answers
- What does the Finalsite CMS Media guide cover? Image and video specifications for all areas of your site, including branding standards (Part 1), module-specific image specs (Part 2), hero areas and banners (Part 3), and video optimization (Part 4).
- Where do you find the complete Media guide series? Linked from this overview article; each part covers a specific aspect of media on Finalsite sites and should be consulted before uploading images for a new content area.
- Does Finalsite automatically optimize images for different screen sizes? Yes. Every image uploaded to Resources is automatically compressed and resized into four standardized versions. The correct version is served based on each visitor's device. For most images, no pre-upload compression is needed: uploading an image that has already been compressed by another tool can result in a blurry final output.
- What is the most common media mistake on school websites? Uploading images with the wrong aspect ratio or dimensions for the specific use case (e.g., banner images, post thumbnails, profile photos); always check your Site Instructions for exact specs.
This article covers the foundational media standards for your Finalsite CMS website, including school logo dimensions, favicon setup, recommended file formats (SVG, PNG, JPG), upload size limits for images, PDFs, and videos, and a quick-reference glossary of common media terminology like aspect ratio, resolution, and cropping. Start here before uploading any content to your site.
💡What this covers
This reference guide includes specs and standards for logos and favicons, global file size and upload limits for images, an explanation of how images are optimized for different screen sizes, best practices for PDFs and videos, and a glossary of common media terminology.
In this article
- Before you start
- Logo specifications
- Global file size and upload limits
- How Finalsite optimizes media automatically
- Pre-upload optimization: When and how
- Media terminology quick reference
Before you start
This article is part of our media guidelines series. Looking for something else? Check out the full set:
- Media guide part 1: Setting up your site's branding and global standards (this article)
- Media guide part 2: Image specs for every module
- Media guide part 3: Building hero areas, banners, and sliders
- Media guide part 4: Optimizing and uploading video
Have questions about your site's specific dimensions or media setup? Every site is unique! Look in these two places first for your site's custom treatments, enhancements, and site-specific directions:
Logo specifications
| Media item | Recommended dimensions | Notes |
|---|---|---|
| District or school logo (horizontal) | 1000 px wide (max) | Horizontal orientation fits best in standard headers |
| District or school logo (square / icon) | 500 x 500 px | Best for layouts where the school name is text-based |
| Logo file size | Under 200 KB | Ensures fast page loads and high performance scores |
| Favicon | 16 x 16 px | Use .ico or .png format; appears in browser tabs |
Global file size and upload limits
| Media type | Maximum upload | Recommended range |
|---|---|---|
| Standard images | 100 MB | 200 KB – 500 KB |
| Hero and banner images | 100 MB | 500 KB – 1 MB |
| PDF documents | 100 MB | Under 10 MB |
| Videos | 3.91 GB | Under 50 MB (optimized) |
How Finalsite optimizes media automatically
This section details how Resources handles image compression and delivery in Finalsite CMS, including the four standardized output sizes generated at upload and how Composer serves the correct version to each device.
When an image is uploaded to Resources, two layers of optimization happen automatically:
- Compression at upload: Resources runs every file through its compression engine and generates four standardized versions at different sizes, stored and ready to serve instantly.
- Adaptive delivery: Composer layouts are responsive; pages reformat based on screen width. A page at 1200 px wide displays elements side by side; the same page at 750 px wide stacks them vertically. The smaller the screen, the smaller the image file served. Mobile visitors can always choose to view the full-resolution version.
View the four output sizes
Resources creates four versions of every uploaded image. N represents whatever dimension preserves the proportions of the original file. If the source image is smaller than the full-size dimensions, the display version is used as both display and full size.
| Version | Landscape (width > height) | Portrait (height > width) |
|---|---|---|
| Thumbnail | height)"100 × N px | width)"N × 56 px |
| Mobile | height)"480 × N px | width)"N × 270 px |
| Display | height)"1024 × N px | width)"N × 576 px |
| Full size | height)"1920 × N px | width)"N × 1080 px |
Follow upload tips for best output quality
- Upload the largest source file available. More data in the source produces better output quality after resizing.
- Minimum dimensions: 800 × 600 px. Recommended: 1024 × 768 px or larger.
- Resolution: 72 dpi minimum.
- Color space: Use RGB if possible. CMYK is supported but requires conversion, which can cause slight color shifts.
⚠️ Avoid pre-compressing standard images before uploading
Because Resources applies its own compression at upload, uploading an image that has already been compressed by another tool can result in a blurry final output: compression applied on top of compression degrades quality. For the vast majority of images, upload the original high-quality source file and let Resources handle the rest. The exception is very large files; see Pre-upload optimization: When and how below.
Pre-upload optimization: When and how
This section covers pre-upload compression tools for images and video in Finalsite CMS Resources, including when compression is recommended and how to handle very large files for display and download.
For most images and videos, no pre-upload optimization is needed: Resources handles compression at upload. Pre-upload compression is only recommended for very large source files such as ultra-high-resolution photos and 4K video, where the file may still be larger than ideal even after Resources processes it.
Choose a compression tool
| Tool | Best for | Notes |
|---|---|---|
| Compressor.io | Images | Browser-based; can reduce file size up to 90% while maintaining high quality |
| Handbrake | Video | Free desktop app; provides the most significant file-size reduction with quality control |
| Photoshop | Images | Use File > Export > Save for Web for web-optimized output |
Offer a download link for very large files
When high image or video quality is a priority, keep a high-quality version available for download and use a lower-quality version for display on site pages. This keeps page load times fast while still making the full-resolution file accessible to visitors who want it. See Display resources on your site for how to link to downloadable files.
Media terminology quick reference
| Term | Definition | Best practice |
|---|---|---|
| Aspect ratio | The proportional relationship between width and height (e.g., 16:9 or 1:1) | Maintain consistency across similar content |
| Dimensions | The actual pixel count (e.g., 1920 x 1080 px) | Resize to the container's max width |
| Resolution | The density of pixels (ppi) | Use 72 ppi for web |
| Crop vs. resize | Methods for changing image size | Crop to change shape; resize to keep proportions |
Comments
Please Sign in to leave a comment if you don't see the comment box below.