Kadence – Blog Post Image Sizes and Fixing Blurry Images

This guide will show you how to:

  • Adjust the featured image size and image ratio in the Customizer for the blog/archive/category pages and single posts
  • Change the image ratio and image size in the Kadence Posts Block inside the editor
  • Fix common issues with blurry images

Images on the Blog page and Archive/Category Pages

  1. From your WordPress dashboard, navigate to Appearance > Customize > Posts/Pages Layout
  2. Click Archive Layout
  3. Scroll down to the bottom to the Post Item Layout section
  4. Find Feature and open the settings
  5. Here you can adjust both the image ratio and image size
  • Adjust the Image Ratio (e.g., 1:1, 3:4, 2:3) to control the shape of the featured image.
  • Choose an Image Size (thumbnail, medium, large, full, etc.) to ensure images display at the correct resolution.

💡 Tip: Selecting the "Full" image size is not always the best choice– opt for an image size that balances quality and page load speed. If your images look mostly fine at a medium large size, use "medium large" over "full" to save a bit on page load time.

Featured Image Ratio on the Single Post Page

  1. From your WordPress dashboard, navigate to Appearance > Customize > Posts/Pages Layout
  2. Click Single Post Layout
  3. Scroll down until you find Featured Image Ratio

💡 Tip: Use "Inherit" to inherit the original ratio shape you uploaded the image at.

Image Ratio & Sizes for the Kadence Posts Block

If you're using a Kadence Posts block inside a page to display blog posts, you can customize how featured images appear in the block settings.

  1. Open the page where you have a Posts block.
  2. Click somewhere on the Kadence Posts Block to select it and the Block Settings Panel will appear on the right-hand side.
  3. Click the Style tab and then open Image Settings

Fixing Blurry Featured Images

If your images appear blurry, here are a few possible reasons and solutions:

WordPress is Serving a Lower Resolution Image

How to fix:

  • Check the selected image size in the Customizer or Posts block. If it's set to "Thumbnail" or "Medium," try increasing it to "Medium Large", "Full" or something in between. Refer to the guides above!

Image Compression is Reducing Quality

How to fix:

  • Avoid overly aggressive compression when uploading images, especially if you have an image optimization plugin that is optimizing the image even more after uploading.
  • If using an image optimization plugin, adjust the compression settings to balance quality and file size.

Image is Simply Too Small

How to fix:

  • Re-upload your images at a larger size

💡 Tip: Keep the size of the area that the image is going into in mind. If the image is only 600 pixels wide, but it's going to be placed and stretched into an area that is 800 pixels wide, then the image will appear blurry. In this case, you'd want to upload the image somewhere at or closer to 800px.