Media Settings

Overview

Media Settings allow you to configure how uploaded files are processed by the system. You can control image optimization, WebP generation, thumbnail creation, and upload size limits. These settings apply to all new file uploads and help ensure optimal website performance while maintaining image quality. Proper configuration of media settings can significantly reduce page load times and improve user experience.

Accessing Media Settings

Navigation Path: Dashboard > Media > Media Library > Settings

Alternative Path: Dashboard > Media > Media Settings

Required Permission: media.settings

Direct URL: /admin/media/settings

Key Features

• Image Optimization: Automatic compression to reduce file sizes
• Quality Control: Adjust compression quality for optimal balance
• Dimension Limits: Set maximum width and height for images
• WebP Generation: Create modern WebP versions automatically
• Thumbnail Creation: Generate smaller versions for faster loading
• Upload Limits: Control maximum file size for uploads
• Processing Options: Configure default processing behavior

Main Interface

Settings Organization

The settings page is organized into four main sections:

1. Image Optimization: Compression and resizing settings
2. WebP Generation: Modern image format settings
3. Thumbnail Generation: Thumbnail size and quality settings
4. Upload Limits: Maximum file size restrictions

Each section includes:

• Informational banner explaining the purpose
• Individual setting fields with descriptions
• Visual indicators for recommended values
• Save button to apply changes

Information Banners

Each section includes a colored information banner:

• Blue Banner (Image Optimization): Explains quality guidelines
• Green Banner (WebP Generation): Describes WebP benefits
• Purple Banner (Thumbnail Generation): Explains thumbnail usage
• Amber Banner (Upload Limits): Shows file size conversion

Settings and Options

Image Optimization Section

Auto-Optimize Images

• Type: Toggle (Boolean)
• Default: Enabled
• Description: Automatically compress and optimize images during upload
• Effect: Reduces file size while maintaining visual quality
• Recommendation: Keep enabled for all sites

When Enabled:

• Images are automatically compressed
• File sizes are reduced by 30-70%
• Quality is preserved based on quality setting
• Processing happens during upload

When Disabled:

• Images are uploaded as-is
• No compression applied
• Larger file sizes
• Faster upload processing

Image Quality

• Type: Number (1-100)
• Default: 85
• Description: Compression quality level for optimized images
• Range: 1 (lowest quality, smallest size) to 100 (highest quality, largest size)
• Recommendation: 85-90 for most use cases

Quality Guidelines:

Recommended Settings:

• General Use: 85 (best balance)
• High Quality: 90 (professional sites)
• Performance Focus: 75 (faster loading)

Maximum Width

• Type: Number (pixels)
• Default: 1920
• Description: Maximum width for uploaded images
• Effect: Images wider than this are automatically resized
• Recommendation: 1920 for full HD displays

Common Values:

• 1920px: Full HD displays (recommended)
• 2560px: 2K displays
• 3840px: 4K displays
• 1200px: Standard content width

Considerations:

• Larger values = larger file sizes
• Most displays are 1920px or less
• Retina displays benefit from 2x dimensions
• Balance quality with performance

Maximum Height

• Type: Number (pixels)
• Default: 1080
• Description: Maximum height for uploaded images
• Effect: Images taller than this are automatically resized
• Recommendation: 1080 for full HD displays

Common Values:

• 1080px: Full HD displays (recommended)
• 1440px: 2K displays
• 2160px: 4K displays
• 800px: Standard content height

Note: Images are resized proportionally, maintaining aspect ratio.

WebP Generation Section

Generate WebP Versions

• Type: Toggle (Boolean)
• Default: Enabled
• Description: Automatically create WebP versions of uploaded images
• Effect: Creates additional WebP files alongside originals
• Recommendation: Keep enabled for better performance

Benefits of WebP:

• 25-35% smaller file sizes than JPEG
• Better compression than PNG
• Supports transparency like PNG
• Supported by all modern browsers
• Automatic fallback to original format

When Enabled:

• WebP versions created automatically
• Original files are preserved
• Browsers use WebP when supported
• Fallback to original for older browsers

When Disabled:

• Only original format is available
• Larger file sizes
• No modern format benefits
• Simpler file structure

WebP Quality

• Type: Number (1-100)
• Default: 85
• Description: Compression quality for WebP versions
• Range: 1 (lowest quality) to 100 (highest quality)
• Recommendation: 85 (same as image quality)

Quality Guidelines:

• Use same value as Image Quality for consistency
• WebP achieves better compression at same quality
• 85 provides excellent quality with great compression
• Can use slightly lower value (80) for even smaller files

Thumbnail Generation Section

Generate Thumbnails

• Type: Toggle (Boolean)
• Default: Enabled
• Description: Automatically create thumbnail versions of images
• Effect: Creates smaller preview versions
• Recommendation: Keep enabled for galleries and lists

