Image Optimization

Images are an essential part of recipe posts and can have far-ranging impacts on user experience, site-speed, SEO and accessibility.

Jump to:

• Pre-upload optimization
• JPG
• Uploading
• Post-upload optimization
• CDNs
• Inserting images into posts
• Featured images
• Upscaling featured images
• Images in search results 101
• Text on images
• Missing image dimensions
• Help! My images are blurry
• Thumbnails
• Regenerate thumbnails
• Default thumbnail size
• Irregular thumbnail sizes
• Thumbnails on category pages
• Viewing registered thumbnails
• Reducing total thumbnails
• Naming images
• Captions
• Alt tags
• Image sizes
• WebP
• AVIF
• Native lazyloading
• Collages
• Old images
• Featured posts widget
• Pinterest
• Facebook
• Google
• Photography
• WordPress Big Images Threshold

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.

JPG

Featured images and in-post images of food must be JPG.

The only use case for PNG images are logos or graphics (not photography). There are known issues with how WordPress or lazyloading handles PNG files.

You can safely use JPGs in all cases and ignore PNGs completely.

We do not recommend or support WebP. AVIF is a superior format to WebP but is not widely supported and not recommended.

Uploading

Images should be uploaded directly to the media library, not the post itself. Then set the alt text directly in the media library.

This is because:

• setting alt text set in the media library then pulls that alt text into images that are inserted into posts
• uploading and setting alt text in a post does not copy that alt text to the media library

You need alt text on images in the media library in case those images are ever re-used in other posts, or by themes/plugins that display and link images.

NOTE: setting alt text in the library does not change any alt text in images that have already been inserted into posts - it only applies to images inserted after the alt text has been set.

Adding alt-text to the media library is a best practice - every image should have alt text - but will have no impact on images already in a post.

Post-upload optimization

We only recommend running either:

1. Shortpixel (Lossy setting)
2. Imagify

These are both paid plugins, but are relatively inexpensive.

Do not use Shortpixel Adaptive Images plugin - this is a CDN+WebP that causes major issues.

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 pre and post upload optimization.

CDNs

A CDN is a "content distribution network" that has valid benefits, including offloading bandwidth from your server and sometimes offering image optimization, when managed correctly.

Jetpack, Shortpixel, WP Rocket and Cloudflare offer image CDNs that you must not use.

Do not use a CDN, period.

These are extremely technically complex and create 10x more headaches than they solve.

There is simply no benefit to using a CDN prior to hitting 100,000 pageviews/month, at which point you hire a technical support team like nerdpress to manage it for you.

Inserting images into posts

NOTE: always upload images to the media library and set the alt text there, before inserting them into a post.

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".

Update April 2022 - as of version 6.9.0 of the Feast Plugin you can now default to inserting at "Full Size".

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

As of the Feast Plugin v.6.8.2, you can now preview the Featured Image on the "All Posts" screen in the admin, to make it easier to know which posts need updating:

How to enable:

Note: we recommend not updating posts that are ranking in the top 3 positions for their target keywords.

Tip: if your columns begin overlapping, you may need to remove some less useful columns (such as Tags, Author) in the "Screen Options":

Upscaling featured images

If you've previously uploaded featured images too small, or at the wrong ratios, and need to upscale them, you can:

1. download the original full-size image
2. scale the image up, setting the short side to 1200px, keeping ratios/proportions the same
3. crop the long side down to 1200px
   • the image should now be a 1200x1200 square
4. apply a contrast and saturation filter to bring up the quality

Here's a quick video showing how this is done using GIMP:

We don't recommend using a plugin or on-site tool to modify images in your media library due to potential issues with image metadata.

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, which display like this:

The posts featured image controls the regular Google Rich search result, which display like this:

In the example above, you'll notice the same sites happen to be in the recipe carousel and rich search result, but this is not always the case.

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.

While you don't have to use the same image for the recipe card and featured image, there's no reason to do this. Both images should be the same: the best, most enticing image for users in Google.

Also see this image optimization webinar from TopHatRank.

Text on images

Google does not like text on featured images - do not embed text on featured images. Apparently Facebook doesn't either.

You can see this in action be searching for any competitive recipe keyword and seeing that none of them have text on images. The only exception to this that we've seen is when there's not enough results (low competition) AND there text-on-image is the only image on the page (Google has no alternative to pick from).

This is probably because the computing power required to process text on images (called "OCR" or "optical character recognition") is simply far too expensive for Google. They have to read + filter text to ensure it isn't offensive/harassment/illegal.

