From the journal

Image Optimization for Small Business Sites

Gorgeous images can quietly tank conversions if they’re heavy or mislabeled. The fix is simple: right size, right format, right description.

PublishedSep 10, 2025
TopicsPerformanceContent StrategySMB Growth Series

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

TL;DR

  • Match images to purpose: Hero images (top banners) should inspire trust but load fast. Service pages should show real outcomes or context. Blog posts work best with diagrams or checklists.
  • Use modern formats: WebP and AVIF compress photos much better than JPEG. Provide a JPEG/WebP fallback. PNG only for transparency or UI graphics; SVG for logos/icons (crisp, tiny files).
  • Size and compress: Export images at (or just above) their display size. Use srcset/sizes so mobile screens don’t download huge files. Compress photos around 70–85% quality – this often slashes file size with little visible loss.
  • Lazy-load & prioritize: Load above-the-fold images immediately. Use the loading="lazy" attribute on offscreen images to defer them. Don’t lazy-load your largest contentful image, and defer galleries/sliders.
  • Write good alt text: Describe the image’s meaning or function (for example, “Notary Maria certifying a document in Downey”) rather than the filename. Be concise and helpful for users and SEO. If an image is purely decorative, use alt="".

Your homepage and key pages deserve images that fit their purpose. The hero image should look great but load fast (for example, you signing papers or driving a mobile office van), without autoplaying sound. Service pages should show real outcomes or context – e.g. a client with a stamped document or an official certificate. Blog posts benefit more from diagrams, infographics or checklists rather than random stock photos.

  • Hero images: Use a sharp, relevant photo or muted video (e.g. a smiling notary at work). Make it eye-catching but optimize it well so it doesn’t slow down the page. Avoid large autoplay videos with sound on load.
  • Service pages: Show clients what they get. For notaries, this could be photos of stamping documents, notarizing a loan paperwork, or you working with a client. Before/after or step-by-step images build trust.
  • Blog posts/content: Add value with custom graphics or useful images. Illustrations (like a document checklist) or close-ups of documents/authentication tools work better than generic stock in articles.

Step 2: Choose the right format

  • WebP & AVIF: These modern photo formats give much smaller files for the same quality. AVIF can cut sizes in half vs JPEG, but has limited support. The current advice is to use AVIF where you can and fall back to WebP/JPEG. WebP is now supported in all major browsers.
  • JPEG: If compatibility is a concern, use high-quality JPEGs. You can often set quality to ~70–85% to save space without visible loss.
  • PNG: Reserve PNG for graphics needing full detail or transparency (icons, logos on varied backgrounds). PNG’s lossless compression means crisp lines, but file sizes can be large. Consider PNG-8 for simple graphics with few colors.
  • SVG: Perfect for logos, icons, and line art. As vectors, SVG images stay crisp at any size and are usually very small in file size.
  • Animation: Instead of bulky GIFs, use short silent MP4s or animated WebPs for motion. They compress far better. (CSS animations or Lottie are also good lightweight alternatives.)

Step 3: Size and compress

  • Exact sizing: Export each image at (or just slightly above) the largest size it will display. For example, don’t upload a 4000px-wide hero if it only shows at 1200px. This avoids wasting bandwidth. Use srcset and sizes so the browser picks an appropriately sized file for each device (e.g., 800w for small screens, 1200w for tablets, etc.). This ensures mobile visitors aren’t downloading desktop-size images.
  • Compression: After sizing, compress the image. Photos can often be saved at ~70–85% quality with no noticeable drop. This drastically shrinks file size. For line art or interface screenshots, consider lossless PNG or GIF if fewer colors. Tools like Squoosh or TinyPNG can automate this.
  • Social/OG images: Make sure your social-sharing images use the right dimensions. Open Graph images (link previews on Facebook/Twitter/LinkedIn) should be ~1200×630px. For Instagram/Facebook feed posts, use 1080×1080 (square) or 1080×1350 (portrait) to avoid cropping. For Stories/Reels, use 1080×1920 (9:16). Following these guidelines keeps text legible and prevents automated cropping.

