wordpress image sizes guide

WordPress Image Sizes: A Quick Guide

WordPress Guides

An issue I often get asked about by clients, is what size, both in dimensions and file size, is best for uploading to WordPress. In this guide will walk you through the best practices for preparing and uploading images to WordPress, ensuring your site remains fast, responsive, and visually appealing.

Why Image Optimisation Matters

Before diving into the guide, let’s understand why proper image optimisation is critical:

  • Page Load Speed: Large images are often the primary culprit behind slow-loading websites
  • Mobile Experience: Unoptimised images consume excessive bandwidth on mobile devices
  • SEO Impact: Search Engines considers page speed as a ranking factor
  • Storage Efficiency: Optimised images take up less server space
  • Better User Experience: Fast-loading images keep visitors engaged

Ideal Image Dimensions for WordPress

Different areas of your WordPress site require different image dimensions. Here are the recommended sizes for common use cases:

Featured Images and Blog Posts

  • Optimal dimensions: 1200 pixels width
  • Why: This size works well across most themes and provides enough detail without excessive file size
  • Social sharing benefit: This dimension is also ideal for social media sharing on platforms like Facebook

Header Images

  • Optimal dimensions: 1920 pixels width
  • Why: This covers most desktop screen sizes while maintaining quality
  • Consideration: Some themes may have specific recommended dimensions

Thumbnail Images

  • Optimal dimensions: 150 × 150 pixels
  • Usage: Category images, author photos, and widgets

Full-width Background Images

  • Optimal dimensions: 1920 pixels width

E-commerce Product Images

  • Primary product images: 800 × 800 pixels (1:1 ratio)
  • Product galleries: Consistent dimensions for all images (800 × 800 recommended)
  • Zoom functionality: If your store offers zoom features, consider larger images (1500 × 1500)

Balancing Image Quality and File Size

Finding the sweet spot between image quality and file size is essential:

File Formats

Choose the appropriate format based on your image type:

  • JPEG: Best for photographs and complex images with many colours
  • PNG: Ideal for images requiring transparency or with text/simple graphics
  • WebP: Modern format with superior compression (use where supported)
  • SVG: Perfect for logos, icons, and simple graphics (scales without quality loss)

Resolution

  • Standard web resolution: 72 PPI (pixels per inch)
  • Printing resolution: 300 PPI (unnecessary for web-only images)

Quality Settings

When saving images for web:

  • JPEG quality: 70-80% typically offers the best balance
  • PNG compression: Use tools that optimise PNGs without quality loss

Image Compression

When you have your images in the correct dimensions, you need to compress them to reduce the file size.

TinyPNG is a popular service that compresses images while maintaining visual quality. Here’s how to use it:

  1. Visit TinyPNG.com
  2. Drag and drop your images onto the panda (up to 20 images at once and max 5MB per image)
  3. Wait for compression to complete (usually takes just seconds)
  4. Download your optimised images individually or as a ZIP file
  5. Check the savings – TinyPNG typically reduces file sizes by 50-80%

Ideally the images uploaded to WordPress would be <300kb, so if they are above that, more resizing and compression, needs to be done.

TinyPNG Pro Tips

  • Use the WordPress plugin “Compress JPEG & PNG images” to automatically optimise images as you upload them
  • Batch processing through the website is free for up to 20 images per month
  • For bulk needs, consider the paid API or desktop applications

WordPress-specific Image Optimisation Strategies

Beyond preparing images before upload, consider these WordPress-specific techniques:

Use WordPress’s Built-in Image Sizes

WordPress automatically creates multiple sizes of each uploaded image:

  • Thumbnail
  • Medium
  • Large
  • Full-size

Use the appropriate size for each placement rather than uploading the full-size image and scaling it down with HTML/CSS.

Enable Lazy Loading

Lazy loading delays loading images until they’re about to enter the viewport:

  • Many themes include this feature
  • WordPress 5.5+ includes native lazy loading
  • For older versions, use plugins like “Lazy Load by WP Rocket”

Consider Image Optimisation Plugins

Plugins that can further enhance image performance:

  • Smush
  • ShortPixel
  • Imagify
  • EWWW Image Optimizer

Responsive Images

Ensure your theme supports responsive images, which serve different image sizes based on the user’s device.

Pre-upload Checklist

Before uploading any image to WordPress, run through this quick checklist:

  1. Resize to the appropriate dimensions for its intended use
  2. Remove metadata (location data, camera info) if privacy is a concern
  3. Compress using TinyPNG or similar tool
  4. Rename the file with descriptive, SEO-friendly names (use hyphens between words)
  5. Add alt text after uploading (for accessibility and SEO)

Conclusion

Properly optimised images are vital for maintaining a fast, user-friendly, and SEO-effective WordPress website. By following these best practices for image dimensions, compression, and WordPress-specific optimisation techniques, you’ll ensure your site remains visually appealing without sacrificing performance.

Remember that a few extra minutes spent optimising images before uploading can save your visitors valuable loading time and contribute significantly to the overall success of your website.