- Pre-upload optimization
- Post-upload optimization
- Help! My images are blurry
- Irregular thumbnail sizes
- Viewing registered thumbnails
- Reducing total thumbnails
- Naming images
- Alt tags
- Image sizes
- Native lazyloading
- Featured posts widget
- WordPress Big Images Threshold
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).
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.
We highly recommend running either Shortpixel (Lossy) or 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 claim to optimize images and don't do a good job include:
- SG Optimizer (Siteground)
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 Glossy for Shortpixel.
Note: images in the post editor sometimes appear worse than the front-end, only look at the images on the front-end.
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 also recommend you update the default WordPress thumbnails to:
- Thumbnail: 180x180
- Medium: 360x0
- Large: 720x0
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.
Once set, run the Regenerate Thumbnails plugin, then check your homepage, category and posts to make sure the images are displaying consistent sizes.
Note: we do not recommend or support the Regenerate Thumbnails Advanced plugin by Shortpixel.
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: 360x360
- Medium-Large: 720x720 (note: not editable normally)
- Large: 720x720
Properly naming images is critical for good SEO.
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 (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.
Featured images: 1200px x 1200px
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.
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.
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.
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 not enabling pinning on all images and 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:
Contact your Pinterest plugin provider for recommendations regarding Pinterest.
You can use Facebook's Best Practices for image guidelines.
Their minimum recommend size is 1080x1080, however we recommend complying with the 1200x1200 guidelines we have set for all Modern Thumbnails.
You can pre-cache a page by running it through the Facebook debugger tool.
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.
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.