Feast Design Co.

WordPress Themes for Food & Lifestyle Bloggers

Image Optimization

Published: by · Modified: · This post may contain affiliate links

Print
Jump to:

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) 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:

  • Smush
  • SG Optimizer (Siteground)
  • Jetpack

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.

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

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

Naming images

Properly naming images is critical for good SEO.

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:

example of alt text being set in the WordPress block editor

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

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.

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

Facebook

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

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:

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.

Reader Interactions

Leave a Reply

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

Menu
Search
Homepage link×