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://www.ads-software.com/documentation/article/image-block/#image-settings

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

Hi Luk4,

Thank you. Much appreciated.

I tried to match the dimensions but couldn’t quite figure out how to locate them. Anyway, the direction you pointed out is an excellent one. From this lead, I discovered that, if I change the image size under Block option to “Full Size”, the images became markedly sharper. I think setting it to “thumbnail” would also be quite ok.

For some reason the current image setting has all been set to “Large”. So, I have to change each photo individually to “Full Size”. Do you know by any chance how to set the default to “Full Size”. I have googled but the answers seem complicated and unclear.

Thank you so much.

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.www.ads-software.com/tutorial/managing-settings-media/

• This reply was modified 10 months, 1 week ago by luk4.

I tried your suggestions on my latest post See divided Cyprus and the only divided capital in the world in 6 days 6/2023 (Stop 6) – Perfect Then, i.e. changing the defaults to:

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

, and changed all my photos that I resized, to width:2560, height: 1280. When these resized photos were inserted into the posts, they came out sharp without any further interference from me. The only negative is the images each take up about 400 kb, which is more than the less than 200 kb each previously. I also found that, when there is only one photo in the block, the caption is displayed outside the photo. But I can live with both these side effects. So, I am happy this problem is resolved. Thank you so much!

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://www.ads-software.com/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://www.ads-software.com/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 10 months, 1 week ago by luk4.
• This reply was modified 10 months, 1 week ago by luk4.
• This reply was modified 10 months, 1 week ago by luk4.

Sorry, I misspoke. I have actually used the defaults:

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

The images now look great. I will in the future change all images to “medium” if there are 2 or more in one row.

The use of snippets is a bit too much for me. I just have to tolerate the caption outside the image in that situation.

I just found that 3 of my post photos have been distorted by the use of classic editor when I was trying to fix the problem of the blurry imgaes. For exmaple:

How to explore Luang Prabang’s temples, rivers and waterfalls 2/3 2023 (Stop 8) – Perfect Then

To party and have a good time in Vang Vienne, Laos 3/2023 (Stop 9) – Perfect Then

Genocide and the killing fields re-lived, in Phnom Penh, Cambodia 3/2023 (Stop 11) – Perfect Then

Do you have any suggestion? I tried redoing one of the posts but it took to much time to redo them.

Sorry for troubling you.

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!

Thank you so much!