Divi Image Size Guide (in pixels)

{tocify}{title:Table of Contents}

🖼️ Divi Image Size Guide (in pixels)

Image Type / Placement	Recommended Size (px)	Aspect Ratio	Notes
Hero / Fullwidth Header	1920 × 1080 (or 2560 × 1440 for 4K)	16:9	Large banner at the top. Keep under 400 KB for speed.
Section Background	1920 × 1080	16:9	For parallax or full-width background images.
Row Background	1920 × 800	2.4:1	Slightly shorter for a balanced layout.
Slider Image	1920 × 1080	16:9	Keep all slider images the same size.
Blurb / Icon Image	400 × 400	1:1	For circular or small square icons.
Gallery Image	800 × 600	4:3	Good balance of quality and performance.
Portfolio / Project Thumbnail	800 × 600	4:3	Works well in grid layouts.
Team Member / Profile Photo	600 × 600	1:1	Use consistent size for alignment.
Blog Post Featured Image	1200 × 675	16:9	Ideal for sharing on social media.
Testimonial Photo	150 × 150	1:1	Small circular photos.
Logo	Max width 250px	Depends on design	Use transparent PNG or SVG for sharpness.
Product Image (WooCommerce)	800 × 800	1:1	Square and high-quality.
CTA (Call To Action) Image	1280 × 720	16:9	Works well with text overlay.

---

📱 Responsive Image Tips

• Desktop: Use full resolution (1920px wide).
• Tablet: Divi scales images down automatically, but ideally aim for ~1280px wide.
• Mobile: Minimum 800px wide is fine.

✅ Format:
Use WebP or optimized JPEG — they load faster than PNG for photos.
Logos and icons should use SVG (scales perfectly with no blur).

---

⚙️ Optimization Tips

1. Compress all images (use TinyPNG or Squoosh).
2. Keep banner images below 400–500 KB.
3. Maintain consistent aspect ratios across similar sections.
4. Enable Divi’s Dynamic Image Loading (in Theme Options → Performance).