Image Optimization for Websites

Administrator
Apr 1
2 min read

Updated: Apr 5

Objective: Improve your page load speed and SEO performance by optimizing image file sizes, removing excess metadata, and setting explicit dimensions — all of which help reduce CLS (Cumulative Layout Shift) and improve user experience.

Tools Required:

🧰 ClickFunnels Editor

🌐 GTmetrix (or similar performance tool)

🖼️ Image editing software (e.g., Preview, Photoshop, online resizer)

🧪 Web browser (use incognito for testing)

Optimization Procedure:

1. Run a Speed Audit

🔍 Go to GTmetrix and enter the page URL.

🌐Look for issues related to:

Image size
Explicit width/height missing
CLS (Cumulative Layout Shift)

📌 CLS measures how much the layout moves as the page loads. Reducing layout shift improves stability and UX.

2. Add Explicit Width and Height to Images

🧰 In ClickFunnels Editor, click on the image element.

✅ Set a defined width and height (e.g., Width: 300px, Height: 97px).

✅ Save your changes

💡 Adding width/height helps the browser reserve space in advance, reducing layout jumpiness (CLS).

3. Resize the Image File Itself

Check the original image dimensions:

On Mac: Right-click → “Get Info”
On PC: Right-click → “Properties”

🛑 If the image is much larger than needed (e.g., 3000px wide scaled to 300px), it's wasting bandwidth

Resize it using an image tool:

Target width: 300px
Maintain aspect ratio (e.g., height: 88–97px)
Save as a web-optimized PNG

PNG is ideal for logos and crisp edges. It retains quality even after compression.

🎯 Final file size target: Under 20KB📉 Original file was over 90KB — we reduced it to ~17KB in the test

4. Strip Extra Metadata

🗑️ If possible, remove unnecessary metadata from the image file (e.g., ads, software tags).

📦 This helps reduce file size and prevent unwanted branding from appearing.

5. Upload the Optimized Image to ClickFunnels

🧰 Go to your page editor and upload the resized image.

⚠️ Make sure the correct version is selected (verify dimensions are as expected).

🖼️ The image should now appear crisp at proper size and load faster.

6. Test the Changes

Open the updated page in:
- ✅ A different browser
- 🕵️‍♂️ An incognito window
- ✅ Mobile view (to verify responsiveness)
Reload the page and inspect the image.
- Confirm it displays correctly and loads without delay.
Check mobile view as well to ensure consistent behavior.