Are your Gutenberg Images Blurry?

We’ve seen this issue pop up a few times in the Fuel Your Photos Facebook Group.

People update wordpress, start to build a new blog post using the new(ish) Gutenberg editor, and notice that their images are soft!

Blurry images are not what you want to see after you’ve perfected your photography, post-processing, and export/compression workflow.

Why are my Gutenberg Images Blurry?

  • Gutenberg’s Single Image block defaults to Large size thumbnails. These are typically 1024 px on the long edge in WordPress.

    Typically on modern blog themes, the content width will be somewhere in the 1200-1800px wide range. This means the 1024px wide image is now being stretched, causing the blur.
  • You can manually set each image block to “full size” as a short term fix, if you’ve already exported your images at the correct size.

How to Fix This Long Term?

  • First, we need to figure out how wide our blog content should be. Go to a blog post (preferably using Chrome browser), right click and select “inspect”, and then click this icon to select an element.
You can also ask your theme developer for this width dimension.
  • Then hover over an image on the blog post or page you’re building and look at the dimensions it is displaying, typically paying most attention to width (the first number).
This example is 939px wide, so I’d want to set my Large thumbnail to 939px wide.
(Be careful not to set this number to a larger setting than your previously uploaded images)
  • Change your Large thumbnail pixel dimensions in Settings > Media.
  • Then you will need to regenerate your thumbnails in this new sizing. There is an easy plugin called Regenerate Thumbnails that will do this for you, but it will take time if you have thousands of images.
  • Once that is complete, your Gutenberg image block will still default to large size, but your images will not be soft.

Leave a Replay

Leave a Reply

About Fuel Your Photos

Here on the Fuel Your Photos website, you will find resources, guides, interviews and ideas about making the most of your photography website.
 
We talk about building and planning your site, optimizing for search engines and conversions, and ways to get more traffic to your website.

We both started our careers as wedding photographers and were intrigued by marketing ourselves using SEO tactics. For our own personal businesses, organic search allowed us to have active marketing campaigns around the clock. 

Bringing in hundreds of inquiries per year.

We’ve taught SEO to photographers in the past 5 years, speaking at workshops and conferences around the world. We understand that this topic can be extremely confusing and difficult to grasp. We want to help that.

We’ve successfully taught hundreds of students who never thought they would “get SEO”.

Recent Posts

Recent Youtube Video

Want the best SEO tips right in your inbox?

By joining this mailing list, you consent to receiving emails from us in the future. You can opt out easily at any time. We will not share your info with third parties.

Cart Item Removed. Undo
  • No products in the cart.