Themeisle Docs

Appearance

Hestia Recommended Image Sizes ​

There isn't an exact image size that would best fit because it depends on the layout of your website, but here are some image size recommendations:

  • slider: 1920px x 1080px
  • blog/shop header - 1200px x 300px
  • big title section image ( on mobile ) - 800px x 1200px
  • testimonials section - 150px x 150px

The image sizes above do not control post featured image cards on blog overview pages (blog index, category, tag, and other archive pages). For those templates, Hestia uses an internal generated thumbnail size (commonly hestia-blog).

Because this thumbnail can be displayed in a larger visual area (especially on larger layouts or high-density screens), featured images can look soft or blurry even if your original upload is high resolution.

⚠️ Important: Hestia PRO does not currently include a native Customizer control to change the archive/category featured image thumbnail size.

This usually means WordPress is serving a smaller generated image for the featured image card, and your browser is scaling it up to fit the layout.

You can fix this with either a no-code method or an advanced code-based method.

Option 1: Adjust Media sizes and regenerate thumbnails ​

  1. Open your WordPress media settings page (Settings > Media in WP Admin).
  2. Increase the dimensions you use for generated sizes (usually Medium and/or Large).
  3. Click Save Changes.
  4. Regenerate thumbnails for existing uploads with a thumbnail regeneration plugin, so older images get the updated generated sizes.
  5. Clear your site cache/CDN cache, then reload an archive/category page and confirm the featured images look sharper.

If you use a child theme or a snippets plugin, you can force Hestia archive/home views to request a larger featured image size:

php
add_filter( 'post_thumbnail_size', 'hestia_archive_featured_image_size', 20, 2 );

function hestia_archive_featured_image_size( $size, $post_id ) {
    if ( is_home() || is_archive() || is_category() || is_tag() ) {
        return 'large'; // Use 'large' first. Try 'full' only if needed for image quality.
    }

    return $size;
}

Performance and caching notes ​

  • Test large before trying full.
  • Use full only when needed, because larger files can slow down page loads.
  • Keep image optimization enabled so larger thumbnails remain compressed.
  • Clear caching layers ( plugin cache, server cache, CDN, and image optimization cache ) after changes.
  • Recheck both desktop and mobile archive layouts to confirm image quality and performance.