Benefits of Thumbnails:

• Much faster loading in galleries
• Reduced bandwidth usage
• Better user experience
• Improved page performance

Use Cases:

• Media library grid view
• Image galleries
• Product listings
• Blog post previews
• User avatars

When Enabled:

• Thumbnails created automatically
• Both regular and WebP thumbnails
• Used in media library interface
• Available for frontend use

When Disabled:

• Full-size images used everywhere
• Slower gallery loading
• Higher bandwidth usage
• Simpler file structure

Thumbnail Width

• Type: Number (pixels)
• Default: 300
• Description: Width of generated thumbnails
• Effect: Determines thumbnail dimensions
• Recommendation: 300 for square thumbnails

Common Values:

• 150px: Small thumbnails
• 300px: Standard thumbnails (recommended)
• 400px: Large thumbnails
• 600px: Extra large thumbnails

Considerations:

• Larger thumbnails = better quality but larger files
• Match your design requirements
• Consider mobile display sizes
• Balance quality with performance

Thumbnail Height

• Type: Number (pixels)
• Default: 300
• Description: Height of generated thumbnails
• Effect: Determines thumbnail dimensions
• Recommendation: 300 for square thumbnails

Common Values:

• 150px: Small thumbnails
• 300px: Standard thumbnails (recommended)
• 400px: Large thumbnails
• 600px: Extra large thumbnails

Note: Thumbnails maintain aspect ratio. These dimensions are maximum values.

Upload Limits Section

Maximum File Size

• Type: Number (kilobytes)
• Default: 10240 (10 MB)
• Description: Maximum allowed file size for uploads
• Effect: Uploads larger than this are rejected
• Recommendation: 10240 KB (10 MB) for general use

Size Conversions:

• 1024 KB = 1 MB
• 5120 KB = 5 MB
• 10240 KB = 10 MB
• 20480 KB = 20 MB
• 51200 KB = 50 MB

Recommended Values:

Important Considerations:

• Server PHP settings may also limit uploads
• Check upload_max_filesize in php.ini
• Check post_max_size in php.ini
• Ensure server limits are higher than this setting
• Consider available disk space

Common Tasks

Task 1: Configuring Image Optimization

1. Navigate to Dashboard > Media > Media Settings
2. Locate the Image Optimization section
3. Enable Auto-Optimize Images toggle
4. Set Image Quality to 85 (recommended)
5. Set Maximum Width to 1920 pixels
6. Set Maximum Height to 1080 pixels
7. Click Save Media Settings at the bottom

Result: All new image uploads will be automatically optimized with these settings.

Task 2: Enabling WebP Generation

1. Navigate to Dashboard > Media > Media Settings
2. Locate the WebP Generation section
3. Enable Generate WebP Versions toggle
4. Set WebP Quality to 85 (recommended)
5. Click Save Media Settings

Result: All new image uploads will have WebP versions created automatically.

Task 3: Configuring Thumbnails

1. Navigate to Dashboard > Media > Media Settings
2. Locate the Thumbnail Generation section
3. Enable Generate Thumbnails toggle
4. Set Thumbnail Width to 300 pixels
5. Set Thumbnail Height to 300 pixels
6. Click Save Media Settings

Result: All new image uploads will have thumbnail versions created.

Task 4: Adjusting Upload Limits

1. Navigate to Dashboard > Media > Media Settings
2. Locate the Upload Limits section
3. Set Maximum File Size in kilobytes
   • For 10 MB: Enter 10240
   • For 20 MB: Enter 20480
   • For 50 MB: Enter 51200
4. Click Save Media Settings

Result: Upload size limit is updated. Files larger than this will be rejected.

Task 5: Optimizing for Performance

For maximum performance:

1. Enable Auto-Optimize Images
2. Set Image Quality to 85
3. Set Maximum Width to 1920
4. Set Maximum Height to 1080
5. Enable Generate WebP Versions
6. Set WebP Quality to 85
7. Enable Generate Thumbnails
8. Set Thumbnail Width to 300
9. Set Thumbnail Height to 300
10. Click Save Media Settings

Result: Optimal balance between quality and performance.

Task 6: Optimizing for Quality

For maximum quality:

1. Enable Auto-Optimize Images
2. Set Image Quality to 90
3. Set Maximum Width to 2560
4. Set Maximum Height to 1440
5. Enable Generate WebP Versions
6. Set WebP Quality to 90
7. Enable Generate Thumbnails
8. Set Thumbnail Width to 400
9. Set Thumbnail Height to 400
10. Set Maximum File Size to 20480 (20 MB)
11. Click Save Media Settings

Result: Higher quality images with larger file sizes.

Task 7: Disabling Processing

To upload files without any processing:

