📸 Website Image Types & Sizes – What You Really Need to Know
Before you start dragging giant images into your pages or exporting pixel-heavy logos, let’s break down the real-deal basics of image types and sizes for your Elementor website.
🧾 Image File Types (and When to Use Them)
JPEG (.jpg)
✔️ Best for: Photos, backgrounds, anything with lots of color blending
➖ Not transparent, but small file sizes = faster websites
✨ Use by default unless there’s a reason not to.
PNG (.png)
✔️ Best for: Images that need transparency (like logos over a background)
➖ Larger file size than JPEG, so only use when you need the transparency
SVG (.svg)
✔️ Best for: Icons, logos, and simple graphics that might need color editing via CSS
➖ Not supported in older browsers (but still widely usable)
✨ Tiny file sizes and scale perfectly without getting blurry
WEBP (.webp)
✔️ Best for: Modern compression (smaller than JPEG/PNG)
➖ Not editable in Canva and not always necessary
🤷♀️ Nice bonus, but not a must. If your image is already optimized as a JPEG or PNG, you’re fine.
📏 Image Dimensions vs File Size (Know the Difference!)
Image Dimensions = How big it looks on the screen (example: 1200×628 pixels)
File Size = How much storage it takes (example: 300KB or 1.2MB)
🧠 Goal: Use the smallest file size possible for the exact dimensions you need.
No one needs to upload a 4000×3000 image for a section that displays at 600×400.
📐 What About Aspect Ratios?
Aspect Ratio = The relationship between width and height (example: 16:9, 4:3, 1:1)
Matching the right ratio helps your image look clean and centered without weird cropping. If your section is built for a wide image, uploading a tall one will either crop awkwardly or stretch oddly.
Here are some common ratios you’ll run into:
16:9 – Widescreen (common for full-width sections)
4:3 – Classic photo ratio
1:1 – Square (good for profile images and galleries)
3:4 or 4:5 – Portrait (useful for bios, headshots)
🖼️ Common Sizes to Use (With Canva Tips!)
🌟 Full-width screen section?
1920×1080 px (16:9 ratio – max size)
1600×900 px (16:9 – typical usage)
📣 Feature or Hero Image?
1200×628 px (Facebook Ad size – 1.91:1 ratio)
👩🎤 Profile Photo or Logo?
Max: 300×400 px (3:4 ratio)
Ideal: 150×150 px or 200×200 px (1:1 ratio)
🔗 Background Textures?
Around 1500×1000 px (3:2 ratio)
Compress the file to under 200KB if you can
🧹 Bonus Tips
Don’t use Canva’s default download size. Always resize to the actual pixel dimensions you need.
Use the EWWW Image Optimizer plugin on your WordPress site to handle compression and optimization after upload.
Elementor Pro users: Use the “custom size” option in media settings to limit the visual load.
If you’re making a logo, export it as SVG or PNG with transparency, depending on what you’ll need.
This isn’t about making perfect art. It’s about making your website fast, clean, and easy to look at. You’ve got this.
Next up: Font Sizes That Don’t Suck on Mobile.