Image sizes used by our theme: Extra

extra-image-huge 1280×768
extra-image-single-post 1280×640
extra-image-medium 627×376
extra-image-small 440×264
extra-image-square-medium 440×440
extra-image-square-small 150×150

Examples of where these image sizes are used:

Claude 06 Feb 2026 response @ 10:43

Based on the Extra theme’s image size dimensions, here’s where each size is typically used:

extra-image-huge (1280×768) Used for featured images in prominent hero sections, full-width post headers, and large banner areas on category pages or the homepage. This size ensures high-quality display on desktop screens for your most visually important content.

extra-image-single-post (1280×640) The featured image displayed at the top of individual blog posts. The wider aspect ratio (2:1) creates a cinematic look that spans the content width while maintaining reasonable height.

extra-image-medium (627×376) Common in grid layouts showing multiple posts, such as the magazine-style homepage modules or category archive pages. This size works well for thumbnail grids where you’re showing 2-3 posts per row on desktop.

extra-image-small (440×264) Used in sidebar widgets, smaller post listings, related posts sections, and mobile views. Also appears in list-style layouts where posts are stacked vertically with smaller thumbnails.

extra-image-square-medium (440×440) Perfect for author profile images, Instagram-style gallery modules, or any design element requiring uniform square thumbnails. Extra’s modular builder might use this in specific column layouts.

extra-image-square-small (150×150) Typically used for author avatars, small profile pictures in bylines, comment avatars, or tiny thumbnails in compact widget areas like “recent posts” lists.

These sizes are automatically generated when you upload images, ensuring optimal performance and appearance across Extra’s various layout options.

Conversation with AI Claude on 05 Feb 2026

Q1 WordPress image dimensions by use case

WordPress says: “WordPress Image Dimensions WordPress recommends using specific optimized dimensions by use case:

e.g., hero banners around 1920×1080, post images about 1200×800, content images (inline) 800×600, thumbnails 150×150″

Provide examples of when I might use each of the dimensions above

14:39

Here are practical examples for when you’d use each dimension:

Hero banners (1920×1080)

  • Homepage main banner showcasing your business or latest promotion
  • Landing page headers for product launches or campaigns
  • Full-width sliders at the top of service pages
  • Portfolio showcase headers displaying featured work

Post images (1200×800)

  • Featured images that appear at the top of blog posts
  • Social media preview images when sharing articles
  • Archive page thumbnails (category or blog listing pages)
  • Newsletter header images

Content images inline (800×600) – This is what we need to use for our ride report photos

  • Photos within blog post text to illustrate specific points
  • Product images embedded in reviews or comparisons
  • Tutorial screenshots showing step-by-step processes
  • Before/after photos in the middle of case studies

Thumbnails (150×150)

  • Small profile pictures in author bios or comment sections
  • Product grid images on shop category pages
  • Related posts sections at the bottom of articles
  • Sidebar widgets showing recent posts
  • Team member photos in compact layouts

The key principle is that images get progressively smaller based on their prominence and the space they occupy. Hero banners command the most attention, while thumbnails serve as quick visual references in tight spaces.

Q2 How to stack gallery images on a phone

Thinking about images in wordpress gallery blocks within a Post, what is the most efficient way to ensure the images stack one on top of each other when viewed on mobile devices

14:42 – Reponse

The most efficient way to ensure WordPress gallery block images stack vertically on mobile is:

Add custom CSS (most efficient for mobile-only stacking) because the desktop can display multiple columns while mobile always stacks single-file. It’s a one-time setup that works across all your gallery blocks.

css — add it to: Appearance → Customize → Additional CSS NB We do not use this one because it’s only for phones. See below.

@media (max-width: 768px) {
    .wp-block-gallery {
        flex-direction: column !important;
    }
    .wp-block-gallery .wp-block-image {
        width: 100% !important;
        margin: 0 0 1em 0 !important;
    }
}

Q3 How to stack gallery images on a tablet eg iPad and phones

OK now is the above the same for tablets eg iPads and if not what is the revised CSS for that

14:44

Good question! Tablets like iPads sit in between mobile and desktop, so you’ll want to handle them separately.