Step 4: Lazy-load and prioritize

  • Above the fold: Critical images (like your hero/banner and key content images in the first viewport) should load right away. This speeds up the Largest Contentful Paint (LCP), a key metric for user perception.

Below the fold: Add loading="lazy" to <img> tags for images further down the page. Most browsers will then delay loading these offscreen images until the user scrolls near them. This cuts initial load time and data usage. For example:

[img src="photo.webp" alt="Office storefront" loading="lazy"]

Don’t lazy-load the main hero image or any image that’s immediately visible on page load; those should be fetched normally.

  • Other content: Delay non-critical embeds like slideshows or external iframes. For image galleries, either lazy-load the images inside the gallery or only load the first slide and fetch others on demand. This prevents unnecessary network requests.

Step 5: Write alt text that helps humans

  • Describe the purpose: Alt text should briefly describe what the image shows or does. For example, use alt="Notary public Jane Doe signing a business loan document" rather than a filename or empty placeholder. This helps visually impaired users and provides SEO value.
  • Be concise and relevant: Keep alt text short (a few words or a sentence). Focus on what’s important. If the image is complex (e.g. a chart), summarize the key info. Don’t keyword-stuff – the goal is usefulness, not search spamming.
  • Context matters: If the image is decorative or purely for spacing, set alt="". This tells screen readers to ignore it. If an image acts as a link or button, describe its function (e.g. alt="Email icon" for a mail link).
  • Example: Instead of alt="image123.jpg", write something like alt="Mobile notary inspecting a signed contract at a client’s home". This single phrase conveys context and is user-friendly.

Step 6: Housekeeping that saves speed

  • Descriptive filenames: Rename uploads to match content (e.g. downey-notary-signing.jpg). This is good for SEO and makes your media library organized.
  • Clean up: Remove old or unused images from your site’s media library. Unneeded files still bloat backups and can slow media browsers. Delete duplicates and forget about legacy logos or screenshots.
  • Reuse wisely: If the same image (like a logo or a standard team photo) is needed on multiple pages, upload it once and embed it everywhere. This lets the browser cache it between pages.
  • Tools and plugins: Many CMS platforms have auto-optimization plugins (e.g. Imagify, Smush). These help, but double-check their settings – sometimes manual tweaks on hero images still give better quality.

Owner’s Corner: A 30-minute sweep

  • Spot-check pages: Pick your homepage and a top service page (like “Notary Services”). Identify any images much larger than their display area.
  • Optimize two images: For example, replace an oversized hero or banner with a properly sized WebP/PNG.
  • Fix alt text: Look at the first 5–10 images on those pages. Update any generic or missing alt text to be descriptive (per the guidelines above).
  • Test performance: Use a mobile device or a tool like PageSpeed Insights to see the load times before and after. Celebrate the faster load and better Core Web Vitals!

FAQ

  • Is AVIF better than WebP? AVIF typically achieves smaller files (often ~50% smaller than JPEG) with top quality, so it’s excellent for key images. However, not all browsers support it yet. The safe strategy is to serve AVIF when possible, with a WebP (or JPEG) fallback.
  • Should I auto-compress everything? Automated tools and plugins (and services like Squoosh) are great for batch work, but for heroes and important visuals, export manually to inspect quality. Sometimes a 70% vs 80% JPEG might look noticeably different. The cited guides suggest 70–85% quality is usually ideal.
  • Do image sliders hurt performance? Often yes. Sliders/carousels frequently preload multiple images (even those offscreen) or use bulky scripts. This can bloat your page and slow everything down. Instead, choose one strong image or load additional slides on demand (lazy-load each image when its slide appears).
  • What about social media images? Follow each platform’s recommended sizes. For example, use ~1200×630 for link-preview (OG) images. For Facebook/Instagram feed, 1080×1080 or 1080×1350 (for portrait) is best. Stories/Reels should be 1080×1920 (9:16). Using the right dimensions avoids awkward crops and blurry results.