Blogger seems to have resolved the blurry image bug in the new interface. The image that you uploaded directly from your computer will now be displayed in its real size if you open it in a new tab. However, depending on your theme, some of your thumbnails may still have issue/not showing up properly. You can still follow the tutorial within this article to fix broken thumbnail problems.
Blogger new interface is soon to become "the new normal". This latest update
will bring Blogger to the new Mobile First era. It will make mobile blogging
easier. However the new interface comes with an annoying bug. Right now, if
you upload an image from the new user interface (UI), you may face broken
image problem.
You may notice that the uploaded image has lower resolution or blurry. Even
when you open the image in a new tab, you will get the blurry version. Usually
if you do this, you will get the image in its full size.
|
|
Blogger new interface. |
Furthermore, in some Blogger (Blogspot) themes, image thumbnails may fail to
load. Right now I am using Fiksioner as my theme, which is designed by Igniel.
It is lightweight and usually loading fast. So, when some of the thumbnails
didn't load properly in the blog body, it couldn't have been caused by slow
speed.
This thumbnail problem doesn't appear to affect Blogger stock themes. However,
the stock themes still suffer from the low resolution image. If you are a
Blogger theme creator, you may want to follow this major new update closely in
case your theme become obsolete.
Read also:
How to Index Blogger Post Using Google Search Console Tool - Basic Search
Engine Optimization
Temporary Fix for the Blurry Image Resolution Problem in Blogger New UI
After doing some trial and error, I find a way in order to fix Blogger
broken image problem. This method is a temporary fix while we are waiting
for Blogger to resolve this issue permanently. I am not sure how this fix
will affect your Blogger so I suggest that you try it on first in your test
blog.
The first method is to use the old UI. As of today, you can still use the
old Blogger interface. I believe it will still be available until late July.
If you upload image from the old UI, the problem doesn't appear to manifest.
It is problematic if you are using mobile phone to blog because the old
Blogger UI is not very mobile friendly.
The second method is editing uploaded image URL using Blogger HTML view.
Apparently, if you use the new UI, your image is uploaded in different
URL.You can edit the new image url to revert it back to the old image url.
You can use the auto format HTML so that it's easier to locate it.
The url of your uploaded image from the new interface is typically stored in
the following html code:
<a href="https://1.bp.blogspot.com/*/*/*/*/imagename.png"
style="margin-left: 1em; margin-right: 1em;">
<img border="0" data-original-height=" " data-original-width=" "
src="https://1.bp.blogspot.com/*/*/*/*/h640-w575/yourimage.png" width=" " /></a>
The asterisk in the highlighted url is usually gibberish. Pay attention only
to the url highlighted in blue and red. Do not edit other code or url other
than the one I had highlighted because it may cause error.
In the old interface, the blue url will be slightly different, it is:
https://1.bp.blogspot.com/*/*/*/*/s1600/imagename.png
Notice the additional "s1600" before the image name. It specifies that the
real width of your image is 1600px. You may set it to any width that you
like or use the real width of you image. It appears to fix the low
resolution problem when you open the image in new tab.
For blurry Blogger thumbnail, you can take a look at the red url. You can
change the part of the url before the image name (replace
h640-w575 part), just like
the way you fix the real image resolution problem. Usually I set mine to
640px so I put "s640" which is the same size as x-Large setting.
https://1.bp.blogspot.com/*/*/*/*/s640/yourimage.png
The third method is to upload the image to another hosting service and use
the link to embed the image in your post. This indirect method is very
inconvenient and you might lost the image link since it's not saved inside
your Blogger account. I don't really recommend it.
Read also:
How to monetize Blogger free domain
What Blogger Says About Broken Image Problem
I haven't been able to verify whether the bug affects every Blogger user.
However I was able to replicate the broken image problem in different blog
account. I also find
a tweet from another Blogger user
who experienced a similar problem. As of today, June 1st 2020, Blogger has not
completely addressed this problem yet.
On April 24th 2020, one of Google employee, Mariia K, in
Blogger community forum, announced that a lot of users noticed broken images in their
posts. It didn't specifically mention the lower resolution bug but I believe
the announcement has something to do with this problem. It also mentioned that
re-uploading image may fix the problem, but I find that it is not the case.
It is definitely a good thing that Blogger is moving to prioritize mobile
users but this bug is a blow to the people who are trying to get used to the
new interface. It is also a setback for people who want to try mobile blogging
as soon as possible. Image is an important part in blogging.
I still recommend you to start getting used to the new user interface starting
now because the old interface will become unavailable eventually. You can use
this temporary fix to get around blurry image problem in Blogger new UI.
Hopefully Blogger team will fix this problem as soon as possible, preferably
before the new interface migration is final. We need more JPEG!