Image Optimization

Jump to:

• Pre-upload optimization
• Post-upload optimization
• Inserting images into posts
• Featured images
• Images in search results 101
• Help! My images are blurry
• Thumbnails
• Irregular thumbnail sizes
• Viewing registered thumbnails
• Reducing total thumbnails
• Naming images
• Captions
• Alt tags
• Image sizes
• WebP
• Native lazyloading
• Collages
• Old images
• Featured posts widget
• Pinterest
• Facebook
• Google
• Photography
• WordPress Big Images Threshold
• 💬 Comments

Pre-upload optimization

Images should be optimized before uploading using your normal photo editor. Our recommendation is to upload in-content images at 1200px width (height doesn't matter).

For featured images, use 1200x1200.

Lightroom is currently the most popular application, followed by Photoshop. GIMP is a free photo editing alternative.

The current best practice is to export at about 80% quality setting, aiming for a file size less than 250-kb.

Note: Do not use the any settings that "force" the output of a certain image file size.

Post-upload optimization

We highly recommend running either:

• Shortpixel (Lossy)
• Imagify

These are both paid plugins, but are relatively inexpensive.

Post-upload optimization is required for the thumbnail images that WordPress builds from the original file you upload. It can further reduce the thumbnail size by 20%-25%.

Other plugins that perform poorly relative to the above, and are not compatible with our setup, include:

• Smush
• SG Optimizer (Siteground)
• Jetpack

TinyPNG counts as pre-upload optimization, not post-upload optimization. You need both.

Inserting images into posts

When inserting an image that's been uploaded at 1200px (height doesn't matter), make sure to select "Full Size".

Do not set a %, if it has been set, hit "reset".

Once upon a time you had to select the appropriately sized image for pagespeed, but this is no longer the case, and you should insert at full size.

Featured images

Featured images should always be uploaded at 1200x1200 px (see "rethinking the featured image" link below). The cropping (square, vertical, horizontal) you decide to display on your site is based on the thumbnails that get generated from the featured image - not the featured image itself. See: how thumbnails work

thumbnails are generated from featured images, but don't need to match the featured image dimensions.

thumbnails are used on site

featured images are 100% for Google

Featured images are not designed to be used in posts - they're meant to be used for:

• Google search results
• Homepage
• Category pages

Any image you want to display in a post should be manually inserted into that post, below-the-fold.

An older version of Cook'd Pro (and other themes) used to automatically inserted featured images above a post - this was an incorrect thing to do.

See: rethinking the featured image

Images in search results 101

When setting your featured image and recipe card image, it's important to understand that these result in two different search results.

• the recipe card image controls the Google recipe carousel result
• the posts featured image controls the regular Google Rich search result

If your rich result or recipe carousel images aren't displaying properly, this is typically because your image isn't properly optimized (1200x1200, high quality, file named properly).

Note: for a few days after you publish your post, the correct image typically won't show up in the search results because of how Google processes data on the back end. Don't do anything. Wait 1-2 weeks for this to fix itself.

We recommend using the same 1200x1200 image for both the post featured image, and the recipe card.

Help! My images are blurry

90% of the time, this is because you're running two post-upload image optimizers, and the most common culprit is an external image host/CDN (eg. Jetpack).

This can sometimes happen because you've set the Shortpixel or Imagify settings too high. Try using a less aggressive setting to see if that helps.

We recommend Lossy for Shortpixel, and if necessary, downgrading to Glossy.

Note: images in the post editor sometimes appear worse than the front-end, only look at the images on the front-end.

Thumbnails

Thumbnail sizes are registered by themes and plugins, depending on their intended use.

Every time you upload an image to your server, WordPress automatically creates a new image size for each thumbnail your theme has registered.

You can view the currently registered image sizes by going to Admin > Tools > Regenerate Thumbnails (requires the Regenerate Thumbnails plugin).

