Imagery & Media
Photos, video, illustrations, icons — formats, optimization, and the impact on performance.
Image Formats: Choose the Right One
Choosing the right image format impacts both visual quality and file size. Wrong choice = bloated files or bad-looking images.
| Format | Best For | Compression | Transparency | File Size | Browser Support |
|---|---|---|---|---|---|
| JPEG | Photos, complex images | Lossy, high ratio | No | Small-Medium | Universal |
| PNG | Graphics, icons, logos | Lossless | Yes (PNG-32) | Medium | Universal |
| GIF | Animations, simple graphics | Lossless | Yes | Medium | Universal |
| SVG | Icons, logos, line art | Scalable (no pixels) | Yes | Small (text) | Modern browsers |
| WebP | Photos and graphics | Lossy/Lossless, best ratio | Yes | Very Small | Modern browsers only |
| AVIF | High-quality photos | Excellent compression | Yes | Very Small | Very new, limited |
Image Optimization Strategies
Optimization makes the biggest difference in performance:
1. Resize to Display Size
Don't upload a 4000px image for a 400px display. Use tools like ImageMagick or Imagemin to resize. Savings: 50-80%.
2. Compress Aggressively
Use TinyPNG, ImageOptim, or Squoosh to compress JPEG and PNG. Quality loss is imperceptible. Savings: 30-60%.
3. Use WebP with Fallback
WebP is smaller than JPEG and PNG but not supported everywhere. Use <picture> element for fallback.
Savings: 25-35% vs JPEG.
4. Implement Lazy Loading
Don't load images until user scrolls to them. loading="lazy" native attribute. Reduces initial page load time significantly.
5. Use Responsive Images
Serve different image sizes to different devices. Mobile gets small image, desktop gets large. srcset attribute.
Responsive Images with Srcset
Responsive images solve the problem: how do you serve a 2000px image for desktop but only 500px for mobile?
<img
src="image-600.jpg"
srcset="
image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w
"
alt="Description"
/>
Browser chooses the right image based on device width. Mobile gets 400px version, desktop gets 1200px version. User on fast connection might get larger version than slow 4G user.
Stock Photography Problem
Stock photos are convenient but problematic:
Everyone Recognizes Them
The "happy diverse office team looking at laptop" shot has been used 100,000 times. Users see it and mentally discount your authenticity.
They Don't Fit Your Brand
Generic stock photo style rarely matches your unique brand. You're forcing your story into someone else's imagery.
They Look Staged
Stock photos are obviously posed. Real photos (even low-quality ones) feel more authentic than perfect stock shots.
Alternative: Invest in real photography of your product, team, or customers. Or use unique illustrations that stand out from cookie-cutter stock photos.
Video on the Web
Video is powerful for engagement but complex to implement:
Self-Hosted vs Embedded
Self-hosted: More control, more responsibility. You manage bandwidth, encoding, streaming. Cost: $50-500/month depending on traffic.
Embedded (YouTube, Vimeo): Simple, free (or paid for branding). Slower than self-hosted, they own the platform.
Autoplay Complications
Autoplay with sound is blocked on many browsers. Autoplay muted works. But autoplaying video impacts performance (browser starts downloading before user action).
Formats and Codecs
H.264 (MP4): Best browser support, smaller files. Modern standard.
VP9 (WebM): Open-source, smaller than H.264, slower to encode.
Provide both formats with fallback.
Lazy Load Video
Video files are large (5-50MB). Don't force users to download until they watch. Use thumbnail + play button, load video on interaction.
Icons: SVG vs Icon Fonts
Icons are essential UI elements. Two main approaches:
SVG Icons (Modern)
Inline SVG code or SVG sprite sheets.
Pros:
- • Scale infinitely without quality loss
- • Full color control per icon
- • Can animate individual paths
- • Better accessibility (native alt text)
- • Smaller total file size
Cons:
- • More complex to manage
- • Internet Explorer support poor
Icon Fonts (Legacy)
Treat icons as glyphs in a custom font.
Pros:
- • Simple to use (CSS pseudo-elements)
- • Single font file download
- • Works on old browsers
Cons:
- • Can't color individual parts of icon
- • Scaling can be blurry
- • Font rendering quirks
- • Accessibility problems (semantic meaning unclear)
Modern choice: SVG icons. More control, better performance, better accessibility. Icon fonts are legacy unless you need IE11 support.
Platform Media Handling
| Platform | Image Optimization | Responsive Images | Video Support | File Size Limits |
|---|---|---|---|---|
| Wix | Automatic (limited control) | Automatic | YouTube/Vimeo only | High |
| Squarespace | Automatic (good) | Automatic | YouTube/Vimeo only | Very high |
| WordPress | Plugin-dependent | Manual (developer) | Self-hosted or embedded | Varies |
| Webflow | Good CDN support | Manual with srcset | Embedded or self-hosted | Very high |
| Custom | Developer control | Full control | Full control | Developer choice |
The Performance Impact
Images and video are often the biggest performance bottleneck:
- Unoptimized:10 photos at 5MB each = 50MB page. On 4G, takes 40+ seconds to load.
- Optimized:10 photos at 500KB each (compressed, resized, WebP) = 5MB page. Same 4G, takes 4 seconds.
- With lazy loading:Only images above the fold load immediately. Below-fold images load on scroll. Initial load: < 1 second.
Conversion impact: 1 second delay = 7% conversion drop (for e-commerce). Optimized media directly impacts revenue.
Accessibility and Images
Every image needs descriptive alt text for accessibility:
- Screen readers:Read alt text aloud. Visually impaired users rely on this.
- Image fails to load:Alt text displays in place of image. Users understand what was there.
- SEO:Search engines can't read images. Alt text helps indexing.
Good alt text: Describe the image content, not "image of..." or "photo." Bad: "image1.jpg". Good: "Woman typing on laptop at desk". Bad: "logo". Good: "Acme Corp logo".