{"id":47148,"date":"2020-04-04T04:34:00","date_gmt":"2020-04-04T08:34:00","guid":{"rendered":"https:\/\/feastdesignco.com\/?p=47148"},"modified":"2026-03-11T11:08:53","modified_gmt":"2026-03-11T15:08:53","slug":"image-optimization","status":"publish","type":"post","link":"https:\/\/feastdesignco.com\/image-optimization\/","title":{"rendered":"Image Optimization"},"content":{"rendered":"\n<p>Images are an essential part of recipe posts and can have far-ranging impacts on user experience, site-speed, SEO and accessibility.<\/p>\n\n\n[feast_advanced_jump_to]\n\n\n<h2 id=\"pre-upload-optimization\"   class=\"wp-block-heading\" >Pre-upload optimization<\/h2>\n\n\n\n<p>Images should be optimized before uploading using your normal photo editor. Our recommendation is to <a href=\"https:\/\/feastdesignco.com\/modern-post-image-sizes\/\">upload in-content images at 1200px width<\/a> (height doesn't matter).<\/p>\n\n\n\n<p>For <a href=\"https:\/\/feastdesignco.com\/modern-thumbnails\/\">featured images, use 1200x1200<\/a>.<\/p>\n\n\n\n<p>Lightroom is currently the most popular application, followed by Photoshop. GIMP is a free photo editing alternative.<\/p>\n\n\n\n<p>The current best practice is to export at about 80% quality setting, aiming for a file size less than 250-kb.<\/p>\n\n\n\n<p>Note: Do not use the any settings that \"force\" the output of a certain image file size.<\/p>\n\n\n\n<h2 id=\"jpg\"   class=\"wp-block-heading\" >JPG<\/h2>\n\n\n\n<p>Featured images and in-post images of food <strong>must be JPG<\/strong>.<\/p>\n\n\n\n<p>The <strong>only<\/strong> use case for PNG images are logos or graphics (not photography). There are known issues with how WordPress or lazyloading handles PNG files. <\/p>\n\n\n\n<p>You can <strong>safely<\/strong> <strong>use JPGs in all cases<\/strong> and ignore PNGs completely. <\/p>\n\n\n\n<p>We do not recommend or support <a href=\"https:\/\/feastdesignco.com\/webp\/\">WebP<\/a>. <a href=\"https:\/\/jakearchibald.com\/2020\/avif-has-landed\/\" target=\"_blank\" rel=\"noreferrer noopener\">AVIF<\/a> is a superior format to WebP but is not widely supported and not recommended.<\/p>\n\n\n\n<h2 id=\"uploading\"   class=\"wp-block-heading\" >Uploading<\/h2>\n\n\n\n<p>Images should be uploaded <strong>directly to the media library<\/strong>, not the post itself. Then set the alt text directly in the media library.<\/p>\n\n\n\n<p>This is because:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>setting alt text set in the media library then pulls that alt text into images that are inserted into posts<\/li>\n\n\n\n<li>uploading and setting alt text in a post <strong>does not copy that alt text to the media library<\/strong><\/li>\n<\/ul>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 id=\"alt-text\"   class=\"wp-block-heading\" >Alt text<\/h2>\n\n\n\n<p>Do use alt text.<\/p>\n\n\n\n<p>The Alt text (the <strong>alt attribute<\/strong> on an image tag) are required to comply with accessibility requirements. People have been sued over not having alt tags.<\/p>\n\n\n\n<p>In the block editor, this is found in the right-hand block settings as <strong>Alt Text (Atlernative Text)<\/strong> when you've selected an image:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"831\" height=\"492\" fetchpriority=\"high\" src=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/02\/image-2.png\" alt=\"the block editor interface that allows setting alt text on an image\" class=\"wp-image-104209\" srcset=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/02\/image-2.png 831w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/02\/image-2-360x213.png 360w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/02\/image-2-720x426.png 720w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/02\/image-2-180x107.png 180w\" sizes=\"(max-width: 831px) 100vw, 831px\" \/><\/figure>\n\n\n\n<p>Alt text is used <strong>only to describe the image contents to screen readers<\/strong>. They have no impact on SEO and should not be keyword stuffed.<\/p>\n\n\n\n<p>See this document on <a rel=\"noreferrer noopener\" aria-label=\"image concepts from the w3 accessibility guidelines (opens in a new tab)\" href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/\" target=\"_blank\">image concepts from the w3c accessibility guidelines<\/a>.<\/p>\n\n\n\n<p>The exception to this rule is when images are for <a aria-label=\"decorative purposes only (opens in a new tab)\" href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/decorative\/#image-with-adjacent-text-alternative\" target=\"_blank\" rel=\"noreferrer noopener\">decorative purposes only<\/a>, in which case the alt tag should be empty, which is the case for the <a href=\"https:\/\/feastdesignco.com\/fsri-block\/\">FSRI block<\/a> and a logo. If the images are part of the content (eg. process shots, finished recipe shots) then they require an alt tag.<\/p>\n\n\n\n<p>Here's an <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/decision-tree\/\">alt text decision tree from w3c<\/a> on how to decide what to put into the alt attribute.<\/p>\n\n\n\n<p>For your convenience, we've added the ability to see images missing alt text in the Media Library (list mode view) by enabling it in the Feast Plugin: <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"555\" height=\"164\" src=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/02\/image-1.png\" alt=\"\" class=\"wp-image-104201\" srcset=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/02\/image-1.png 555w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/02\/image-1-360x106.png 360w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/02\/image-1-180x53.png 180w\" sizes=\"auto, (max-width: 555px) 100vw, 555px\" \/><\/figure>\n<\/div>\n\n\n<center><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/P_kzn6PhryE\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen=\"\"><\/iframe><\/center>\n\n\n\n<div class=\"wp-block-group is-style-group-lightbulb\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>NOTE: <\/strong>setting alt text in the library <strong>does not change any alt text in images that have already been inserted into posts<\/strong> - it only applies to images inserted after the alt text has been set.<\/p>\n\n\n\n<p>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.<\/p>\n<\/div><\/div>\n\n\n\n<p>In order to find images in posts that are missing alt text, use the free <a href=\"https:\/\/wordpress.org\/plugins\/alt-text-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">alt text tools plugin from NerdPress<\/a>.<\/p>\n\n\n\n<h2 id=\"captions\"   class=\"wp-block-heading\" >Captions<\/h2>\n\n\n\n<p>Don't use captions. These provide no value in blog posts.<\/p>\n\n\n\n<h2 id=\"titles\"   class=\"wp-block-heading\" >Titles<\/h2>\n\n\n\n<p>Titles should be related to the post keyword.<\/p>\n\n\n\n<p>See <a href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/google-images#descriptive-alt-text%20descriptive-titles-captions-filenames\" target=\"_blank\" rel=\"noreferrer noopener\">this guide from Google<\/a> and <a href=\"https:\/\/yoast.com\/image-seo-alt-tag-and-title-tag-optimization\/\" target=\"_blank\" rel=\"noreferrer noopener\">this guide from Yoast<\/a>.<\/p>\n\n\n\n<h2 id=\"descriptions\"   class=\"wp-block-heading\" >Descriptions<\/h2>\n\n\n\n<p>Don't use descriptions. These provide no value in blog posts.<\/p>\n\n\n\n<h2 id=\"post-upload-optimization\"   class=\"wp-block-heading\" >Post-upload optimization<\/h2>\n\n\n\n<p>We only recommend running either:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Shortpixel (<strong>Lossy<\/strong> setting)  <\/li>\n\n\n\n<li>Imagify<\/li>\n<\/ol>\n\n\n\n<p>These are both paid plugins, but are relatively inexpensive.<\/p>\n\n\n\n<div class=\"wp-block-group is-style-group-asterisk\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>Do <strong>not<\/strong> use Shortpixel Adaptive Images plugin - this is a CDN+<a href=\"https:\/\/feastdesignco.com\/webp\/\">WebP<\/a> that causes major issues.<\/p>\n<\/div><\/div>\n\n\n\n<p>Post-upload optimization is <strong>required<\/strong> for the thumbnail images that WordPress builds from the original file you upload. It can further reduce the thumbnail size by 20%-25%.<\/p>\n\n\n\n<p>Other plugins that perform poorly relative to the above, and are not compatible with our setup, include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Smush<\/li>\n\n\n\n<li>SG Optimizer (Siteground)<\/li>\n\n\n\n<li>Jetpack<\/li>\n<\/ul>\n\n\n\n<p>TinyPNG counts as pre-upload optimization, not post-upload optimization. You need both pre and post upload optimization. <\/p>\n\n\n\n<h2 id=\"shortpixel\"   class=\"wp-block-heading\" >Shortpixel<\/h2>\n\n\n\n<p>For shortpixel, make sure that both \"Enable SmartCrop\" and \"Resize Large Images\" are <strong>OFF<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-group is-style-group-save\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>Note<\/strong>: Use the <strong>Admin &gt; Feast Plugin &gt; Setup<\/strong> page to automatically configure this for you.<\/p>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"762\" height=\"507\" src=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/03\/image-1.png\" alt=\"\" class=\"wp-image-105330\" srcset=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/03\/image-1.png 762w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/03\/image-1-360x240.png 360w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/03\/image-1-720x479.png 720w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/03\/image-1-180x120.png 180w\" sizes=\"auto, (max-width: 762px) 100vw, 762px\" \/><\/figure>\n\n\n\n<p>Also make sure that \"Next Generation Images\" are <strong>OFF<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"825\" height=\"269\" src=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/03\/image-2.png\" alt=\"\" class=\"wp-image-105332\" srcset=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/03\/image-2.png 825w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/03\/image-2-360x117.png 360w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/03\/image-2-720x235.png 720w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/03\/image-2-180x59.png 180w\" sizes=\"auto, (max-width: 825px) 100vw, 825px\" \/><\/figure>\n\n\n\n<h2 id=\"cdns\"   class=\"wp-block-heading\" >CDNs<\/h2>\n\n\n\n<p>A CDN is a \"content distribution network\" that has valid benefits, including offloading bandwidth from your server and sometimes offering image optimization, <em>when managed correctly<\/em>.<\/p>\n\n\n\n<p>Jetpack, Shortpixel, WP Rocket and Cloudflare offer image CDNs that <strong>you must not use<\/strong>.<\/p>\n\n\n\n<p><strong>Do not use a CDN, period<\/strong>. <\/p>\n\n\n\n<p>These are extremely technically complex and create 10x more headaches than they solve.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 id=\"inserting-images-into-posts\"   class=\"wp-block-heading\" >Inserting images into posts<\/h2>\n\n\n\n<div class=\"wp-block-group is-style-group-star\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>NOTE<\/strong>: always upload images to the media library and set the alt text there, before inserting them into a post.<\/p>\n<\/div><\/div>\n\n\n\n<p>When inserting an image that's been uploaded at 1200px (height doesn't matter), make sure to select \"<strong>Full Size<\/strong>\". <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"436\" height=\"372\" src=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2021\/02\/image-28.png\" alt=\"block image settings - full width image size and 100% width + height\" class=\"wp-image-65630\" style=\"width:327px;height:279px\" srcset=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2021\/02\/image-28.png 436w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2021\/02\/image-28-360x307.png 360w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2021\/02\/image-28-180x154.png 180w\" sizes=\"auto, (max-width: 436px) 100vw, 436px\" \/><\/figure>\n<\/div>\n\n\n<p><strong>Do not set a %<\/strong>, if it has been set, hit \"reset\".<\/p>\n\n\n\n<div class=\"wp-block-group is-style-group-asterisk\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p><strong>Major update in WordPress 6.3<\/strong>: they've renamed the \"Image Size\" field as \"Resolution\" and this should always be set to \"Full Size\". <strong>We recommend ignoring the \"Aspect Ratio\" and \"Width\"\/\"Height\" fields<\/strong>.<\/p>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"744\" height=\"726\" src=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/09\/image-9.png\" alt=\"\" class=\"wp-image-111036\" srcset=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/09\/image-9.png 744w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/09\/image-9-360x351.png 360w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/09\/image-9-720x703.png 720w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/09\/image-9-180x176.png 180w\" sizes=\"auto, (max-width: 744px) 100vw, 744px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>There are 3 things you want to make sure are done when inserting images:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>image alignment is set to \"center\"<\/strong> (because you don't want text wrapping around an image)<\/li>\n\n\n\n<li><strong>image size is set to \"full\"<\/strong> (because thumbnails cause long-term maintenance issues)<\/li>\n\n\n\n<li><strong>image link is \"none\"<\/strong> (because you shouldn't link images to themselves)<\/li>\n<\/ul>\n\n\n\n<p>With the <a href=\"\/feast-plugin\/\">Feast Plugin<\/a>, you can set these defaults: <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-feast-content-720px-wide is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"292\" src=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/03\/image-720x292.png\" alt=\"image settings found in the Feast Plugin\" class=\"wp-image-105209\" style=\"width:620px;height:auto\" srcset=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/03\/image-720x292.png 720w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/03\/image-360x146.png 360w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/03\/image-180x73.png 180w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/03\/image.png 1178w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-group is-style-group-lightbulb\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>Note<\/strong>: this doesn't affect images already inserted into posts, only images added to posts moving forward.<\/p>\n<\/div><\/div>\n\n\n\n<p>Once upon a time you had to select the appropriately sized image for pagespeed, <a href=\"https:\/\/feastdesignco.com\/image-file-size-uploads\/\">but this is no longer the case<\/a>, and you should <strong>insert at full size<\/strong>.<\/p>\n\n\n\n<h2 id=\"first-image-of-post\"   class=\"wp-block-heading\" >First image of post<\/h2>\n\n\n\n<p>The first image of the post skips being lazy loaded - this is a tradeoff between two pagespeed metrics and is generally best.<\/p>\n\n\n\n<p>However, that means that you want to make sure the first image is inserted <strong>not full size, against our recommendation above<\/strong>.<\/p>\n\n\n\n<p>To do this, set the image's resolution property to <strong>Feast Desktop Full-Width: 720px wide:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"596\" height=\"328\" src=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2025\/03\/feast-image-resolution.png\" alt=\"\" class=\"wp-image-124032\" srcset=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2025\/03\/feast-image-resolution.png 596w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2025\/03\/feast-image-resolution-360x198.png 360w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2025\/03\/feast-image-resolution-180x99.png 180w\" sizes=\"auto, (max-width: 596px) 100vw, 596px\" \/><\/figure>\n\n\n\n<h2 id=\"focal-point\"   class=\"wp-block-heading\" >Focal point<\/h2>\n\n\n\n<p>Do not use the \"Focal point\" feature in the block editor: <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"245\" height=\"304\" src=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/04\/image-52.png\" alt=\"\" class=\"wp-image-123378\" srcset=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/04\/image-52.png 245w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/04\/image-52-180x223.png 180w\" sizes=\"auto, (max-width: 245px) 100vw, 245px\" \/><\/figure>\n<\/div>\n\n\n<p>Always always always crop and optimize your images <strong>before you upload to your website<\/strong> and insert it without changes.<\/p>\n\n\n\n<h2 id=\"featured-images\"   class=\"wp-block-heading\" >Featured images<\/h2>\n\n\n\n<p>Featured images should <strong>always be uploaded at 1200px width<\/strong> (see \"rethinking the featured image\" link below). This can be either:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1200x1200 or<\/li>\n\n\n\n<li>1200x1800 (native 2:3 camera ratio)\n<ul class=\"wp-block-list\">\n<li>Note that 1200x1800 <strong>does not comply with Google schema requirements and is not recommended<\/strong> - see below<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>The thumbnail image you decide to display <em>on your site<\/em>  (square, vertical, horizontal) is based on the <em>thumbnails<\/em> that get generated from the featured image - not the featured image itself. <\/p>\n\n\n\n<p>See the <a href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/structured-data\/article#article-types\" target=\"_blank\" rel=\"noreferrer noopener\">Google Article Schema requirements for articles<\/a>.<\/p>\n\n\n\n<p>See <a href=\"https:\/\/feastdesignco.com\/how-thumbnails-work\/\">how thumbnails work<\/a> to learn how thumbnails are cropped from the featured image.<\/p>\n\n\n\n<div class=\"wp-block-group is-style-group-question\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>thumbnails are <strong>generated from<\/strong> featured images, but don't need to match the featured image dimensions.<\/p>\n\n\n\n<p>thumbnails are displayed on your site.<\/p>\n\n\n\n<p>featured images are 100% for Google.<\/p>\n<\/div><\/div>\n\n\n\n<p>Featured images are <strong>not<\/strong> designed to be used in posts - they're meant to be used for: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Google search results<\/li>\n\n\n\n<li>Homepage<\/li>\n\n\n\n<li>Category pages<\/li>\n<\/ul>\n\n\n\n<p>Any image you want to display in a post <strong>should be manually inserted into that post<\/strong>, below-the-fold.<\/p>\n\n\n\n<p>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 and no longer supported.<\/p>\n\n\n\n<p>See: <a href=\"https:\/\/feastdesignco.com\/rethinking-the-featured-image\/\">rethinking the featured image<\/a><\/p>\n\n\n\n<h2 id=\"view-featured-image-in-admin\"   class=\"wp-block-heading\" >View featured image in admin<\/h2>\n\n\n\n<p>With the <a href=\"\/feast-plugin\/\">Feast Plugin<\/a> you can preview the Featured Image on the \"All Posts\" screen in the admin, to make it easier to know which posts need updating:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"583\" height=\"653\" src=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2022\/04\/image-2.png\" alt=\"featured images being displayed on the &quot;all posts&quot; admin screen\" class=\"wp-image-88065\" srcset=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2022\/04\/image-2.png 583w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2022\/04\/image-2-360x403.png 360w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2022\/04\/image-2-180x202.png 180w\" sizes=\"auto, (max-width: 583px) 100vw, 583px\" \/><\/figure>\n<\/div>\n\n\n<p>How to enable: <\/p>\n\n\n\n<center><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/l6ZiYiehrNA\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe><\/center>\n\n\n\n<p>If the columns become cluttered you can modify them: <\/p>\n\n\n\n<center><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/5P4Mzo3vHWs\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/center>\n\n\n\n<p><strong>Note<\/strong>: we recommend not updating posts that are ranking in the top 3 positions for their target keywords.<\/p>\n\n\n\n<p><strong>Tip:<\/strong> if your columns begin overlapping, you may need to remove some less useful columns (such as Tags, Author) in the \"Screen Options\": <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"661\" height=\"292\" src=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2022\/04\/image.png\" alt=\"screenshot of columns that can be disabled via the screen options\" class=\"wp-image-88059\" srcset=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2022\/04\/image.png 661w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2022\/04\/image-360x159.png 360w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2022\/04\/image-180x80.png 180w\" sizes=\"auto, (max-width: 661px) 100vw, 661px\" \/><\/figure>\n<\/div>\n\n\n<h2 id=\"set-featured-image-via-post-image\"   class=\"wp-block-heading\" >Set featured image via post image<\/h2>\n\n\n\n<p>WordPress 6.8 introduced a feature to allow setting a featured by selecting one of your post images. This is a poorly designed feature and will cause more harm than good.<\/p>\n\n\n\n<p><strong>DO NOT DO THIS.<\/strong><\/p>\n\n\n\n<p>As we outline above, Google's requirements for featured images are that they are 1x1, 4x3 or 16x9. The majority of images in posts are 2x3, which is not an accepted ratio for featured images.<\/p>\n\n\n\n<p>Featured images must be carefully exported at the correct resolution. Do not ever use automatic WordPress features to crop, set or resize images, because WordPress fails to properly account for the necessary requirements. <\/p>\n\n\n\n<h2 id=\"text-on-featured-images\"   class=\"wp-block-heading\" >Text on featured images<\/h2>\n\n\n\n<p>Never put text on featured images, period.<\/p>\n\n\n\n<p>Search engines strongly avoid displaying images that contain text, except on the lowest competition queries.<\/p>\n\n\n\n<h2 id=\"upscaling-featured-images\"   class=\"wp-block-heading\" >Upscaling featured images<\/h2>\n\n\n\n<p>If you've previously uploaded featured images too small, or at the wrong ratios, and need to upscale them, you can:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>download the original full-size image<\/li>\n\n\n\n<li>scale the image up, setting the short side to 1200px, keeping ratios\/proportions the same<\/li>\n\n\n\n<li>crop the long side down to 1200px\n<ul class=\"wp-block-list\">\n<li>the image should now be a 1200x1200 square<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>apply a contrast and saturation filter to bring up the quality<\/li>\n<\/ol>\n\n\n\n<p>Here's a quick video showing how this is done using GIMP: <\/p>\n\n\n\n<center><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/dKoZDB85IAU\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe><\/center>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 id=\"editing-images-in-wordpress\"   class=\"wp-block-heading\" >Editing images in WordPress<\/h2>\n\n\n\n<p>WordPress comes with some very basic and frankly poorly developed image editing features. These image edits end up with different image names, meta data and quality issues that make maintenance much more difficult.<\/p>\n\n\n\n<p><strong>Do not ever edit images in WordPress.<\/strong> <\/p>\n\n\n\n<p>Always upload pre-edited images to WordPress.<\/p>\n\n\n\n<h2 id=\"lightbox\"   class=\"wp-block-heading\" >Lightbox<\/h2>\n\n\n\n<p>A light box is a feature that typically leverages javascript to show an enlarged version of a photo, with accompanying images.<\/p>\n\n\n\n<p><strong>We don't support, and actively recommend against, all lightbox features.<\/strong><\/p>\n\n\n\n<p>This is because: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>javascript slows pagespeed<\/li>\n\n\n\n<li>javascript can break if other javascript on the page breaks (VERY COMMON with ads)<\/li>\n\n\n\n<li>80% of pageviews are mobile, which display images at full screen width already<\/li>\n<\/ul>\n\n\n\n<p>Using a lightbox means that you're slowing pagespeed, introducing potential breakage, and is completely irrelevant to 80% of pageviews.<\/p>\n\n\n\n<h2 id=\"wordpress-gallery-block\"   class=\"wp-block-heading\" >WordPress gallery block<\/h2>\n\n\n\n<p>The WordPress gallery block introduced a lightbox feature called \"Expand to Click\" in WordPress 6.8, which we <strong>strongly recommend against and do not support<\/strong> due to the reasons outlined above.<\/p>\n\n\n\n<p>In general, gallery blocks should be avoided in favor of column blocks as outlined in the <a href=\"https:\/\/feastdesignco.com\/process-shots\/\">process shots tutorial<\/a>.<\/p>\n\n\n\n<h2 id=\"images-in-search-results-101\"   class=\"wp-block-heading\" >Images in search results 101<\/h2>\n\n\n\n<p>When setting your featured image and recipe card image, it's important to understand that <strong>these result in two different search results<\/strong>.<\/p>\n\n\n\n<p>The <strong>recipe card<\/strong> <strong>image<\/strong> controls the <strong>Google recipe carousel <\/strong>result, which display like this: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"414\" src=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2021\/12\/image-720x414.png\" alt=\"\" class=\"wp-image-81255\" srcset=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2021\/12\/image-720x414.png 720w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2021\/12\/image-360x207.png 360w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2021\/12\/image-180x103.png 180w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2021\/12\/image.png 1364w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/figure>\n\n\n\n<p>The <strong>post featured image<\/strong> controls the <strong>regular Google Rich search result<\/strong><meta charset=\"utf-8\">, which display like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"492\" src=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2021\/12\/image-1-720x492.png\" alt=\"\" class=\"wp-image-81256\" srcset=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2021\/12\/image-1-720x492.png 720w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2021\/12\/image-1-360x246.png 360w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2021\/12\/image-1-180x123.png 180w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2021\/12\/image-1.png 1364w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/figure>\n\n\n\n<p>In the example above, you'll notice the same sites <strong>happen<\/strong> to be in the recipe carousel and rich search result, but this is not always the case.<\/p>\n\n\n\n<p>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).<\/p>\n\n\n\n<div class=\"wp-block-group is-style-group-asterisk\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>If your featured image isn't showing up in Google, this is a known issue with Google. They have publicly stated repeatedly that this is working as they intend, and that it is a content quality issue. There are no known fixes for this and it is not a theme or Yoast issue. Google has simply decided that it's not worth displaying your featured image and there's nothing you can do about it, which is dumb.<\/p>\n<\/div><\/div>\n\n\n\n<p><strong>Note<\/strong>: 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. <strong>Don't do anything<\/strong>. Wait 1-2 weeks for this to fix itself.<\/p>\n\n\n\n<div class=\"wp-block-group is-style-group-lightbulb\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-black-color has-text-color\" style=\"font-size:24px\">We recommend using the <strong>same 1200x1200<\/strong> image for both the post featured image, and the recipe card.<\/p>\n<\/div><\/div>\n\n\n\n<p>While you don't <strong>have to<\/strong> 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.<\/p>\n\n\n\n<p>Also see this <a href=\"https:\/\/tophatrank.com\/blog\/seo-for-publishers-episode-3-image-optimization\/\" target=\"_blank\" rel=\"noreferrer noopener\">image optimization webinar from TopHatRank<\/a>.<\/p>\n\n\n\n<h2 id=\"text-on-images\"   class=\"wp-block-heading\">Text on images<\/h2>\n\n\n\n<p>Google does not like text on featured images - <strong>do not embed text on featured images<\/strong>. Apparently Facebook doesn't either.<\/p>\n\n\n\n<p>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).<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Text on <strong>in-post images should generally be avoided<\/strong> unless there's a specific, compelling reason to do so. One exception to this, is when labeling the ingredients in the \"ingredient\" shot.<\/p>\n\n\n\n<p><strong>Pinterest images should not be embedded into the post<\/strong> - this is an outdated practice. Use a plugin such as <a href=\"https:\/\/en-ca.wordpress.org\/plugins\/social-pug\/\" target=\"_blank\" rel=\"noreferrer noopener\">Hubbub<\/a> to force pinning of a hidden Pinterest-only image.<\/p>\n\n\n\n<div class=\"wp-block-group is-style-group-question\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>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.<\/p>\n<\/div><\/div>\n\n\n\n<h2 id=\"missing-image-dimensions\"   class=\"wp-block-heading\" >Missing image dimensions<\/h2>\n\n\n\n<p>The Feast Plugin registers all the information needed with WordPress image functions using the <a href=\"https:\/\/feastdesignco.com\/modern-thumbnails\/\">Modern Thumbnails<\/a>, and relies on core WordPress functionality for image output. WordPress does not automatically add image dimensions in all cases.<\/p>\n\n\n\n<p>WP Rocket is used to add missing image dimensions, per the setting recommended in the <a href=\"https:\/\/feastdesignco.com\/seo-for-food-bloggers\/#wp-rocket-plugin\">SEO for Food Bloggers post<\/a>.<\/p>\n\n\n\n<h2 id=\"help-my-images-are-blurry\"   class=\"wp-block-heading\" >Help! My images are blurry<\/h2>\n\n\n\n<p>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).<\/p>\n\n\n\n<p>This can sometimes happen because you've set the Shortpixel or Imagify settings too high. Try using a <a rel=\"noreferrer noopener\" aria-label=\"less aggressive setting (opens in a new tab)\" href=\"https:\/\/help.shortpixel.com\/article\/11-lossy-glossy-or-lossless-which-one-is-the-best-for-me\" target=\"_blank\">less aggressive setting<\/a> to see if that helps.<\/p>\n\n\n\n<p>We recommend <strong>Lossy<\/strong> for Shortpixel, and if necessary, downgrading to Glossy.<\/p>\n\n\n\n<p>Note: images in the post editor sometimes appear worse than the front-end, only look at the images on the front-end.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CMYK to RGB should not be enabled as we have no idea what impact this has and could be a root cause<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Overcompressed (eg. smaller) images won't display as well as uncompressed (larger) images - this comes at the expense of pagespeed.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can choose fast, or you can choose high quality, but you can't have both fully optimized. It's your choice to make.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group is-style-group-lightbulb\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>If you want higher quality images you should set the default image size in the Feast Plugin to 720x960 instead of 360x480&nbsp;<strong>but this will cause your pagespeed to drop<\/strong>. That's the tradeoff you need to decide on.<\/p>\n<\/div><\/div>\n\n\n\n<h2 id=\"thumbnails\"   class=\"wp-block-heading\" >Thumbnails<\/h2>\n\n\n\n<p>Thumbnail sizes are registered by themes and plugins, depending on their intended use.<\/p>\n\n\n\n<p>Every time you upload an image to your server, WordPress automatically creates a new image size for each thumbnail your themes+plugins have registered. <\/p>\n\n\n\n<p>You can view the currently registered image sizes by going to <strong>Admin &gt; Tools &gt; Regenerate Thumbnails<\/strong> (requires the Regenerate Thumbnails plugin).<\/p>\n\n\n\n<p>We recommend enabling the <a href=\"https:\/\/feastdesignco.com\/modern-thumbnails\/\">Modern Thumbnails<\/a> in the Feast Plugin and <a href=\"https:\/\/feastdesignco.com\/modern-thumbnails\/#best-practice-remove-theme-thumbnails\">disabling theme thumbnails<\/a>. This ensures that your images remain the same size when changing themes.<\/p>\n\n\n\n<p>We also recommend you update the default WordPress thumbnails in <strong>Admin &gt; Settings &gt; Media<\/strong> to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Thumbnail: 180x180<\/li>\n\n\n\n<li>Medium: 360x0<\/li>\n\n\n\n<li>Large: 720x0<\/li>\n\n\n\n<li>Medium-Large: 1200x0 (not accessible on media screen)<\/li>\n<\/ul>\n\n\n\n<p>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.<\/p>\n\n\n\n<div class=\"wp-block-group is-style-group-asterisk\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>Note<\/strong>: a zero-height means images will <strong>always be resized to match the width<\/strong> - the Medium, Large and Medium-Large thumbnails that come with WordPress are <strong>soft crops<\/strong>. <\/p>\n\n\n\n<p>Setting both a width and height on soft crop thumbnails causes inconsistent sizing.<\/p>\n<\/div><\/div>\n\n\n\n<p>Once completed, this will reduce the total number of thumbnails generated on new image uploads. <\/p>\n\n\n\n<h2 id=\"regenerate-thumbnails\"   class=\"wp-block-heading\" >Regenerate thumbnails<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>To fix this, you need to use a plugin to regenerate thumbnails for older images: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/en-ca.wordpress.org\/plugins\/regenerate-thumbnails\/\" target=\"_blank\" rel=\"noreferrer noopener\">Regenerate Thumbnails plugin<\/a> if using Imagify, or <\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/regenerate-thumbnails-advanced\/\">Regenerate Thumbnails Advanced plugin<\/a> if using Shortpixel (recommended)<\/li>\n<\/ul>\n\n\n\n<p>You can choose to <strong>Regenerate only Featured Images<\/strong> in Regenerate Thumbnails Advanced if you only need to update your homepage + categories images: <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"604\" height=\"438\" src=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2021\/11\/image-1.png\" alt=\"\" class=\"wp-image-79994\" srcset=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2021\/11\/image-1.png 604w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2021\/11\/image-1-360x261.png 360w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2021\/11\/image-1-180x131.png 180w\" sizes=\"auto, (max-width: 604px) 100vw, 604px\" \/><\/figure>\n<\/div>\n\n\n<p>Make sure you DO \"redo existing\" and \"SAVE SETTINGS\". <\/p>\n\n\n\n<p>Then check your homepage, category and posts to make sure the images are displaying consistent sizes.<\/p>\n\n\n\n<div class=\"wp-block-group is-style-group-star\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>Note:<\/strong> 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.<\/p>\n<\/div><\/div>\n\n\n\n<p>If you've accidentally deleted previous thumbnails and your images aren't showing, you'll need to edit your post, click the image that isn't showing, and change the \"Image Size\" from \"Thumbnail\" to \"<strong>Full Size<\/strong>\": <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"301\" height=\"194\" src=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/04\/change-post-image-thumbnail.png\" alt=\"wordpress interface to change image size\" class=\"wp-image-106543\" srcset=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/04\/change-post-image-thumbnail.png 301w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2023\/04\/change-post-image-thumbnail-180x116.png 180w\" sizes=\"auto, (max-width: 301px) 100vw, 301px\" \/><\/figure>\n<\/div>\n\n\n<p>You may also want to checkout our our <a href=\"https:\/\/feastdesignco.com\/how-thumbnails-work\/\">how thumbnails work guide<\/a>.<\/p>\n\n\n\n<h2 id=\"default-thumbnail-size\"   class=\"wp-block-heading\">Default thumbnail size<\/h2>\n\n\n\n<p>Make sure to set the default \"Featured Image\" thumbnail size in <strong>Admin &gt; Feast Plugin &gt; Images<\/strong> to the correct size for mobile optimization:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"976\" height=\"432\" src=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/04\/image-48.png\" alt=\"\" class=\"wp-image-122479\" srcset=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/04\/image-48.png 976w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/04\/image-48-360x159.png 360w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/04\/image-48-720x319.png 720w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/04\/image-48-180x80.png 180w\" sizes=\"auto, (max-width: 976px) 100vw, 976px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>if using <strong>portrait<\/strong> (vertical) thumbnails: <strong>feast-portrait-2x3-360x540<\/strong><\/li>\n\n\n\n<li>if using <strong>landscape<\/strong> (horizontal) thumbnails: <strong>feast-landscape-4x3-480x360<\/strong><\/li>\n\n\n\n<li>if using <strong>square<\/strong> thumbnails: <strong>feast-square-1x1-360x360<\/strong><\/li>\n<\/ul>\n\n\n\n<p>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. <\/p>\n\n\n\n<div class=\"wp-block-group is-style-group-lightbulb\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>Note that this <strong>only affects on-site display<\/strong> and has nothing to do with Google.<\/p>\n<\/div><\/div>\n\n\n\n<p>This is 50% the content width with on desktop, and 100% of the content width (screen size) on mobile.<\/p>\n\n\n\n<p>This gets used on the: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"\/modern-homepage\/\">Modern Homepage<\/a><\/li>\n\n\n\n<li><a href=\"\/modern-categories\/\">Modern Categories<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/feastdesignco.com\/modern-404\/\">Modern Search \/ Modern 404<\/a><\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group is-style-group-asterisk\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>Hyper optimization<\/strong>: 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 <strong>must<\/strong> be displaying 4-posts-wide on desktop and 2-posts-wide on mobile, <strong>across the entire site<\/strong> for this to work.<\/p>\n<\/div><\/div>\n\n\n\n<h2 id=\"force-thumbnail-ratios\"   class=\"wp-block-heading\" >Force thumbnail ratios<\/h2>\n\n\n\n<p>This setting forces images to display at the specified 1:1, 2:3, 3:4 or 4:3 ratios in the FSRI block, and on category pages. This helps to ensure that images are consistently sized to avoid irregular white spaces, and irregular thumbnail sizes.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"914\" height=\"304\" src=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/04\/image-50.png\" alt=\"\" class=\"wp-image-122481\" srcset=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/04\/image-50.png 914w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/04\/image-50-360x120.png 360w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/04\/image-50-720x239.png 720w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/04\/image-50-180x60.png 180w\" sizes=\"auto, (max-width: 914px) 100vw, 914px\" \/><\/figure>\n<\/div>\n\n\n<p>This serves more as a temporary band-aid, and best practices for featured images should still be followed.<\/p>\n\n\n\n<h2 id=\"default-featured-image-size\"   class=\"wp-block-heading\" >Default featured image size<\/h2>\n\n\n\n<p>The image size used by the <a href=\"https:\/\/feastdesignco.com\/fsri-block\/\">FSRI block<\/a> (and category pages, Modern Sidebar and Modern Previous + Next) uses the&nbsp;<strong>Default featured image size<\/strong>&nbsp;defined in your Feast Plugin settings under the \"Images\" section:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2024\" height=\"642\" src=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/04\/image-51.png\" alt=\"\" class=\"wp-image-123132\" srcset=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/04\/image-51.png 2024w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/04\/image-51-360x114.png 360w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/04\/image-51-720x228.png 720w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/04\/image-51-1536x487.png 1536w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/04\/image-51-180x57.png 180w\" sizes=\"auto, (max-width: 2024px) 100vw, 2024px\" \/><\/figure>\n\n\n\n<p>It's important to have this properly set.<\/p>\n\n\n\n<h2 id=\"irregular-thumbnail-sizes\"   class=\"wp-block-heading\" >Irregular thumbnail sizes<\/h2>\n\n\n\n<p>This can be caused by a few issues:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>featured images uploaded that are too small for the thumbnail size you're trying to display\n<ul class=\"wp-block-list\">\n<li><strong>How to fix<\/strong>: re-upload at 1200px x 1200px<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>attempting to display thumbnails that no longer exist (eg. were removed during Regenerate Thumbnails, or a theme change)\n<ul class=\"wp-block-list\">\n<li><strong>How to fix<\/strong>: select a different thumbnail size to display<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Setting a \"default featured image size\" too large\n<ul class=\"wp-block-list\">\n<li>see section above about using 360px wide thumbnail<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Need to regenerate thumbnails\n<ul class=\"wp-block-list\">\n<li><strong>How to fix:<\/strong> See regenerate thumbnails below<\/li>\n\n\n\n<li>You can also enable the <strong>Force Thumbnail Ratio<\/strong> feature in the Feast Plugin (see above)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>If text is appearing next to the image on the homepage or category pages, you've selected a thumbnail size that's too small. To fix this, select a larger default thumbnail size.<\/p>\n\n\n\n<h2 id=\"thumbnails-on-category-pages\"   class=\"wp-block-heading\">Thumbnails on category pages<\/h2>\n\n\n\n<p>We recommend enabling the <a href=\"\/modern-categories\/\">Modern Categories<\/a>, which use the default image size set in the Feast Plugin as well as an optimal layout for users, and enhanced search engine features.<\/p>\n\n\n\n<p>This creates a consistent, site-wide experience that's better for branding.<\/p>\n\n\n\n<h2 id=\"viewing-registered-thumbnails\"   class=\"wp-block-heading\" >Viewing registered thumbnails<\/h2>\n\n\n\n<p>You'll need the Regenerate Thumbnails plugin to do this.<\/p>\n\n\n\n<p>Go to <strong>Admin &gt; Tools &gt; Regenerate Thumbnails<\/strong><\/p>\n\n\n\n<p>This page lists the thumbnails that are currently registered.<\/p>\n\n\n\n<h2 id=\"reducing-total-thumbnails\"   class=\"wp-block-heading\" >Reducing total thumbnails<\/h2>\n\n\n\n<p>Recipe cards are one source of thumbnail sizes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>WP Recipe Make<\/strong> registers 3 total thumbnails<\/li>\n\n\n\n<li><strong>Create Recipe Card<\/strong> registers 12 thumbnails<\/li>\n<\/ul>\n\n\n\n<p>You can also update your WordPress image settings to \"match\" the Feast Plugin's <a href=\"https:\/\/feastdesignco.com\/modern-thumbnails\/\">Modern Thumbnails<\/a>, which then automatically eliminates some duplication:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Thumbnail: 180x180<\/li>\n\n\n\n<li>Medium: 360x0<\/li>\n\n\n\n<li>Medium-Large: 1200x0 (note: not editable normally)<\/li>\n\n\n\n<li>Large: 720x0<\/li>\n<\/ul>\n\n\n\n<p>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.<\/p>\n\n\n\n<div class=\"wp-block-group is-style-group-lightbulb\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>Note<\/strong>: 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 <strong>pay for more disk space<\/strong>. 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. <\/p>\n\n\n\n<p>If you're at the point that this is becoming a concern, we recommend signing up for <a href=\"https:\/\/www.nerdpress.net\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">nerdpress<\/a> 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), <strong>just pay your host for more storage<\/strong>.<\/p>\n<\/div><\/div>\n\n\n\n<h2 id=\"deleting-unregistered-thumbnails\"   class=\"wp-block-heading\" >Deleting unregistered thumbnails<\/h2>\n\n\n\n<p>In general we strongly recommend against deleting unregistered thumbnails (eg. ones you previously generated in old themes and plugins) when regenerating thumbnails. <\/p>\n\n\n\n<p>This is because <strong>the images previously inserted on your site to display empty<\/strong> and ruin your posts and user experience.<\/p>\n\n\n\n<p>The risk of this is simply not worth the cost of paying a little more money for hosting disk space.<\/p>\n\n\n\n<h2 id=\"naming-images\"   class=\"wp-block-heading\" >Naming images<\/h2>\n\n\n\n<p>Properly naming images is critical for good SEO.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/feastdesignco.com\/google-webmaster-conference-2019\/#google-images-best-practices-for-search\">Google Image Best Practices for SEO<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/support.google.com\/webmasters\/answer\/114016?hl=en\" target=\"_blank\">Google image SEO<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/yoast.com\/image-seo\/\" target=\"_blank\">Image SEO from Yoast<\/a><\/li>\n<\/ul>\n\n\n\n<p>Best practices include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>naming images after the content (recipe), with descriptive modifiers for each image (eg. finished, ingredients, preparation, cooking, oven, baked, cut, mixing, temperature, etc)<\/li>\n\n\n\n<li>using hyphens between words, not spaces or underscores<\/li>\n<\/ul>\n\n\n\n<p>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 <a href=\"\/recipe-update-checklist\/\">recipe update checklist<\/a>.<\/p>\n\n\n\n<h2 id=\"image-sizes\"   class=\"wp-block-heading\" >Image sizes<\/h2>\n\n\n\n<p>For simplicity sake, we've narrowed our image recommendations down to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Featured images<\/strong>: 1200x1200px or 1200x1800px\n<ul class=\"wp-block-list\">\n<li>see <a href=\"https:\/\/feastdesignco.com\/rethinking-the-thumbnails\/\">why featured images must be 1200x1200<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Category images<\/strong>: 1200x1200px\n<ul class=\"wp-block-list\">\n<li>see tutorial for <a href=\"https:\/\/feastdesignco.com\/simple-category-index\/\">Category Images block<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>In-content images<\/strong>: 1200px width, height does not matter<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-do-i-need-to-re-upload-everything-at-1200px\">Do I need to re-upload everything at 1200px?<\/h3>\n\n\n\n<p>For in-content images, it's generally not necessary.<\/p>\n\n\n\n<p>For featured images, your previous images may not comply with Google's current article schema or Google Insights requirements. So, unfortunately, <a href=\"https:\/\/feastdesignco.com\/rethinking-the-featured-image\/#do-i-need-to-update-all-my-previous-posts-with-new-featured-images\">the featured images should be updated<\/a> if you care about meeting search engine best practices.<\/p>\n\n\n\n<p>Our recommendation is to <strong>update the images as you're regularly updating post content<\/strong>, not to go in and update a post just to change the image.<\/p>\n\n\n\n<div class=\"wp-block-group is-style-group-heart\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>Update<\/strong>: this has been built into the Feast Plugin's <a href=\"https:\/\/feastdesignco.com\/recipe-update-checklist\/\">Recipe Update Checklist<\/a>.<\/p>\n<\/div><\/div>\n\n\n\n<p>You can use the <a aria-label=\"Enable Media Replace plugin (opens in a new tab)\" href=\"https:\/\/wordpress.org\/plugins\/enable-media-replace\/\" target=\"_blank\" rel=\"noreferrer noopener\">Enable Media Replace plugin<\/a> to replace images without editing a post.<\/p>\n\n\n\n<h2 id=\"webp\"   class=\"wp-block-heading\" >WebP<\/h2>\n\n\n\n<p>Various tools provide optimization and serving WebP images, along with Google Pagespeed Insights recommending it.<\/p>\n\n\n\n<p>Currently, we recommend ignoring this entirely, and not enabling this anywhere. <\/p>\n\n\n\n<p><strong>Do not use any WebP settings, do not use any CDNs to serve WebP images.<\/strong><\/p>\n\n\n\n<p>Testing by <a aria-label=\"Nerdpress (opens in a new tab)\" href=\"https:\/\/nerdpress.net\/\" target=\"_blank\" rel=\"noreferrer noopener\">Nerdpress<\/a> has shown that the image file sizes are inconsistent - sometimes smaller, sometimes larger. It's also not supported by all browsers.<\/p>\n\n\n\n<p><a href=\"https:\/\/feastdesignco.com\/webp\/\">Do not enable WebP anywhere.<\/a><\/p>\n\n\n\n<p>Unless you're on <a href=\"https:\/\/www.bigscoots.com\/wordpress-speed-optimization\/\" target=\"_blank\" rel=\"noreferrer noopener\">BigScoots with the site speed optimization upgrade<\/a> ($17\/month).<\/p>\n\n\n\n<h2 id=\"avif\"   class=\"wp-block-heading\" >AVIF<\/h2>\n\n\n\n<p>Do not enable AVIF images.<\/p>\n\n\n\n<h2 id=\"native-lazyloading\"   class=\"wp-block-heading\" >Native lazyloading<\/h2>\n\n\n\n<p>Chrome introduced \"native lazyloading\" in 2019 and it looks like Firefox will support this in 2020.<\/p>\n\n\n\n<p>However, Safari currently does not. Further, WP Rocket's testing shows it's actually an <a href=\"https:\/\/wp-rocket.me\/blog\/native-lazy-loading\/\">inferior solution to their own<\/a>, which has been in development for years. <\/p>\n\n\n\n<p>Much like WebP images, native lazyloading is an immature solution.<\/p>\n\n\n\n<p>The only lazyloading solution we recommend or support is through WP Rocket.<\/p>\n\n\n\n<h2 id=\"collages\"   class=\"wp-block-heading\" >Collages<\/h2>\n\n\n\n<p>In generally, we recommend against the use of collages or grouping images together. This is because: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>it moves descriptive text further way from the associated image<\/li>\n\n\n\n<li>it creates an unnecessary burden on the blogger to annotate the image for screen readers<\/li>\n\n\n\n<li>it reduces the number of potential images and different keywords that a recipe can rank for, and be associated with<\/li>\n<\/ul>\n\n\n\n<p>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: <\/p>\n\n\n\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/P-GISG3SfB0\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe>\n\n\n\n<p>Here's the source from <a href=\"https:\/\/support.google.com\/webmasters\/answer\/114016?hl=en\" target=\"_blank\" rel=\"noreferrer noopener\">Google's image optimization guide<\/a>: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"288\" src=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/09\/image-5.png\" alt=\"Optimize placement: Whenever possible, place images near relevant text. When it makes sense, consider placing the most important image near the top of the page.\n\" class=\"wp-image-57075\" srcset=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/09\/image-5.png 1440w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/09\/image-5-720x144.png 720w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/09\/image-5-360x72.png 360w, https:\/\/feastdesignco.com\/wp-content\/uploads\/2020\/09\/image-5-180x36.png 180w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h2 id=\"old-images\"   class=\"wp-block-heading\" >Old images<\/h2>\n\n\n\n<p>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).<\/p>\n\n\n\n<p>You'll simply want to upload at 1200px width moving forward (1200x1200 for featured images).<\/p>\n\n\n\n<p>If possible, replace the older images with the larger size <strong>as you're normally updating you posts<\/strong>, using the <a href=\"https:\/\/feastdesignco.com\/recipe-update-checklist\/\">recipe update checklist<\/a>. You can use the <a href=\"https:\/\/wordpress.org\/plugins\/enable-media-replace\/\" target=\"_blank\" rel=\"noreferrer noopener\">Enable Media Replace plugin<\/a> to replace the previous files so that the images aren't lost or deindexed. <\/p>\n\n\n\n<p>Unfortunately we can't offer guidance or specifics on using this plugin, and recommend hiring Casey at <a href=\"https:\/\/www.mediawyse.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Mediawyse<\/a> for site-specific recommendations.<\/p>\n\n\n\n<h2 id=\"hotlinking\"   class=\"wp-block-heading\" >Hotlinking<\/h2>\n\n\n\n<p>Hotlinking refers to displaying an image on your site, directly from another site, instead of hosting it directly on your site. We strongly advise against this because: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>the hosting site can change the image to something malicious<\/li>\n\n\n\n<li>it can slow pagespeed<\/li>\n\n\n\n<li>the image may disappear due to <a href=\"https:\/\/en.wikipedia.org\/wiki\/Link_rot\" target=\"_blank\" rel=\"noreferrer noopener\">link rot<\/a><\/li>\n<\/ul>\n\n\n\n<p>All images that you display on your website should be self-hosted (uploaded to your media library) for pagespeed, user experience, and security reasons.<\/p>\n\n\n\n<p>Images hosted on CDNs are not considered hotlinking.<\/p>\n\n\n\n<h2 id=\"featured-posts-widget\"   class=\"wp-block-heading\" >Featured posts widget<\/h2>\n\n\n\n<p>The featured posts widget contains many accessibility issues, including duplicate links and using the post excerpt for image alt text. See: <a href=\"https:\/\/feastdesignco.com\/modern-homepage-vs-theme-homepage\/\">Modern homepage vs theme homepage<\/a>.<\/p>\n\n\n\n<p>No part of the Feast Plugin setup uses featured posts widgets, or any widgets.<\/p>\n\n\n\n<p>We recommend upgrading to the <a href=\"https:\/\/feastdesignco.com\/modern-homepage\/\">Modern Homepage<\/a> using the <a href=\"https:\/\/feastdesignco.com\/fsri-shortcode\/\">FSRI shortcode<\/a> to resolve these issues.<\/p>\n\n\n\n<h2 id=\"pinterest\"   class=\"wp-block-heading\" >Pinterest<\/h2>\n\n\n\n<p>We recommend <strong>not enabling pinning on all images<\/strong>, and instead, <strong>force pinning hidden pins<\/strong>. This can be done with:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/en-ca.wordpress.org\/plugins\/social-pug\/\" target=\"_blank\" rel=\"noreferrer noopener\">Hubbub Plugin<\/a><\/li>\n<\/ul>\n\n\n\n<p>We have no recommendations for Pinterest image size, format or optimization settings, because they're constantly changing. See: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/business.pinterest.com\/en\/Pinterest-product-specs\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Pinterest image formats (opens in a new tab)\">Pinterest image formats<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" aria-label=\"Pinterest content tips (opens in a new tab)\" href=\"https:\/\/business.pinterest.com\/en\/Pinterest-content-tips\" target=\"_blank\">Pinterest content tips<\/a><\/li>\n<\/ul>\n\n\n\n<p>Contact your Pinterest plugin provider for recommendations regarding Pinterest.<\/p>\n\n\n\n<h2 id=\"facebook\"   class=\"wp-block-heading\" >Facebook<\/h2>\n\n\n\n<p>You can use <a href=\"https:\/\/developers.facebook.com\/docs\/sharing\/webmasters\/images\" target=\"_blank\" rel=\"noreferrer noopener\">Facebook's Best Practices<\/a> for image guidelines.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Facebook will <a href=\"https:\/\/feastdesignco.com\/how-thumbnails-work\/\">crop the featured image<\/a> to fit into their requirements.<\/p>\n\n\n\n<p>You can pre-cache a page by running it through the <a href=\"https:\/\/developers.facebook.com\/tools\/debug\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Facebook debugger tool (opens in a new tab)\">Facebook debugger tool<\/a>.<\/p>\n\n\n\n<h2 id=\"google\"   class=\"wp-block-heading\" >Google<\/h2>\n\n\n\n<center><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/XR3KjgLpT7A\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe><\/center>\n\n\n\n<p>See the <a aria-label=\"undefined (opens in a new tab)\" href=\"https:\/\/support.google.com\/webmasters\/answer\/114016?hl=en\" target=\"_blank\" rel=\"noreferrer noopener\">Google Images Best Practices<\/a> guide.<\/p>\n\n\n\n<p>We would also recommend viewing <a href=\"https:\/\/feastdesignco.com\/google-webmaster-conference-2019\/#google-images-best-practices-for-search\">this Google presentation on image best practices for search<\/a>.<\/p>\n\n\n\n<h2 id=\"photography\"   class=\"wp-block-heading\" >Photography<\/h2>\n\n\n\n<p>Photography isn't our area of expertise, so we recommend outside sources for best practices. There's lots of courses out there - some paid, some free. Here's where we'd recommend starting:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a aria-label=\" (opens in a new tab)\" href=\"https:\/\/cheeky-kitchen.teachable.com\/p\/the-90-minute-food-photography-crash-course\" target=\"_blank\" rel=\"noreferrer noopener\">Brooke Larke's 90-minute food photography crash course<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/thebiteshot\">Joanie Simon's The Bite Shot on Youtube<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/mindful-avocado.teachable.com\/p\/food-photography-101\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Amanda's Food Photography 101 (opens in a new tab)\">Amanda's Food Photography 101<\/a><\/li>\n<\/ul>\n\n\n\n<p>Important! See <a href=\"https:\/\/feastdesignco.com\/how-thumbnails-work\/\">how thumbnails work<\/a> and the \"focus zone\".<\/p>\n\n\n\n<p>If you're interested in what professional photographers charge and the quality expectations, <a aria-label=\"see this youtube video on professional food photography rates (opens in a new tab)\" href=\"https:\/\/www.youtube.com\/watch?v=dGwoIG0QC2U&amp;t=1s\" target=\"_blank\" rel=\"noreferrer noopener\">see this youtube video on professional food photography rates<\/a>.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.pixsy.com\/\" target=\"_blank\" aria-label=\"undefined (opens in a new tab)\" rel=\"noreferrer noopener\">Pixsy<\/a> is a service that seeks monetary compensation from unauthorized image use.<\/p>\n\n\n\n<h2 id=\"wordpress-big-images-threshold\"   class=\"wp-block-heading\" >WordPress Big Images Threshold<\/h2>\n\n\n\n<p>WordPress introduced a feature in 5.3 that was automatically enabled, which automatically downsizes images larger than 2560 px (either dimension).<\/p>\n\n\n\n<p>We recommend installing the <a aria-label=\"Disable Big Images Threshold plugin (opens in a new tab)\" href=\"https:\/\/wordpress.org\/plugins\/disable-big-image-threshold\/\" target=\"_blank\" rel=\"noreferrer noopener\">Disable Big Images Threshold plugin<\/a> to disable this feature.<\/p>\n\n\n\n<p>Per the pre-upload optimizing section above, do not upload images wider than 1200px.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Images are an essential part of recipe posts and can have far-ranging impacts on user experience, site-speed, SEO and accessibility. 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...<\/p>\n","protected":false},"author":1827,"featured_media":34898,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6235,6234,5024],"tags":[6231,6232,6233],"class_list":["post-47148","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-genesis","category-kadence","category-tutorials","tag-documentation","tag-genesis","tag-kadence"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Image Optimization - Feast Design Co.<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/feastdesignco.com\/image-optimization\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image Optimization\" \/>\n<meta property=\"og:description\" content=\"Images are an essential part of recipe posts and can have far-ranging impacts on user experience, site-speed, SEO and accessibility. 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&#039;t matter). For featured images, use 1200x1200. Lightroom is currently the...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/feastdesignco.com\/image-optimization\/\" \/>\n<meta property=\"og:site_name\" content=\"Feast Design Co.\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/feastdesignco\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-04T08:34:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-11T15:08:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2019\/07\/feast-logo-large.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Skylar\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Skylar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"25 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/image-optimization\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/image-optimization\\\/\"},\"author\":{\"name\":\"Skylar\",\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/#\\\/schema\\\/person\\\/28edb20a81f10b62443c21ec80186098\"},\"headline\":\"Image Optimization\",\"datePublished\":\"2020-04-04T08:34:00+00:00\",\"dateModified\":\"2026-03-11T15:08:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/image-optimization\\\/\"},\"wordCount\":4831,\"commentCount\":27,\"publisher\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/image-optimization\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/feastdesignco.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/feast-logo-large.png\",\"keywords\":[\"Documentation\",\"Genesis Setup\",\"Kadence Setup\"],\"articleSection\":[\"Genesis\",\"Kadence\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/feastdesignco.com\\\/image-optimization\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/image-optimization\\\/\",\"url\":\"https:\\\/\\\/feastdesignco.com\\\/image-optimization\\\/\",\"name\":\"Image Optimization - Feast Design Co.\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/image-optimization\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/image-optimization\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/feastdesignco.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/feast-logo-large.png\",\"datePublished\":\"2020-04-04T08:34:00+00:00\",\"dateModified\":\"2026-03-11T15:08:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/image-optimization\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/feastdesignco.com\\\/image-optimization\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/image-optimization\\\/#primaryimage\",\"url\":\"https:\\\/\\\/feastdesignco.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/feast-logo-large.png\",\"contentUrl\":\"https:\\\/\\\/feastdesignco.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/feast-logo-large.png\",\"width\":1000,\"height\":1000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/image-optimization\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/feastdesignco.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorials\",\"item\":\"https:\\\/\\\/feastdesignco.com\\\/category\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Image Optimization\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/#website\",\"url\":\"https:\\\/\\\/feastdesignco.com\\\/\",\"name\":\"Feast Design Co.\",\"description\":\"WordPress Themes for Food &amp; Lifestyle Bloggers\",\"publisher\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/feastdesignco.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/#organization\",\"name\":\"Feast Design Co.\",\"url\":\"https:\\\/\\\/feastdesignco.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/feastdesignco.com\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/feast_script.jpg\",\"contentUrl\":\"https:\\\/\\\/feastdesignco.com\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/feast_script.jpg\",\"width\":800,\"height\":800,\"caption\":\"Feast Design Co.\"},\"image\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/feastdesignco\\\/\",\"https:\\\/\\\/x.com\\\/feastdesignco\",\"https:\\\/\\\/www.instagram.com\\\/feastdesignco\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/#\\\/schema\\\/person\\\/28edb20a81f10b62443c21ec80186098\",\"name\":\"Skylar\",\"sameAs\":[\"https:\\\/\\\/feastdesignco.com\\\/about-skylar-bowker\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Image Optimization - Feast Design Co.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/feastdesignco.com\/image-optimization\/","og_locale":"en_US","og_type":"article","og_title":"Image Optimization","og_description":"Images are an essential part of recipe posts and can have far-ranging impacts on user experience, site-speed, SEO and accessibility. 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...","og_url":"https:\/\/feastdesignco.com\/image-optimization\/","og_site_name":"Feast Design Co.","article_publisher":"https:\/\/www.facebook.com\/feastdesignco\/","article_published_time":"2020-04-04T08:34:00+00:00","article_modified_time":"2026-03-11T15:08:53+00:00","og_image":[{"width":1000,"height":1000,"url":"https:\/\/feastdesignco.com\/wp-content\/uploads\/2019\/07\/feast-logo-large.png","type":"image\/png"}],"author":"Skylar","twitter_misc":{"Written by":"Skylar","Est. reading time":"25 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/feastdesignco.com\/image-optimization\/#article","isPartOf":{"@id":"https:\/\/feastdesignco.com\/image-optimization\/"},"author":{"name":"Skylar","@id":"https:\/\/feastdesignco.com\/#\/schema\/person\/28edb20a81f10b62443c21ec80186098"},"headline":"Image Optimization","datePublished":"2020-04-04T08:34:00+00:00","dateModified":"2026-03-11T15:08:53+00:00","mainEntityOfPage":{"@id":"https:\/\/feastdesignco.com\/image-optimization\/"},"wordCount":4831,"commentCount":27,"publisher":{"@id":"https:\/\/feastdesignco.com\/#organization"},"image":{"@id":"https:\/\/feastdesignco.com\/image-optimization\/#primaryimage"},"thumbnailUrl":"https:\/\/feastdesignco.com\/wp-content\/uploads\/2019\/07\/feast-logo-large.png","keywords":["Documentation","Genesis Setup","Kadence Setup"],"articleSection":["Genesis","Kadence","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/feastdesignco.com\/image-optimization\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/feastdesignco.com\/image-optimization\/","url":"https:\/\/feastdesignco.com\/image-optimization\/","name":"Image Optimization - Feast Design Co.","isPartOf":{"@id":"https:\/\/feastdesignco.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/feastdesignco.com\/image-optimization\/#primaryimage"},"image":{"@id":"https:\/\/feastdesignco.com\/image-optimization\/#primaryimage"},"thumbnailUrl":"https:\/\/feastdesignco.com\/wp-content\/uploads\/2019\/07\/feast-logo-large.png","datePublished":"2020-04-04T08:34:00+00:00","dateModified":"2026-03-11T15:08:53+00:00","breadcrumb":{"@id":"https:\/\/feastdesignco.com\/image-optimization\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/feastdesignco.com\/image-optimization\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/feastdesignco.com\/image-optimization\/#primaryimage","url":"https:\/\/feastdesignco.com\/wp-content\/uploads\/2019\/07\/feast-logo-large.png","contentUrl":"https:\/\/feastdesignco.com\/wp-content\/uploads\/2019\/07\/feast-logo-large.png","width":1000,"height":1000},{"@type":"BreadcrumbList","@id":"https:\/\/feastdesignco.com\/image-optimization\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/feastdesignco.com\/"},{"@type":"ListItem","position":2,"name":"Tutorials","item":"https:\/\/feastdesignco.com\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"Image Optimization"}]},{"@type":"WebSite","@id":"https:\/\/feastdesignco.com\/#website","url":"https:\/\/feastdesignco.com\/","name":"Feast Design Co.","description":"WordPress Themes for Food &amp; Lifestyle Bloggers","publisher":{"@id":"https:\/\/feastdesignco.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/feastdesignco.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/feastdesignco.com\/#organization","name":"Feast Design Co.","url":"https:\/\/feastdesignco.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/feastdesignco.com\/#\/schema\/logo\/image\/","url":"https:\/\/feastdesignco.com\/wp-content\/uploads\/2016\/10\/feast_script.jpg","contentUrl":"https:\/\/feastdesignco.com\/wp-content\/uploads\/2016\/10\/feast_script.jpg","width":800,"height":800,"caption":"Feast Design Co."},"image":{"@id":"https:\/\/feastdesignco.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/feastdesignco\/","https:\/\/x.com\/feastdesignco","https:\/\/www.instagram.com\/feastdesignco\/"]},{"@type":"Person","@id":"https:\/\/feastdesignco.com\/#\/schema\/person\/28edb20a81f10b62443c21ec80186098","name":"Skylar","sameAs":["https:\/\/feastdesignco.com\/about-skylar-bowker"]}]}},"taxonomy_info":{"category":[{"value":6235,"label":"Genesis"},{"value":6234,"label":"Kadence"},{"value":5024,"label":"Tutorials"}],"post_tag":[{"value":6231,"label":"Documentation"},{"value":6232,"label":"Genesis Setup"},{"value":6233,"label":"Kadence Setup"}]},"featured_image_src_large":["https:\/\/feastdesignco.com\/wp-content\/uploads\/2019\/07\/feast-logo-large-720x720.png",720,720,true],"author_info":{"display_name":"Skylar","author_link":"https:\/\/feastdesignco.com\/author\/skylar\/"},"comment_info":27,"category_info":[{"term_id":6235,"name":"Genesis","slug":"genesis","term_group":0,"term_taxonomy_id":6235,"taxonomy":"category","description":"","parent":0,"count":17,"filter":"raw","cat_ID":6235,"category_count":17,"category_description":"","cat_name":"Genesis","category_nicename":"genesis","category_parent":0},{"term_id":6234,"name":"Kadence","slug":"kadence","term_group":0,"term_taxonomy_id":6234,"taxonomy":"category","description":"","parent":0,"count":8,"filter":"raw","cat_ID":6234,"category_count":8,"category_description":"","cat_name":"Kadence","category_nicename":"kadence","category_parent":0},{"term_id":5024,"name":"Tutorials","slug":"tutorials","term_group":0,"term_taxonomy_id":5024,"taxonomy":"category","description":"","parent":0,"count":13,"filter":"raw","cat_ID":5024,"category_count":13,"category_description":"","cat_name":"Tutorials","category_nicename":"tutorials","category_parent":0}],"tag_info":[{"term_id":6231,"name":"Documentation","slug":"documentation","term_group":0,"term_taxonomy_id":6231,"taxonomy":"post_tag","description":"Documentation is designed to provide information, but is not related to setting up the site. For instructions on setting up the site, see the Tutorials.","parent":0,"count":22,"filter":"raw"},{"term_id":6232,"name":"Genesis Setup","slug":"genesis","term_group":0,"term_taxonomy_id":6232,"taxonomy":"post_tag","description":"Tutorials that only apply to the Genesis Framework.","parent":0,"count":20,"filter":"raw"},{"term_id":6233,"name":"Kadence Setup","slug":"kadence","term_group":0,"term_taxonomy_id":6233,"taxonomy":"post_tag","description":"Documentation that only applies to the Kadence framework.","parent":0,"count":8,"filter":"raw"}],"_links":{"self":[{"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/posts\/47148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/users\/1827"}],"replies":[{"embeddable":true,"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/comments?post=47148"}],"version-history":[{"count":2,"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/posts\/47148\/revisions"}],"predecessor-version":[{"id":132037,"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/posts\/47148\/revisions\/132037"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/media\/34898"}],"wp:attachment":[{"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/media?parent=47148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/categories?post=47148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/tags?post=47148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}