We recommend enabling the Modern Thumbnails in the Feast Plugin and disabling theme thumbnails. This ensures that your images remain the same size when changing themes.

We also recommend you update the default WordPress thumbnails to:

• Thumbnail: 180x180
• Medium: 360x0
• Large: 720x0
• Medium-Large: 1200x0 (not accessible on media screen)

These settings will then match the Modern Thumbnails, reducing the number of images that get generated.

Note: a zero-height means images will always be resized to match the width - the Medium, Large and Medium-Large thumbnails that come with WordPress are soft crops. Setting both a width and height on soft crop thumbnails causes inconsistent sizing.

Once set, run the Regenerate Thumbnails plugin (if using Imagify) or Regenerate Thumbnails Advanced (if using Shortpixel), then check your homepage, category and posts to make sure the images are displaying consistent sizes.

You may also want to checkout our our how thumbnails work guide.

Irregular thumbnail sizes

This can be caused by a few issues:

• featured images that are too small for the thumbnail size you're trying to display
  • Fix: re-upload at 1200px x 1200px
• attempting to display thumbnails that no longer exist (eg. were removed during Regenerate Thumbnails, or a theme change)
  • Fix: select a different thumbnail size to display

If text is appearing next to the image on the homepage or category pages, you've selected a thumbnail size that's too small.

Select a larger thumbnail size.

Viewing registered thumbnails

You'll need the Regenerate Thumbnails plugin to do this.

Go to Admin > Tools > Regenerate Thumbnails

This page lists the thumbnails that are currently registered.

Reducing total thumbnails

Recipe cards are one source of thumbnail sizes:

