Use this guide to pick the right dimensions, formats, and compression settings for images and video. Follow the quick reference and block-specific tips to keep pages sharp and fast to load.
Before You Start
- Collect original, high-resolution files.
- Confirm each image’s intended block or placement.
- Decide if the image needs transparency or can be flattened.
- Prepare short, descriptive alt text for accessibility.
Quick Reference: Standard Aspect Ratios and Sizes
|
Aspect Ratio |
Best Size (px) |
Also Works |
Typical Uses |
|
16:9 |
1600 × 900 |
1920 × 1080, 1500 × 844, 1280 × 720, as low as ~500 × 280 |
Full-width hero, banners, blog headers, sliders |
|
1:1 |
1000 × 1000 |
Up to 1500 × 1500 or as low as 500 x 500 |
Avatars, square promos, gallery tiles |
|
4:5 |
800 × 1000 |
400 × 500 |
Tall features, portrait cards, promos |
Tip: Keep the same size across a set of images in the same block for a clean, consistent layout.
File Types and When to Use Them
- JPEG (JPG): Best for photos without transparency. Save at 60–80% quality.
- WebP: Great quality at smaller sizes. Convert photos to WebP ~25% quality as a starting point, then adjust.
- PNG: Use when you need a transparent background or for simple graphics. Keep logos roughly 500–1000 px wide and icons around ~250 px.
- SVG: Ideal for logos and icons that need to scale cleanly at any size. Use when available.
Target file sizes
- Photos and large banners: aim for 150–300 KB after compression.
- Icons and small graphics: <100 KB.
- Only exceed these targets if quality loss is visible.
Examples:
General Image Best Practices
- Crop to the final aspect ratio before upload. Avoid relying on in-browser cropping.
- Export at the recommended pixel size for the block where it will live.
- Compress, then inspect at 100% zoom. If banding or artifacts appear, increase quality slightly.
- Name files clearly (hero-fall-sale-1600x900.webp) for easy reuse and QA.
- Write meaningful alt text that describes the content and purpose. This helps with SEO as well.
- Keep a consistent style across a set: framing, exposure, and color balance.
Block-Specific Recommendations
Slider Block
- Use a 16:9 image. Best result: 600 × 340 px for clarity with small file size.
- Keep all slides the same dimensions for visual symmetry.
- Format: WebP or JPEG. Avoid PNG unless transparency is needed.
3-Column Block (icons/images above text)
- Prefer SVG for crisp icons.
- If using raster, export 150 × 150 to 250 × 250 px.
- Formats: SVG, PNG, or WebP.
Full Image with Text Block
- Use 1600 × 900 px.
- You can go up to 1920 × 1080 if the design truly needs it, but larger files increase load time.
Blog Block (blog header images)
- Stay with 16:9, ideally 1600 × 900 px for consistency across posts.
Full Image Block
- This block is the outlier and adapts to the image’s native dimensions.
- For near full-width on desktop, use 2000 px wide and a height between 100–600 px depending on the look you want.
- If Full Width is turned off, 1600 px wide is sufficient with the same height range.
- Choose a background color that complements the image, since it will show to the sides on larger screens.
Video Guidelines
- Aspect ratio: 16:9
- Common export size: 1920 × 1080
- Codec/container: H.264 in .mp4
- Bitrate: Use a variable bitrate and test for the lowest setting that still looks clean. As a baseline, try 1–4 Mbps VBR for simple content, then raise as needed for motion-heavy scenes.
- Aim for a file size of 3-5 MBs but no larger that 10 MBs
Step-by-Step: Preparing an Image
- Open the source file in your editor.
- Crop to the correct aspect ratio.
- Resize to the target pixel dimensions from the table above.
- Export as WebP (~25% quality) or JPEG (60–80% quality).
- Check the result at 100% zoom. If you see artifacts, raise quality slightly.
- Name the file clearly and add alt text where applicable in BLOCKS.
Placeholder for screenshots:
- [Image] “Cropping to 16:9 in Photoshop”
- [Image] “Export settings for WebP at 25%”
- [Image] “JPEG export at 70% quality”
Accessibility and SEO
- Write clear alt text that describes the image’s content and function.
- Use descriptive file names.
- Avoid text baked into images when possible. Use HTML text for clarity and translation.
Troubleshooting
- Image looks soft: Check you exported at the correct pixel size. Avoid upscaling small images.
- Edges look jagged: Use SVG for logos/icons or export a higher-resolution PNG.
- File is too large: Reduce quality a small step at a time, or switch to WebP.
- Crops look inconsistent: Standardize aspect ratios across the set used in a block.
- Video stutters: Increase bitrate or simplify motion and effects during export.
FAQs
Can I upload larger images than recommended?
Yes, but larger files slow the page. Stick to the sizes above unless you have a specific design reason.
Do I always need PNG for transparency?
No. If the graphic can be an SVG, use SVG. PNG is the fallback when SVG is not available.
What if my slider images are mixed sizes?
Resize them to match. Consistent dimensions prevent layout shifts.
Version History
Oct 8, 2025: First publication based on our standard image and video practices.