How to Optimize and Upload Images for Faster Load Times
Learn how to resize, compress, and upload images to your WordPress site for faster performance and a better user experience.
Large or unoptimized images can slow down your website, especially on mobile devices. Here’s how to prepare and upload images that look great and load quickly.
Step 1: Choose the Right Format
Use the correct image format based on your content:
| Format | Best For |
|---|---|
.JPG |
Photos, team images |
.PNG |
Logos, images with transparency |
.WEBP |
Modern, smaller files with high quality (recommended where supported) |
Step 2: Resize Before Uploading
- Most images don’t need to be wider than 2000px.
- For banners or full-width images: max 1920px wide.
- For smaller in-page graphics, 800–1200px wide is often enough.
Use free tools like:
- Pixlr X (Browser-based Editor)
- Canva
- Photoshop (if available)
Step 3: Compress the File Size
After resizing, compress the image to reduce its file size without noticeable quality loss.
Recommended tools:
- TinyPNG / TinyJPG
- Squoosh (Google’s web-based image optimizer)
- ShortPixel (plugin or online)
Target File Sizes:
- Web images: < 250 KB
- Hero images: ideally under 500 KB
Step 4: Upload the Image in WordPress
- Go to your WordPress dashboard
- Click Media > Add New
- Drag and drop your optimized image
- Or upload directly from within BeaverBuilder modules when editing a page
Step 5: Add Alt Text for Accessibility & SEO
- Once uploaded, click the image in Media Library
- Fill in the Alt Text field (e.g., “Youth soccer players during practice”)
- This helps with SEO and screen readers
Bonus Tip: Use Image Blocks or Modules
- In BeaverBuilder, always use Photo modules for proper spacing and responsiveness.
- Avoid copy-pasting images into text boxes.