1. Disable Auto-Optimize Images
2. Disable Generate WebP Versions
3. Disable Generate Thumbnails
4. Click Save Media Settings

Result: Files are uploaded as-is without any modifications.

Note: This is not recommended for production sites as it can significantly impact performance.

Permissions

Media Settings requires the following permission:

• media.settings: Can view and modify media settings

Only administrators and users with this permission can access and change media settings. Regular users with only media.upload permission will use the configured settings but cannot change them.

Tips and Best Practices

Optimization Strategy

• Enable All Processing: For best results, enable optimization, WebP, and thumbnails
• Use Recommended Quality: 85 provides excellent quality with good compression
• Set Reasonable Limits: 1920x1080 is sufficient for most displays
• Test Your Settings: Upload sample images and check the results
• Monitor File Sizes: Ensure optimized files are significantly smaller

Quality Settings

• Don't Use 100: Quality 100 creates unnecessarily large files
• Don't Go Too Low: Below 70 shows visible quality loss
• Match WebP to Image: Use same quality for consistency
• Consider Your Content: Photography needs higher quality than graphics

Dimension Limits

• Match Your Design: Set limits based on your largest image display size
• Consider Retina: 2x dimensions for retina displays (e.g., 2560x1440)
• Don't Overdo It: Larger than 4K is rarely needed
• Maintain Aspect Ratio: System automatically maintains proportions

Upload Limits

• Check Server Limits: Ensure PHP limits are higher than your setting
• Consider Storage: Larger limits mean more storage usage
• Balance Needs: 10 MB is sufficient for most use cases
• Document Uploads: Increase limit if accepting large PDFs

Performance Impact

• Processing Takes Time: Optimization adds a few seconds to upload
• Storage Increases: WebP and thumbnails use additional storage
• Worth the Trade-off: Performance benefits outweigh processing time
• One-Time Cost: Processing happens once during upload

Troubleshooting

Problem: Settings Not Saving

Possible Causes:

• Missing media.settings permission
• Form validation error
• Database connection issue
• Cache not clearing

Solutions:

1. Verify you have media.settings permission
2. Check for error messages on the page
3. Ensure all values are within valid ranges
4. Try clearing browser cache
5. Check server error logs
6. Contact administrator if issue persists

Problem: Optimization Not Working

Possible Causes:

• GD or Imagick library not installed
• PHP memory limit too low
• Image format not supported
• Settings not saved properly

Solutions:

1. Verify GD or Imagick extension is installed
2. Check PHP memory_limit (recommend 256M or higher)
3. Test with standard JPEG or PNG files
4. Re-save settings to ensure they're applied
5. Check server error logs for specific errors
6. Contact system administrator for server configuration

Problem: WebP Not Generating

Possible Causes:

• Server doesn't support WebP
• GD library version too old
• WebP generation disabled
• Image format not compatible

Solutions:

1. Verify server supports WebP (PHP 7.0+ with GD 2.1+)
2. Check GD library version: php -i | grep GD
3. Ensure WebP generation is enabled in settings
4. Test with JPEG or PNG files (not GIF or SVG)
5. Update PHP and GD library if needed
6. Check error logs for specific issues

Problem: Thumbnails Not Creating

Possible Causes:

• Thumbnail generation disabled
• Invalid dimensions
• Memory limit too low
• Storage permission issue

Solutions:

1. Ensure thumbnail generation is enabled
2. Verify dimensions are positive numbers
3. Increase PHP memory_limit if needed
4. Check storage directory permissions
5. Test with smaller images
6. Review error logs for details

Problem: Upload Size Limit Not Working

Possible Causes:

• Server PHP limits are lower
• Web server limits are lower
• Setting not saved properly
• Cache issue

Solutions:

1. Check PHP upload_max_filesize setting
2. Check PHP post_max_size setting
3. Check web server limits (nginx, Apache)
4. Ensure setting is saved in database
5. Clear application cache
6. Restart web server if needed

Problem: Images Too Large After Optimization

Possible Causes:

• Quality setting too high
• Maximum dimensions too large
• Optimization not enabled
• Image format not optimal

Solutions:

1. Lower quality setting to 80-85
2. Reduce maximum width/height
3. Ensure optimization is enabled
4. Try converting to JPEG for photos
5. Enable WebP for better compression
6. Check that settings are being applied

Problem: Images Too Small or Low Quality

Possible Causes:

• Quality setting too low
• Maximum dimensions too small
• Over-compression

Solutions:

1. Increase quality setting to 85-90
2. Increase maximum dimensions
3. Check original image quality
4. Disable optimization temporarily to test
5. Upload higher quality source images

Related Modules

• Media Library: Upload and manage files with these settings
• General Settings: Other system configuration options
• Cloud Storage: Configure external storage for media files