Best Practice on WordPress Website¶
Image Extension¶
- .webp : General photos, graphics, and most content
- .png : For logos, icons
Common WordPress Image Sizes & Ratios¶
| Use Case | Recommended Size (pixels) | Aspect Ratio | Notes |
|---|---|---|---|
| Hero Image / Banner | 1920 × 1080 px (or 1600 × 900 px) | 16:9 | Full-width, high-impact visuals |
| Featured Image (Blog Post) | 1200 × 675 px | 16:9 | Ideal for blog posts & social sharing |
| Content/Inline Image | 800 × 600 px or 1024 × 768 px | 4:3 | Good size for inside post/page content |
| Thumbnail | 150 × 150 px | 1:1 | Used in widgets, archives, etc. |
| Portfolio/Gallery | 800 × 800 px | 1:1 or 4:3 | Depends on layout and theme |
| Header Logo | 300 × 100 px (approx.) | 3:1 | Theme-dependent; keep it sharp |
| Full-Width Background | 1920 × 1200 px | 16:10 or 16:9 | Make sure it looks good on large screens |
Recommended Max Image Size for Web Performance¶
| Image Use | Max Dimensions (px) | Max File Size | Notes |
|---|---|---|---|
| Hero/Banner Image | 1920 × 1080 px | ≤ 300 KB | Full screen; balance quality & speed |
| Full-Width Background | 1920 × 1200 px | ≤ 400 KB | Only if absolutely needed |
| Featured Blog Image | 1200 × 675 px | ≤ 200 KB | Social media friendly |
| In-Content Image | 800 × 600 px | ≤ 150 KB | Keeps page load fast |
| Thumbnail | 150 × 150 px | ≤ 50 KB | Small and optimized |