• WP Recipe Make registers 3 total thumbnails
• Create registers 12 (?) thumbnails for some reason and is bloated in this sense
• Tasty Recipes registers no thumbnails (we're not sure how this works)

You can also update your WordPress image settings to "match" the Feast Plugin's Modern Thumbnails, which then automatically eliminates duplication:

• Thumbnail: 180x180
• Medium: 360x0
• Medium-Large: 1200x0 (note: not editable normally)
• Large: 720x0

Note: "large" is set to 720 because that's the one available in the post editor, medium-large is not. The names have no impact on the dimensions.

Naming images

Properly naming images is critical for good SEO.

• Google Image Best Practices for SEO
• Google image SEO
• Image SEO from Yoast

Best practices include:

• naming images after the content (recipe), with descriptive modifiers for each image (eg. finished, ingredients, preparation, cooking, oven, baked, cut, mixing, temperature, etc)
• using hyphens between words, not spaces or underscores

Captions

Per the Google image SEO link above, captions are important to use and are displayed below the image. We recommend using these.

The block editor uses a figcaption element that has only been styled in theme versions 4.4.0+. Update your theme for proper caption styling.

Alt tags

Alt tags (technically, alt attributes on an image tag) are required to comply with accessibility requirements. People are being sued over not having alt tags.

In the block editor, this is found in the right-hand block settings as Alt Text (Atlernative Text) when you've selected an image:

Alt tags are used only to describe the image contents to screen readers. They have no impact on SEO and should not be keyword stuffed.

See this document on image concepts from the w3c accessibility guidelines.

The exception to this rule is when images are for decorative purposes only, in which case the alt tag should be empty. If the images are part of the content (eg. process shots, finished recipe shots) then they require an alt tag.

Here's an alt text decision tree from w3c on how to decide what to put into the alt attribute.

Image sizes

Featured images: 1200px x 1200px (see why featured images must be 1200x1200)

In-content images: 1200px width - height does not matter

Do I need to re-upload everything at 1200px?

For in-content images, it's generally not necessary.

For featured images, your previous images may not comply with Google's current article schema or Google Insights requirements. So, unfortunately, the featured images should be updated.

Our recommendation is to update the images as you're regularly updating post content, not to go in and update a post just to change the image.

Update: this has been built into the Feast Plugin's Recipe Update Checklist.

You can use the Enable Media Replace plugin to replace images without editing a post.

WebP

Various tools provide optimization and serving webp images, along with Google Pagespeed Insights recommending it.

Currently, we recommend ignoring this entirely, and not enabling this anywhere. Do not use any webp settings, do not use any CDNs to serve webp images.

Testing Nerdpress has done has shown that the image file sizes are inconsistent - sometimes smaller, sometimes larger. It's also not supported by all browsers.

Furthermore, there's a different format that WordPress uses to output these, which we don't support.

WebP is an entirely immature format that inadequate support.

Do not enable WebP anywhere.

Native lazyloading

Chrome introduced "native lazyloading" in 2019 and it looks like Firefox will support this in 2020.

However, Safari currently does not. Further, WP Rocket's testing shows it's actually an inferior solution to their own, which has been in development for years.

Much like WebP images, native lazyloading is an immature solution and will probably not be viable until 2021 at the earliest.

The only lazyloading solution we recommend or support is through WP Rocket.

Collages

In generally, we recommend against the use of collages or grouping images together. This is because:

• it moves descriptive text further way from the associated image
• it creates an unnecessary burden on the blogger to annotate the image for screen readers
• it reduces the number of potential images and different keywords that a recipe can rank for, and be associated with

Here's a video demonstrating how to turn a poorly optimized 3-column block of images with disassociated text, into a more user-friendly, SEO-optimized format:

Here's the source from Google's image optimization guide:

Old images

If you've been running a food blog for a while, you'll have followed the older recommendations to upload images at the size they're inserted (680px, 720px).

You'll simply want to upload at 1200px width moving forward (1200x1200 for featured images).

If possible, replace the older images with the larger size as you're normally updating you posts, using the recipe update checklist. You can use the Enable Media Replace plugin to replace the previous files so that the images aren't lost or deindexed.

Unfortunately we can't offer guidance or specifics on using this plugin, and recommend hiring Casey at Mediawyse for site-specific recommendations.

Featured posts widget

The featured posts widget contains many accessibility issues, including duplicate links and using the post excerpt for image alt text. See: Modern homepage vs theme homepage.

We recommend upgrading to the Modern Homepage using the FSRI shortcode to resolve these issues.

Pinterest

We recommend not enabling pinning on all images, and instead, force pinning hidden pins. This can be done with:

• Tasty Pins
• Social Pug
• Shared Counts + Pinterest for Shared Counts

We have no recommendations for Pinterest image size, format or optimization settings, because they're constantly changing. See:

• Pinterest image formats
• Pinterest content tips

Contact your Pinterest plugin provider for recommendations regarding Pinterest.

Facebook

You can use Facebook's Best Practices for image guidelines.

Their requirements differ from Google's featured image requirements, but because Google is a higher traffic driver, we recommend adhering to Googles guidelines for the featured images.

Facebook will crop the featured image to fit into their requirements.

You can pre-cache a page by running it through the Facebook debugger tool.

Google

See the Google Images Best Practices guide.

We would also recommend viewing this Google presentation on image best practices for search.

Photography

Photography isn't our area of expertise, so we recommend outside providers. There's lots of courses out there - some paid, some free. Here's where we'd recommend starting:

• Brooke Larke's 90-minute food photography crash course
• Dani Meyer's 3 day food styling challenge
• Joanie Simon's The Bite Shot on Youtube
• Amanda's Food Photography 101

Important! See how thumbnails work and the "focus zone".

If you're interested in what professional photographers charge and the quality expectations, see this youtube video on professional food photography rates.

Pixsy is a service that seeks monetary compensation from unauthorized image use.

WordPress Big Images Threshold

WordPress introduced a feature in 5.3 that was automatically enabled, which automatically downsizes images larger than 2560 px (either dimension).

We recommend installing the Disable Big Images Threshold plugin to disable this feature.

Per the pre-upload optimizing section above, do not upload images wider than 1200px.