Image Optimization Best Practices
Image Optimization Best Practices
File Formats
JPG or WebP (recommended default)
- Use for most photographs, banners, and content images.
- WebP is typically 25–35% smaller than JPG at similar quality.
- Supported by all modern browsers.
SVG
- Use for logos, icons, illustrations, and simple graphics.
- Keep SVG code clean and optimized.
- Never upload SVGs from untrusted sources.
PNG
- Use only when transparency is required.
- Compress before uploading.
- Consider WebP with transparency support when possible.
File Size Guidelines
Optimize images as much as possible while maintaining acceptable visual quality.
Recommended Targets
| Image Type | Target Size |
| Icons | < 25 KB |
| Content Images | < 300 KB |
| Hero Images | < 300 KB |
| Background Images | < 400 KB |
Large images can negatively impact Core Web Vitals and page speed scores.
Image Dimensions
Upload images only as large as necessary for their display size.
| Usage | Recommended Width |
| Content Images | 800–1200px |
| Full Width Sections | 1600–1920px |
| Hero Backgrounds | 1920px max |
| Logos | SVG preferred |
Compression Tools
Recommended
- Squoosh (https://squoosh.app)
- TinyPNG / TinyJPG (https://tinypng.com)
- ImageOptim (Mac)
- ShortPixel Online Compressor
WordPress Plugins
Imagify
- Automatic compression
- WebP generation
- Bulk optimization
ShortPixel
- Automatic compression
- WebP/AVIF support
- Bulk optimization
EWWW Image Optimizer
- Compression and optimization
- Responsive image support
WordPress Best Practices
Use Lazy Loading
WordPress includes native lazy loading by default.
- Keep lazy loading enabled for most images.
- Avoid lazy loading above-the-fold hero images.
Featured Images
- Always set a featured image when appropriate.
- Use optimized dimensions and file sizes.
Replace Images
Use a plugin such as:
- Enable Media Replace
This allows image replacement without changing URLs or breaking existing content.
Accessibility Requirements
Alt Text
Every meaningful image should have descriptive alt text.
Good Example
Attorney speaking with client during estate planning consultation
Bad Example
IMG_1234.jpg
SEO Best Practices
File Names
Rename images before uploading.
Good
estate-planning-attorney-consultation.webp
Bad
IMG_8473.jpg
Alt Text
- Describe the image accurately.
- Include relevant keywords only when natural.
- Do not stuff keywords.
Performance & Core Web Vitals
Prioritize Above-the-Fold Images
Hero images should:
- Be compressed aggressively
- Use WebP or AVIF
- Have explicit width and height attributes
- Load quickly to improve Largest Contentful Paint (LCP)
Prevent Layout Shift
Always define image dimensions when possible to reduce Cumulative Layout Shift (CLS).