Clear image inserted into WordPress posts that became blurry

Hi @choonthen

The first two images in the blog post are also blurred. This is because the image file used is smaller than the image displayed. The first image, for example, is 300×225 but is displayed at 483×362. The image is therefore enlarged and appears blurred.

Be sure to select the right resolution in the image block settings: https://wordpress.org/documentation/article/image-block/#image-settings

It’s probably the same issue with the other ones.

Great! I’m glad you was able to get better images.

In fact, large should be the right dimension to select. However, it appears the media settings (in Settings > Media) of your website are quite unusual:

• Thumbnail is 50×50 (cropped)
• Medium is 150×150
• Large is 300×300

This is too small imho, and this is why your images are blurred. You might want to set thumbnail as about 150×150, medium as about 650×650 and large as about 1280×1280. Also, you might want to upload your pictures to 2560px wide (the “full size”). Then, by default, inserted images will be to 1280px wide (“large”) which will fit your page content width. When putting two pictures side by side, you’ll be able to manually choose the “medium” size. The “full size” will be only needed in some specific situations where your image will be full screen.

After changing media settings, you’ll need to use a plugin such as Regenerate Thumbnails to resize previously uploaded pictures. Of course, be sure to have a backup of your website first. Once the regeneration job is done, remove the plugin.

Also, check out this great tutorial to get an overview of managing your media settings:

• Managing Settings: Media
  https://learn.wordpress.org/tutorial/managing-settings-media/

• This reply was modified 2 weeks, 5 days ago by luk4 × cyberia╱eu.

I’m glad you sorted this out.

Just to be sure, your default media settings should be:

• thumbnail: 150×150
• medium: 600×600
• large: 1280×1280

And you need to upload images to your WordPress website with a width of 2560px.

When writing your articles, if an image is set to the full width of the article, keep the default “large” setting (the image will indeed be around ~200 KB). If you put 2 or 3 images side by side, choose “medium” (the images will be approximately ~60 KB).

Regarding the caption outside the block, unfortunately this is how Gutenberg displays single image captions. However, you can force these captions to be like the others with the following CSS snippet:

/* 
 * Force Single Image Captions To Cover the Images
 * https://wordpress.org/support/topic/clear-image-inserted-into-wordpress-posts-that-became-blurry/
 */

:not(.wp-block-gallery) > figure.wp-block-image {
  position: relative;
  width: fit-content;
}

:not(.wp-block-gallery) > figure.wp-block-image > figcaption {
  background: linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.3) 70%,transparent);
  bottom: 0;
  box-sizing: border-box;
  color: #fff;
  font-size: 13px;
  left: 0;
  margin-bottom: 0;
  max-height: 60%;
  overflow: auto;
  padding: 0 8px 8px;
  position: absolute;
  text-align: center;
  width: 100%;
}

Insert this CSS snippet into the Additional CSS section of the Customizer.

This will force all single image captions to cover the image. If you want a per-image solution, choose this slightly different CSS snippet:

/* 
 * Force ".cover-caption" Enabled Single Image Captions To Cover Images
 * https://wordpress.org/support/topic/clear-image-inserted-into-wordpress-posts-that-became-blurry/
 */

:not(.wp-block-gallery) > figure.wp-block-image.cover-caption {
  position: relative;
  width: fit-content;
}

:not(.wp-block-gallery) > figure.wp-block-image.cover-caption > figcaption {
  background: linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.3) 70%,transparent);
  bottom: 0;
  box-sizing: border-box;
  color: #fff;
  font-size: 13px;
  left: 0;
  margin-bottom: 0;
  max-height: 60%;
  overflow: auto;
  padding: 0 8px 8px;
  position: absolute;
  text-align: center;
  width: 100%;
}

Then you will have to add cover-caption as Additional CSS Class(es) in the Advanced tab of the image block when you want the image has a covering caption.

Finally, please don’t forget to mark your post as solved. Thank you!

Have a great day!

• This reply was modified 2 weeks, 2 days ago by luk4 × cyberia╱eu.
• This reply was modified 2 weeks, 2 days ago by luk4 × cyberia╱eu.
• This reply was modified 2 weeks, 2 days ago by luk4 × cyberia╱eu.

I’m affraid I don’t. It will be still quicker to manually edit those posts than looking for a way to do it automagically. You can open a new support ticket for this different issue though.

Please, mark this one as solved. Thank you!