General – WordPress

Setting Up Feature Images

Estimated reading: 5 minutes 79 views

Feature images are crucial for posts because they visually represent your content, making it more appealing and engaging to readers. Your images serve as a preview, grabbing attention and encouraging clicks, especially on social media and blog feeds. Feature images also improve the overall aesthetics of a site, enhance branding, and contribute to SEO by adding another layer of metadata for search engines to index, ultimately helping boost visibility and traffic.

All of our themes use featured images to display blog posts. For each blog post to appear in your categories, you must have a featured image set. Let’s get started:

Choosing the Correct Image

To avoid pixelation, use high-resolution images (at least 1200px wide) that are closely related to the content of your post. Feature images set at 1200px wide are now the go-to and are recommended by Google.

WordPress’s most commonly used image formats are JPEGs, PNG, Wepb, and AVIF.

  • JPEG is the standard go-to because bloggers rarely think beyond it. If you prefer this format, it should only be used for images in your posts, not for feature images.
  • PNG is best used for feature images, author images, etc. Because of its size, it needs to be optimized.
  • WebP is a modern image format that provides superior lossless and lossy compression for images on the web. It isn’t a perfect format, but can be used for images in your posts, not for feature images.
  • AVIF offers superior compression, achieves smaller file sizes while maintaining quality, and 100% outperforms JPEG, PNG, and WebP in compression efficiency. It is the perfect format, and we use it for all our settings, including feature images.

Plugins such as WP Smush or ShortPixel Image Optimizer can optimize your images. However, if your website uses AVIF images, you will not need to use an image optimization plugin. This is another plus to using AVIF because

Optimizing Images

If you are using PNG for your feature images, you will need to optimize them to reduce loading times; you can do this by using TinyPNG.

To convert JPEG, PNG, PDF images, and WebP into AVIF, we use AVIF Studio—Image Editor With AVIF Support. This is a Chrome Extension app with many design features, such as Background Remover, SVG Editor, Presentation Maker, Photo Collage Maker, and more. They also have a website AVIFStudio, pin to your menubar since you’ll be using it every day.

Why use AVIF? AVIF can reduce a PNG from 999KB to 30KB or less with no loss of quality. Therefore, it makes sense to use this format because it will reduce page loading times, especially if you have many images on your website, such as recipe and photography websites that are prone to a high volume of images.

The only drawback to using AVIF is it isn’t viewable on Windows 10 and some Windows 11. To fix this, go to Microsoft Store and search AV1 Video Extension. After downloading it, all your AVIF files should be viewable.

Setting Feature Images in WordPress

  • First, prepare your feature image.
  • Go to the post or page where you want to add the feature image.
  • Find the “Featured Image” section in the right-hand sidebar and click on it, it will take you to the media section.
  • Upload a new image or choose one from your media library.
  • Set the Alt Text or set after loading onto your post in the Alt text (alternative text) in the settings in the right-hand sidebar.
  • Click the “Set Featured Image” blue button.

NOTE: With Kadence, you can choose images from Pexels. We suggest choosing an image you like, then downloading it to your PC to resize it, and uploading it as an AVIF.

Changing Existing Feature Images

If a post already has a featured image set, the image will be prominently displayed in the post editor section in the right-hand sidebar. To change the image, simply hover over the existing image and click “Replace” using the steps mentioned above.

Lots Of Posts With No Feature Images

If your website has many posts without any Featured Images set, don’t worry! You don’t have to add them all manually.

To get started, use the Auto Post Thumbnail plugin; simply install and activate it. You can also download the plugin from Creative Motion. After activation, navigate to Settings > Auto Post Thumbnails and click on Generate Thumbnails. Do not leave the page until it reaches 100% completion.

This plugin will save you a lot of time. It effortlessly chooses the first image in each post and assigns it as the Featured Image. It could also bide you time should you want to change all your feature images.

NOTE: This plugin only works with images that are already in your WordPress media library.

Image SEO Best Practices

  • Use descriptive file names with keywords for your images, such as blogging-tips.avif instead of IMG_1234.avif.
  • Set the Alt Text; it helps search engines understand the image’s content and improves your page’s accessibility.
  • For a professional look, keep the size of your feature images at 1200x1200px.
  • Images for your posts should also be 1200px wide, but the length isn’t as strict as feature images.

It is also good practice to set up Feature Images on your pages as well, this can be done by following the same principles above.

NOTE: If some of these options are unavailable, you most likely do not have the Kadence Pro installed.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share this Doc

Setting Up Feature Images

Or copy link

CONTENTS

Join The Party For Fun Updates freebies & Big Discounts!

Add your name
Add your email

JoiN Glamsy Cloud! Free STUNNING Kadence Templates Included!

Start with 5 gorgeous Kadence blocks on us. Love them? Unlock ‘50 FREE FOREVER‘ that’s 50 more free blocks just for choosing any essential tool from our trusted fav stack!

Grab Your Free Templates

Terms Of Use FAQs

Payment FAQs

Order FAQs

Support FAQs

Popular Pre-Sales FAQs

Redesigning FAQs

Adding A Sticky Sidebar Using CSS

If you prefer using custom code to create a sticky sidebar, create or edit a pag

Scroll To Top Using Code Using CSS

First, add the button HTML somewhere on your webpage, ideally at the bottom of t

Choose Your Hosting

Like many people, we started our online journey with one of the big-name hosts—a

Start Here

Glamsy Designs is thrilled to introduce a new documentation system that makes ac

Frequently Asked Questions

Creating Sticky Sidebars Using CSS

We are covering three ways of creating sticky sidebars using Kadence, CSS code,

Chat Icon Close Icon
Review Your Cart
0
Add Coupon Code
Subtotal

 

Subscribe

×
Cancel