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