Images, Media, and Performance
Speed Is a Feature
A slow website is a broken website. Every second of load time costs you visitors. Studies consistently show that a one-second delay in page load reduces conversions by 7% and that 53% of mobile visitors abandon sites that take more than three seconds to load.
This chapter covers the practical steps to make your site fast, your media optimized, and your pages accessible to everyone.
Image Optimization
Images are typically the heaviest elements on any webpage. Unoptimized images are the number one cause of slow websites. Fix this one thing and you've solved most speed problems.
File Formats
WebP: The modern standard. Smaller file sizes than JPEG or PNG with equal or better quality. Supported by all modern browsers. Use this whenever possible.
JPEG: Good for photographs. Supports lossy compression — you can reduce file size at the cost of some quality. Use when WebP isn't supported.
PNG: Good for images with transparency, text, or sharp edges (logos, icons, screenshots). Larger than JPEG for photographs.
SVG: For icons and simple graphics. Infinitely scalable, tiny file size. Perfect for logos and icons.
AVIF: Next-generation format, even smaller than WebP. Growing support but not universal yet.
Compression
Every image on your site should be compressed before uploading. This reduces file size without noticeable quality loss.
Free tools: Squoosh (squoosh.app) — Google's browser-based image optimizer. TinyPNG (tinypng.com) — compress PNG and JPEG files. ShortPixel — bulk compression with a free tier.
Target file sizes: Hero images and full-width photos: under 200KB. Content images: under 100KB. Thumbnails: under 50KB.
Sizing
Don't upload a 4000x3000 pixel photo for a spot that displays at 800x600. Resize images to their display dimensions before uploading.
Common web image widths: Full-width hero: 1920px wide. Content images: 800–1200px wide. Thumbnails: 400–600px wide. Mobile images: 750px wide.
Lazy Loading
Lazy loading means images below the fold (not visible without scrolling) don't load until the visitor scrolls to them. This dramatically speeds up initial page load.
Most modern platforms support lazy loading automatically. Verify it's enabled in your platform's settings.
AI Prompt: Image Optimization Plan
Help me optimize images for my website.
My situation:
- Platform: [which builder]
- Number of images on site: [approximate]
- Current page speed score: [if you've tested, or "haven't tested"]
- Types of images: [photos, illustrations, icons, screenshots]
- Current image sizes: [if you know, or "not sure"]
Please provide:
1. Step-by-step image optimization workflow
2. Which format to use for each type of image
3. Recommended compression tools for my platform
4. How to set up lazy loading
5. A checklist I can follow for every image I add going forward
Video
Video can boost engagement and time on site. But it can also destroy your page speed if handled poorly.
Hosting Video
Never upload video directly to your website hosting. Video files are massive and will slow everything down.
Use YouTube or Vimeo. Upload your video there, then embed it on your site. The video is served from their fast CDN, not your server. Your page stays fast.
Lazy load video embeds. Even embedded videos add weight. Use a preview image that loads the video player only when clicked.
When to Use Video
Homepage hero: A short background video or product demo can be effective but must load fast. Keep it under 30 seconds, muted by default, and compressed heavily.
Testimonials: Video testimonials are significantly more persuasive than text. Embed from YouTube.
Tutorials and demos: If you're explaining how something works, video often communicates better than text.
About page: A personal introduction video builds connection faster than written copy.
Web Performance
Measuring Speed
Google PageSpeed Insights (pagespeed.web.dev): The standard benchmark. Gives you a score out of 100 for both mobile and desktop, plus specific recommendations.
GTmetrix (gtmetrix.com): More detailed analysis with waterfall charts showing what's slowing you down.
Target scores: Mobile: 80+ (90+ is excellent). Desktop: 90+ (95+ is excellent). Mobile matters more because Google uses mobile-first indexing.
Common Speed Fixes
Optimize images. Already covered, but it bears repeating — it's usually the biggest win.
Minimize plugins/apps. Every plugin or third-party app adds code that needs to load. Audit regularly and remove anything you're not actively using.
Use a CDN. A Content Delivery Network serves your site from servers closest to each visitor. Most platforms include this. For self-hosted WordPress, Cloudflare (free tier) is excellent.
Enable caching. Caching stores copies of your pages so they don't need to be rebuilt for every visitor. Most platforms handle this automatically. For WordPress, use a caching plugin like WP Super Cache or W3 Total Cache.
Minimize custom fonts. Each font file adds to load time. Stick to two fonts, and use "font-display: swap" so text appears immediately while fonts load.
Accessibility
Web accessibility means your site is usable by everyone, including people with visual, hearing, motor, or cognitive disabilities. It's both the right thing to do and increasingly a legal requirement.
Essential Accessibility Practices
Alt text on all images. Descriptive text that conveys the image's purpose for screen reader users.
Color contrast. Text must have sufficient contrast against its background. Use the WebAIM Contrast Checker (webaim.org/resources/contrastchecker) to verify. Minimum ratio: 4.5:1 for normal text, 3:1 for large text.
Keyboard navigation. Every interactive element (links, buttons, forms) should be usable with a keyboard alone. Tab through your site and make sure you can reach everything.
Form labels. Every form field needs a visible label. Don't rely on placeholder text alone — it disappears when the user starts typing.
Heading structure. Use headings in order (H1, H2, H3). Don't skip levels. Screen readers use headings to navigate.
Link text. "Read more about our web design services" beats "Click here." Descriptive link text tells screen reader users where the link goes.
Video captions. If you use video, include captions for deaf and hard-of-hearing visitors.
AI Prompt: Accessibility Audit
Help me check my website for accessibility issues.
My platform: [which builder]
My site URL: [if live, or describe the current state]
Current accessibility measures: [anything you've already done]
Please provide:
1. An accessibility checklist specific to my platform
2. The most common accessibility issues and how to fix them
3. Tools I can use to automatically test accessibility
4. Legal requirements I should be aware of (ADA, WCAG)
5. Quick wins that make the biggest difference
Mobile Responsiveness
Responsive design means your site adapts to any screen size — desktop, tablet, phone, and everything in between. All modern platforms are responsive by default, but the devil is in the details.
Things to Check on Mobile
Does the text read comfortably without zooming? Do images resize properly? Is the navigation easy to use with one thumb? Do buttons and links have enough tap space? Do forms work well on a phone keyboard? Is any content cut off or overlapping?
Test on an actual phone, not just the preview in your builder. The preview is helpful but doesn't capture everything — especially touch interactions and real loading speeds.
Performance Budget
Set a target for your site and hold yourself to it:
Total page weight under 2MB (ideally under 1MB). Load time under 3 seconds on mobile. PageSpeed score above 80 on mobile. No more than 3 external scripts. All images compressed and properly sized.
Every feature you add — a new plugin, a background video, a live chat widget — should be evaluated against this budget. If it slows your site noticeably, it needs to earn its place.
Next: getting your site live and keeping it healthy.