Images That Don’t Kill Your Site: Sizing, Formats, and Alt Text that Ranks

TL;DR

• Export images to the exact slot size (or just above).
• Prefer WebP/JPG; use SVG for logos/icons.
• Lazy-load below the fold; write human alt text.

Step 1: Match images to their job

• Hero images: striking but lightweight; avoid auto-playing video with sound.
• Service pages: show outcomes (before/after, team at work).
• Blog posts: diagrams and checklists beat stock photos.

Step 2: Choose the right format

• WebP/JPG for photos.
• PNG only if you need transparency/sharp UI.
• SVG for logos/icons (crisp at any size).
• Short MP4 beats GIFs for motion.

Step 3: Size and compress

• Export close to the display size; don’t ship 4000px to fill a 1200px slot.
• Compression quality 70–85% is usually indistinguishable from original.
• Keep OG images at 1200×630; social snippets at 1080×1350 and 1080×1920.

Step 4: Lazy-load and prioritize

• Above the fold: load immediately.
• Below the fold: lazy-load so the page shows content fast.
• Defer galleries and non-critical embeds.

Step 5: Write alt text that helps humans

• Describe the purpose, not just the pixels:
• Bad: “image1.jpg”
• Better: “Team repairing HVAC unit in Downey—same-day service”
• Don’t stuff keywords; be useful to someone who can’t see the image.

Step 6: Housekeeping that saves speed

• Rename files descriptively (e.g., kitchen-remodel-before-after.jpg).
• Delete unused originals from your media library.
• Reuse assets across pages if they serve the same job.

Owner’s Corner: a 30-minute sweep

• Audit your homepage and top service page.
• Replace two oversized images.
• Fix alt text on the first 10 images you find.
• Celebrate the faster feel on mobile.

FAQ