Revised CSS for both mobile and tablet:

css — add it to: Appearance → Customize → Additional CSS – This is the CSS we use.

/* Tablets (iPads in portrait and landscape) */
@media (max-width: 1024px) and (min-width: 769px) {
    .wp-block-gallery {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .wp-block-gallery .wp-block-image {
        width: calc(50% - 0.5em) !important;
        margin: 0 0.5em 1em 0 !important;
    }
}

/* Mobile phones */
@media (max-width: 768px) {
    .wp-block-gallery {
        flex-direction: column !important;
    }
    .wp-block-gallery .wp-block-image {
        width: 100% !important;
        margin: 0 0 1em 0 !important;
    }
}

What this does:

  • Desktop (1025px+): Uses your original gallery columns setting (2, 3, or 4 columns)
  • Tablets (769-1024px): Forces 2 columns side-by-side
  • Mobile (768px and below): Stacks everything in a single column

Common breakpoints for reference:

  • Mobile: up to 768px
  • iPad Portrait: 768-834px
  • iPad Landscape: 1024-1112px
  • Desktop: 1025px+

If you want tablets to stack in single column too (like mobile), just change the tablet breakpoint to match the mobile CSS, or extend the mobile breakpoint to @media (max-width: 1024px).

Q4 Use of webp to optimize photos – for info only at the moment as we don’t use webp because some photos we get are not of good enough image quality and so become very blurred if optimised in this way.

When using wordpress what happens if I use webp images but the user’s browser can’t process them?

15:24

WordPress handles WebP fallbacks automatically in most cases:

Modern WordPress (5.8+)

  • WordPress natively supports WebP uploads and display
  • However, it doesn’t automatically create fallbacks to JPEG/PNG
  • If a browser can’t display WebP, the image simply won’t show or will appear broken

What happens in practice:

Browsers that support WebP (95%+ of users):

  • Chrome, Edge, Firefox, Safari 14+, Opera
  • Images display perfectly

Older browsers that don’t support WebP:

  • Old Safari versions (pre-14), IE11
  • The <img src="image.webp"> tag fails to render
  • User sees a broken image icon or blank space

How to ensure fallbacks work:

Option 1: Use a plugin (easiest) Plugins like WebP Express, ShortPixel, or Imagify automatically:

  • Serve WebP to compatible browsers
  • Serve JPEG/PNG to incompatible browsers
  • Handle detection server-side or with <picture> tags

Option 2: Manual HTML with <picture> element

html

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

Option 3: Server-side detection Configure your server (.htaccess for Apache) to serve WebP when supported, original format otherwise.

My recommendation: Use a dedicated WebP plugin. They handle the complexity automatically and ensure all users see images properly, while you get the performance benefits of WebP for modern browsers.

Q5 – SiteGround’s Speed Optimizer and webp fallback handling

Can The wordpress plugin Speed Optimizer handle the fallback?

15:27

Yes, SiteGround Speed Optimizer DOES handle WebP fallbacks automatically.

According to SiteGround’s documentation, when you enable WebP in the plugin:

How it works:

  1. The plugin converts your images to WebP format
  2. Creates WebP copies alongside your original files
  3. Automatically detects each visitor’s browser capability
  4. Serves WebP to modern browsers (Chrome, Firefox, Edge, Safari 14+, etc.)
  5. Serves the original JPEG/PNG to browsers that don’t support WebP

To enable it:

  1. Go to Speed Optimizer → Media Optimization in your WordPress dashboard
  2. Toggle on “Use WebP Images”
  3. Click “Bulk Generate WebP Files” to convert existing images
  4. New uploads will automatically get WebP versions created

Important notes:

  • WebP features are exclusive to SiteGround-hosted sites (won’t work if you’re hosted elsewhere)
  • The plugin keeps both versions (WebP + original), so images use a bit more disk space
  • Fallback is completely automatic – you don’t need to do anything
  • Typically saves 25-35% on file size compared to JPEG

So you’re all set – once you enable it, SiteGround’s infrastructure and the plugin handle everything, including the fallback for older browsers like Safari on older macOS versions.

Claude is AI and can make mistakes. Please double-check cited sources.