What is a Featured Image?

In WordPress a Featured Image (also called a Post Thumbnail) is a representative image for Posts, Pages or Custom Post Types (CPT’s). When you set a featured image you are creating an association between the Post, Page or CPT your are working on and your chosen image. Your theme may then use this association to display your featured image in various places as a representative image for your post.

Where does a featured image appear?

A featured image can appear anywhere depending on how your theme was developed. The most familiar place for a featured image to appear is on the home page, news pages, or in post search results. By default it also appears as the leading image in the content area for Pages and Posts, although many OlyWebDev themes have this disabled. We disable this so that you have more control over what appears on a Post or Page, i.e. the featured image may appear in the content if you want it to, but it isn’t mandatory.

What size are the featured images on my site?

WordPress will allow you to designate any image in the media library as a featured image regardless of file size or aspect ratio. However, your theme will dictate exactly what size and aspect ratio is rendered to your users. For example, you may have several posts appearing on your home page that are showing an excerpt of the post content along with a featured image. Your theme is dictating how large these images appear and what shape they are. They may be circular, rectangular, rectangular with rounded corners, or square. Most often in our themes we designate these to be square, but occasionally they may be rectangular.

Rendered Size vs Actual Size

The actual size of your featured image is the actual size in pixels of the original image you uploaded to your media library. For example it may be something like 800 x 500 pixels. The actual size of your image may never be displayed to a site visitor. To find out the actual size of your image simply click on the desired image from your media library and the dimensions will be displayed in the upper right hand side of the Attachment Details pop-up, shown circled in the image below. The rendered size of your featured image is the size that your featured image appears when it is being viewed by the public in the various places it is shown on your site. A rendered size may be something like 150 x 150 pixels, but this will depend on the your theme and on the size of the screen or window you are using to view your site.

featured-image-size

Can I change the Rendered Size of the featured image?

Without a developer you can’t change the rendered size of your featured images. This is because your rendered image sizes must be tightly controlled in order for your site to look good on the multitude of screen sizes that are currently in use. Theme code dictates what size every rendered image will be on every device size.

What file size and dimensions should I use for the featured image?

Technically you may use any size you like, but practically you will want to keep this size down to make uploading faster. There are not many situations where a featured image should be larger than 1200 pixels in width. The height dimension is not as important because web content is meant to be scrolled up and down. However, the width of the container holding your Post/Page content is often specifically coded into your theme. This container is rarely over 1200px wide therefore an image width of 1200px should be acceptable for most situations. File size will be dictated by image dimensions and image type. For example a 2500 x 2500 pixel image will have a significantly larger files size than a 500 x 500 pixel image (25 times larger!). Also some image file types are inherently smaller than others, like the jpeg. We recommend that you always use jpgs and if you are down-sizing jpgs before uploading them we recommend you save the new images at a compression ratio of 8.

Why is part of my image cropped badly?

You may attach an image of any aspect ratio to your Pages and Posts but the photo will be cropped to a new aspect ratio according to your theme specifics. In the majority of themes that we develop this crop will be made from center. This means that your WordPress system will reduce the image in size until it’s shortest side matches that of the container where it is to be displayed. Then it will crop out the overhanging edges of your image. Imagine you have uploaded a portrait style image (see example below) and the image is of a person standing up. The persons head is near the top of the frame and their feet are near the bottom. In this case your theme may crop off the top and bottom resulting in a headless, footless photo (first example photo). The solution to this situation is to make sure important elements of your image are not near the edge or edges being cropped. This can be accomplished by cropping your image inside of WordPress (second example photo) before you attach it to your Page or Post.

baseball-cropbaseball-crop2

 

What are some featured image best practices?

Probably the single best practice is to always review your post/page after creating it to ensure that the image looks right. If the image is not fitting correctly, try cropping your image within WordPress and re-attaching it to your Page or Post. Another best practice is to never use clip art or images with transparent backgrounds like PNG’s. Clip art and PNG’s often have a white or transparent background and this can disrupt the designed page aesthetic by not fully filling out the bounds of the rendered image container. Clip art may also have colors and lines that conflict with your site’s brand and style. An actual photographic image will rarely have this effect. Keep your uploaded image size down to between 1000 and 1200 pixels wide and always try to use jpgs. If you are resizing your jpgs, use compression setting number 8 for the best compromise between file size and image quality. If you make sure to follow a these best practices your site will remain attractive with your images properly fitting to their container bounds.