WordPress Media Library: Tips dan Best Practices

Images:
- JPG/JPEG
- PNG
- GIF
- WebP (WordPress 5.8+)
- ICO

Documents:
- PDF
- DOC/DOCX
- PPT/PPTX
- XLS/XLSX
- ODS/ODT
- PSD

Media:
- MP3
- M4A
- OGG
- WAV
- MP4
- MOV
- AVI
- WMV

Other:
- ZIP
- SVG (dengan plugin)

Default path:
/wp-content/uploads/

Organization:
/2025/
  /01/
    image-1.jpg
    image-2.png
  /02/
    video-1.mp4

Settings → Media
☐ Organize uploads into month/year folders

Toggle: List view icon (top right)

Shows:
- Title
- Author
- Upload date
- File size
- Dimensions

Why Optimize:
- Faster page load
- Better SEO
- Less bandwidth
- Improved UX

Steps:
1. Resize to actual display size
   Homepage hero: 1920x1080px
   Blog featured: 1200x630px
   Thumbnails: 300x300px
   
2. Compress without quality loss
   Tool: TinyPNG.com
   Target: 70-80% reduction
   
3. Choose right format
   Photos: JPG
   Graphics/logos: PNG
   Animations: GIF
   Modern: WebP (best compression)

Example:
Before: 3.5MB (4000x3000px)
After: 250KB (1200x800px)
Result: 14x smaller, looks identical!

Online (Free):
- TinyPNG.com (PNG/JPG)
- Squoosh.app (all formats, by Google)
- Compressor.io
- ImageOptim (Mac app)

Desktop:
- GIMP (free, open source)
- Photoshop
- Canva (online)

WordPress Plugins:
- Smush (auto-optimize on upload)
- ShortPixel
- Imagify
- EWWW Image Optimizer

❌ Bad:
IMG_1234.jpg
screenshot.png
final-final-v3.jpg
photo 1.jpg (spaces)

✅ Good:
wordpress-security-dashboard.jpg
contact-form-example.png
team-photo-2025.jpg

Use:
- Descriptive names
- Keywords (when relevant)
- Lowercase
- Hyphens (not spaces or underscores)
- Short but descriptive

Benefits:
- SEO advantage (image search)
- Easier to find later
- Professional organization

1. Open Media Library
2. Drag files from computer
3. Drop into browser window
4. Wait for upload
5. Done!

Fastest untuk multiple files

1. Media → Add New
2. Click "Select Files"
3. Choose from computer
4. Upload

1. Create/edit post
2. Click "+" (Add Block)
3. Image block
4. Upload atau Select

For many files (100+):
1. Connect via FTP
2. Navigate to /wp-content/uploads/2025/01/
3. Upload files
4. WordPress → Media → Add New
5. Click "Bulk Upload" atau
   Use plugin: "Media from FTP"

1. FileBird (FREE)
   - Folder structure
   - Drag & drop
   - Fast filtering
   - 100K+ installs

2. Enhanced Media Library (FREE)
   - Add categories
   - Filter by category
   - Bulk assign

3. WP Media Folder (FREE + Pro)
   - Folder tree
   - Gallery integration
   - Cloud sync (Pro)

1. Install & Activate FileBird
2. Media Library → See new sidebar
3. Create folders:
   - Blog Images
     └─ 2025
        └─ January
        └─ February
   - Product Photos
   - Team Photos
   - Logos
   - Icons
   - Documents
4. Drag files into folders
5. Filter by folder easily

Good alt text = easier searching

Upload image:
1. Add descriptive alt text
2. Use keywords
3. Include context

Later:
Search "team meeting" → finds images dengan that alt text

For similar content, use prefixes:

Blog posts:
blog-title-of-post-featured.jpg
blog-title-of-post-inline-1.jpg

Products:
product-shoes-nike-front.jpg
product-shoes-nike-side.jpg

