Jun 28, 2022

Header Image turns blurry when I use it

So, I'm trying to use the picture you can see on my blog's header (https://mydumpsterbox.blogspot.com/), which is 2560x800, but whenever I upload it, Blogger turns it into 800x250. I (obviously) don't have a problem with that, but it turns out on my image being pretty pixelated. What can I do about that? Thank you on advance.

Details

Uploading pictures and videos,Mac,Chrome

Locked

Informational notification.

This question is locked and replying has been disabled.

Community content may not be verified or up-to-date. Learn more.

All Replies

WebLove.PL

Diamond Product Expert

<b:responsive='true'/>

Jul 1, 2022

Hello,

You can change this, but it requires code modification

Open your https://www.blogger.com dashboard -> Theme tab -> click on that little triangle next to Customize -> Edit HTML -> icon with four squares -> Jump to Header1 -> replace this code:

<b:include name='super.image'/>

with this one:

<a class='header-image-wrapper' expr:href='data:blog.homepageUrl'>
    <b:include data='{ image: data:image, altText: data:blog.title.escaped, originalWidth: data:width, originalHeight: data:height, imageSizes: [360,480,640,800,1000,1200] }' name='responsiveImage'/>
  </a>

save changes (floppy disk icon)

Images on Blogger are optimized, so it is sometimes visible on red elements. Try it with .png file.