Post Images

This is an updated set of recommendations as of late 2019, for recent versions of the theme (4.2.0+):

• Foodie Pro Theme
• Brunch Pro Theme
• Cook'd Pro Theme
• Seasoned Pro Theme
• Cravings Pro Theme
• Feast Plugin

These are our recommendations and if you have no idea what you're doing, you should follow them. See: why am I making this change?

If you're a professional web designer and are happy spending hundreds of hours learning about responsive images and troubleshooting your own issues, feel free to use whatever settings you like. This enters customization territory and is not a part of the theme. See: What am I paying for?

Content width

The content width for all Feast themes is 720px on desktop, and 360px on mobile.

Mobile makes up approximately 80% of all pageviews, and is what search engines test your pagespeed on, so 360px is your #1 concern.

Our recommendation is to always use 100% width images in posts. This helps avoid unnecessary left/right alignment issues. It also helps display the post images at maximum resolution on mobile phones, which can be difficult to see for an aging population of baby boomers (accessibility).

If your current theme has a content width of 680px or 780px, you're running an outdated version and need to update your theme.

What about height?

Height doesn't matter for in-content images. Your content will adjust to flow with any image height.

For the sake of simplicity and reducing mental overhead, we recommend matching featured image settings and Google's requirements. This means one of 3 image ratios:

• 1x1 (720px x 720px)
• 4:3 (720px x 540px) (wide)
• 16:9 (720px x 405px) (wide)

For portrait, this would be:

• 3:4 (720px x 960px) (tall)

On mobile devices, huge, tall images require a ton of scrolling, which is annoying, and so we recommend using mostly square images in post content, such as for process shots.

The exception to this would be the "hero image" - finished product shot showing the finished recipe in all its glory.

What about pinterest images?

Modern Pinterest plugins allow the use of hidden pins, and overriding any attempt to pin arbitrary post images. We recommend using this.

We do not recommend posting your "pin it" image in the post.

Because this feature is controlled by a plugin and the requirements are always changing, you'll want to reach out to your Pinterest plugin (Social Pug, Tasty Pins) for support and guidelines.

What size should I upload image at?

We recommend uploading post images at 1200px. This provides some degree of adaptability for potential future changes in screen size.

Upon upload, WordPress automatically generates the smaller image sizes based on settings registered in the themes and plugins.

Then, when using the default WordPress image inserter, a srcset is provided for the image, which provides the visitor's browser with information about which size image it can choose to download and display.

Uploading large images does not slow down pagespeed unless you embed images manually.

Why shouldn't I upload larger (or maximum resolution) images?

Like all things with web design, there's a trade-off being made. You COULD upload a 3000x4000px image, but this would take up a ton of space on your host, filling up your disk space.

Remember: the most commonly loaded image width is going to be 360px width.

It would also slow down your server by forcing WordPress to compress and generate the smaller thumbnails. Plugins like Shortpixel would then drain server resources while compressing those images.

Finally, scaling huge images on the server-side causes a loss of quality. It's much better to scale down an image in a professional image editor (photoshop, lightroom, GIMP) then upload it. Web-based software simply doesn't work as well.

What about other screen sizes?

The two content widths (720px + 360px) accommodates the vast majority of popular screen sizes and devices.

There are still other screen sizes (eg. 320px) that are in use today, but make up such a smaller percentage of pageviews that it's not worth the effort to accommodate. Most analytics we've seen shows that less than 4% of pageviews are on a 320px device.

Following the 80/20 rule (pareto principle), getting the 20% of 20% of screensizes perfect would require 4 x 4 = 16 times the amount of work - in terms of development, maintenance, additional image thumbnails, hosting, kilobytes to download on each image for each pageload, etc.

Per above, every decision has a trade off, and we're trading off complete accuracy for simplicity - both ours, and yours. We could potentially accommodate every possible screen size, but the amount of additional sizes and coding requires to accommodate this would border on insanity.

It's this same reason that we're not implementing or supporting oversizes images in the block editor.

You have better things to do than worry about this. I have better things to do than worry about this. Your dog has better things to do than worry about this.

If you get to the point where it's important to accommodate all possibly variations, we recommend paying $10,000 (+) to get a custom theme done by a private developer.

Jetpack

We don't recommend or support the use of Jetpack for image compression or hosting.

If you're set on using Jetpack, you'll need to hire a personal developer to support your configuration.

Why do my images look different in the editor and live?

See: why images look different in edit post and live.

Upcoming:

In Rethinking the thumbnails, we looked at the factors affecting thumbnail requirements (search engines) and display (grid display, one-half, one-third, etc).