Team:
team-john-doe-headshot.jpg
team-jane-smith-headshot.jpg

Benefit: Groups together alphabetically

Settings → Media

Thumbnail: 150x150 (crop)
Medium: 300x300 (max dimensions)
Large: 1024x1024 (max dimensions)

WordPress generates all automatically on upload

// In functions.php atau child theme

add_image_size( 'featured-large', 1200, 630, true );
// Name, width, height, crop (true/false)

add_image_size( 'team-photo', 400, 400, true );

// Regenerate existing images:
// Use plugin: Regenerate Thumbnails

Responsive images:
- Thumbnail untuk listings
- Medium untuk sidebars
- Large untuk content
- Custom untuk specific layouts

WordPress serves appropriate size based on context
= Faster loading!

Maximum upload file size:
Determined by server (often 2MB-64MB)

To increase:
1. Contact hosting support
2. Or modify .htaccess:

php_value upload_max_filesize 128M
php_value post_max_size 128M
php_value memory_limit 256M
php_value max_execution_time 300
php_value max_input_time 300

☑ Organize my uploads into month- and year-based folders
Result: /2025/01/ structure

✅ Enable: Easier backups, organized
❌ Disable: Flat structure (simpler URLs)

Media → Library
Search box (top right)

Searches:
- Filename
- Title
- Caption
- Description
- Alt text

Tip: Use descriptive alt text untuk easier searching!

Dropdowns:
- All media items
- Images
- Audio
- Video
- Documents
- Unattached (not used)

Date filter:
- All dates
- Specific month/year

Grid view:
1. Click "Bulk Select"
2. Click images to select
3. Choose action:
   - Delete permanently
   - Download (plugin needed)

1. Install plugin: "Media Cleaner"
2. Scan for unused files
3. Review list
4. Delete unused
5. Free up space!

WARNING: Backup first!
Some items may be used externally

After changing image sizes:

1. Install: "Regenerate Thumbnails"
2. Tools → Regen. Thumbnails
3. Regenerate All Thumbnails
4. Wait untuk completion
5. New sizes created!

1. Edit post
2. Right sidebar → Featured Image
3. Set featured image
4. Choose atau upload
5. Select

Dimensions: 1200x630px (standard)
Format: JPG (photos), PNG (graphics)
File size: < 200KB
Include: Relevant visual, good contrast untuk text overlay

1. In editor: Add Block
2. Search "Gallery"
3. Upload atau select images
4. Arrange order (drag)
5. Configure:
   - Columns (2-8)
   - Crop images (on/off)
   - Link to (media/attachment/none)

For advanced needs:

1. Envira Gallery (FREE + Pro)
   - Beautiful lightbox
   - Albums
   - Social sharing
   - Video support

2. NextGEN Gallery (FREE)
   - Powerful galleries
   - Slideshows
   - Albums
   - Watermarks

3. FooGallery (FREE)
   - Modern layouts
   - Fast loading
   - Masonry grid
   - Lightbox

Theme-dependent:

Customizer method:
1. Appearance → Customize
2. Header → Background Image
3. Upload large image (1920x1080+)
4. Choose display settings

Or via page builder (Elementor, etc.)

Just paste URL:
https://www.youtube.com/watch?v=VIDEO_ID

WordPress auto-embeds!
No plugin needed.

Auto-supported:
- YouTube, Vimeo
- Twitter, Facebook
- Instagram
- SoundCloud, Spotify
- And 30+ more

Just paste URL pada its own line

Images load hanya when scrolling into view
Not all images load immediately

Benefits:
- Faster initial page load
- Less bandwidth
- Better user experience

WordPress 5.5+: Native lazy loading!
Automatically enabled.

Additional plugins:
- WP Rocket (advanced lazy load)
- Lazy Load by WP Rocket (free)
- a3 Lazy Load

Content Delivery Network
Stores copies of media di servers worldwide
Serves from closest server to user

Result: Faster loading globally