When Google creates their thumbnails to display in search results, the cropping and scaling results in text that's completely illegible. That represents an accessibility liability to them when displaying the featured image in their search results.

Text on in-post images should generally be avoided unless there's a specific, compelling reason to do so. One exception to this, is when labeling the ingredients in the "ingredient" shot.

Pinterest images should not be embedded into the post - this is an outdated practice. Use a plugin such as Tasty Pins to force pinning of a hidden Pinterest-only image.

Watermarks are a question mark - they may or may not create accessibility issues but Google would still prefer to not have to OCR them. In general, we believe watermarking images is a wasted effort as there are free tools out there that will automatically remove watermarks from any image.

Missing image dimensions

The Feast Plugin registers all the information needed with WordPress image functions using the Modern Thumbnails, and relies on core WordPress functionality for image output. WordPress does not automatically add image dimensions in all cases.

WP Rocket is used to add missing image dimensions, per the setting recommended in the SEO for Food Bloggers post.

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, Shortpixel.AI).

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 themes+plugins have 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 in Admin > Settings > Media 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. This can save you money, and reduce the disk space needed to store unnecessary images.

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 completed, this will reduce the total number of thumbnails generated on new image uploads.

Regenerate thumbnails

WordPress automatically generates additional images ("thumbnails") when you upload a photo. Over time, as plugins and themes change, the thumbnails required may be changed - added or removed - but the original thumbnails aren't automatically purged, and new thumbnail sizes aren't automatically added.

To fix this, you need to use a plugin to regenerate thumbnails for older images:

• Regenerate Thumbnails plugin if using Imagify, or
• Regenerate Thumbnails Advanced plugin if using Shortpixel

You can choose to Regenerate only Featured Images in Regenerate Thumbnails Advanced if you only need to update your homepage + categories images:

Then check your homepage, category and posts to make sure the images are displaying consistent sizes.

Note: we don't recommend using "remove unregistered thumbnails" because this can break old images that were inserted at previously registered thumbnail sizes. This takes up more disk space, with the benefit of not needing to update every post you've ever written.

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

Default thumbnail size

Make sure to set the default "Featured Image" thumbnail size in the Feast Plugin to the correct size for mobile optimization:

• if using portrait (vertical) thumbnails: feast-portrait-3x4-360x480
• if using landscape (horizontal) thumbnails: feast-landscape-4x3-480x360
• if using square thumbnails: feast-square-1x1-360x360

The reason we use the 360px width thumbnails is because in all our tutorials and recommended setup, all post "featured images" will display at maximum 360px width.

Note that this only affects on-site display and has nothing to do with Google.

This is 50% the content width with on desktop, and 100% of the content width (screen size) on mobile.

This gets used on the:

• Modern Homepage
• Modern Categories
• Modern Search (to be released later in 2022)

Hyper optimization: If you're REALLY trying to optimize for pagespeed and you strictly use the one-fourth display for all your FSRI blocks, you can even select the 180px thumbnail. You must be displaying 4-posts-wide on desktop and 2-posts-wide on mobile, across the entire site for this to work.

Irregular thumbnail sizes

This can be caused by a few issues:

• featured images uploaded that are too small for the thumbnail size you're trying to display
  • How to 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)
  • How to fix: select a different thumbnail size to display
• Setting a "default featured image size" too large
  • see section above about using 360px wide thumbnail

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.

Thumbnails on category pages

We recommend enabling the Modern Categories, which use the default image size set in the Feast Plugin as well as an optimal layout for users, and enhanced search engine features.

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
• 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 are arbitrary and have no impact on the dimensions.

Note: thumbnails are a normal and necessary part of running an optimized food blog. The simple solution to "filling up disk space" or "having too many thumbnails" is to pay for more disk space. This costs a pittance (usually $10/month) compared to the cost to hire a developer ($100/hr+) to audit and manually optimize your image usage.

If you're at the point that this is becoming a concern, we recommend signing up for nerdpress for $359/month who can perform a comprehensive audit. If it's not worth paying them $4,308/year to manage your thumbnails (among other things), just pay your host for more storage.

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

If your older posts didn't do this properly, simply make sure that you fix it for new posts moving forward, and replace older images following the recipe update checklist.

Captions

Per the Google image SEO link above, captions are important to use and are displayed below the image. Using captions should be done carefully and only under the guidance of an SEO expert.

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 (the alt attribute 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.

Do not enable WebP anywhere.

Unless you're on BigScoots with the CloudFlare Tier 1 performance upgrade ($17/month).

AVIF

Do not enable AVIF images.

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.

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.