Free:
- Cloudflare (free tier)
- Bunny CDN (pay-as-you-go)

Premium:
- KeyCDN
- Amazon CloudFront
- StackPath

1. Sign up Cloudflare
2. Add your domain
3. Update nameservers
4. Enable CDN (orange cloud)
5. Done - automatic caching!

Next-gen format:
- 25-35% smaller than JPG
- Supports transparency (like PNG)
- WordPress 5.8+ native support

Benefits:
Same quality, much smaller files

Plugins:
1. Smush Pro (auto-convert)
2. ShortPixel (free converts)
3. WebP Express (free)
4. EWWW Image Optimizer

Or manual: Squoosh.app

Disable dangerous file types:

functions.php:
```php
function restrict_file_types($mime_types) {
    // Remove risky types
    unset($mime_types['exe']);
    unset($mime_types['com']);
    unset($mime_types['bat']);
    return $mime_types;
}
add_filter('upload_mimes', 'restrict_file_types');

Benefits:
- Infinitely scalable
- Small file size
- Perfect untuk logos/icons

Risk:
- Can contain malicious code
- Disabled by default untuk security

Plugin: "Safe SVG"
1. Install & Activate
2. Sanitizes SVGs on upload
3. Removes potentially harmful code
4. Upload SVGs safely!

Other sites embedding YOUR images
Uses YOUR bandwidth
No benefit to you

.htaccess method:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteRule \.(jpg|jpeg|png|gif|webp)$ - [F,NC]

Or use Cloudflare (automatic)

1. Delete unused images
   Tool: Media Cleaner plugin

2. Optimize new uploads
   Tool: Smush - bulk optimize

3. Check file sizes
   Tools → Site Health → Info
   Look for large files

4. Regenerate thumbnails (if needed)
   After theme change

5. Check for broken images
   Tool: Broken Link Checker

Each upload creates database entries
Over time = database bloat

Cleanup:
1. Install: WP-Optimize
2. Database → Tables
3. Optimize media tables
4. Remove orphaned metadata
5. Run monthly

Separate from database
Large files
Hard to recreate
Contains original work

UpdraftPlus:
- Files: Weekly backup
- Store: Google Drive, Dropbox
- Retention: 4-8 backups

Or:
- FTP download: /wp-content/uploads/
- Local storage
- Cloud sync (Dropbox, etc.)

WordPress automatically includes srcset:

<img src="image.jpg"
     srcset="image-300.jpg 300w,
             image-600.jpg 600w,
             image-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 600px">

Browser chooses appropriate size!
No plugin needed.

WordPress media library slow dengan 10K+ images?

Solutions:

1. Media Library Assistant (FREE)
   - Better performance
   - Advanced filtering
   - Bulk editing

2. WP Media Folder (Pro)
   - Unlimited folders
   - Fast loading
   - Gallery integration

3. Offload to Cloud:
   - WP Offload Media (plugin)
   - Store pada Amazon S3
   - Serve dari CDN
   - Free up server space

// Create custom media library untuk team photos

function custom_media_library_query( $query = array() ) {
    if ( ! is_admin() ) {
        return $query;
    }
    
    $query['category__in'] = array( 'team' );
    return $query;
}
add_filter( 'ajax_query_attachments_args', 'custom_media_library_query' );

1. Check file size (reduce if needed)
2. Check wp-content/uploads permissions (755)
3. Increase memory:
   wp-config.php:
   define('WP_MEMORY_LIMIT', '256M');
4. Contact hosting support

1. Check file exists (via FTP)
2. Permissions: 644 untuk files, 755 untuk folders
3. Regenerate permalinks:
   Settings → Permalinks → Save
4. Disable plugins temporarily
5. Switch to default theme (test)

1. Organize dengan folders (FileBird)
2. Optimize images (Smush)
3. Upgrade hosting
4. Use lazy loading
5. Offload to CDN/S3