Blurry Header Image

Hey there emilyhaw,

Hope you’re well! ??

Can you share your site’s url so I can take a closer look? Did you change any settings in your media settings page ( Settings > Media ) or you have a plugin that may affect the size of your image.

Looking forward for your reply! ??

Take care,
Calvin

Sure! https://www.emilyhawken.com/blog
I have changed the settings on thumbnail images because they weren’t displaying correctly at first. I got that suggestion from this forum. And I don’t think I’m using any plugins that would affect the image size.

Hi Emily,

I had the same problem. I’ve just worked it out! ??

It looks poor on high resolution monitors. That’s because no matter how big image you upload, it’s being scaled down to 1200 x 500 px. So if you want to see it in HD, the header image must be scaled up (zoomed in) from 1200 to 1920 px width. That’s where you loose the quality. Snaps just won’t let you upload bigger image (by default).

To overcome this limitation you have to change the source code of the template. It’s easy! Just go to “Appearance -> Editor”. You will see a list of Templates on the left and editor field in the middle. Select “custom-header.php” and change one line:

‘width’ => 1200, to
‘width’ => 1920

it’s in the first function: snaps_custom_header_setup(), at the beggining of the file.

Then, click the “Update File” button, and go to “Customize -> Header Image”. You will notice that reccomended header size changed to 1920 x 500! Prepare the file (make it precisely 1920 x 500) and upload. The “Skip cropping” button will appear. Click it, so you will use the image unchanged. That’s it! ??

Notice, that the header height remains constant no matter the resolution. When the header image is 1920 x 500, it will be unchanged on HD monitors, on bigger res it will be scaled up (worse quality), on smaller it will be cropped – sides will be cut, but the quality remains the same. I assumed that you want it to look good on HD monitors, but you can experiment with bigger resolutions.

Greetings ??

Hey there guys,

Hope you’re both well! ??

@emilyhaw

sadzik’s suggestion is also good ?? but instead of just editing the template I suggest to use child themes for any customisation you will make. Read more about it here: https://codex.www.ads-software.com/Child_Themes

After creating the child, copy the ‘header.php’ from snaps theme folder to your child theme folder then apply the solution by sadzik to the ‘header.php’ that is inside your child theme folder

Let me know if it helps! ??

Take care,
Calvin

Hi there good people,

I have exactly the same problem as Emily above. I have change the custom header template to 1920 as Sadzik suggested, it is better but still very pixelated, blown out of proportions and very very strange indeed. All i want is my name and logo next to it, i gave up on the logo as this looks very pixelated. It looks different on each device i checked, ipad, iphone, pc, everywhere it looks different and changes the position, sometimes cuts a bit of my name and sometimes shifts the name off centre. Can someone explain how i can get around this. Can i raise the resolution to even higher value ?
What i have set up to now, is 1920/300px cropped and off centre in the photoshop file but by tryouts it seems more or less in centre when uploaded. The only thing is the difference between the sharp menu fonts and the slightly blurry header font. Please let me know, all help will be greatly appreciated. Link to my website
kudlacik.info

Hello Oskar,

I’ve noticed that your header is 1920x157px and you mentioned cropping it to 1920/300 px. Which height do you mean to use? Resizing between this two values might be the cause of the problem. Besides the image has very low quality itself (only 13,1 KB). Did you upload it this way or did the theme crop it for you?

And how did you change the header height from default 500 px?

Let me tell you my approach – it worked like a charm:). I also changed my header height -> to 1920x400px. It took three steps:

1) Change the displayed header height
2) Change the allowed image header size
3) Upload the image and don’t let the theme mess with the image (don’t let him crop it).

Details:

1) I don’t know how you did it, but I changed the Header.php file (arbitrary value of 400px).
<header id="masthead" class="site-header" role="banner" <?php if ( ! empty( $header_image ) ) { ?>style="background:url(<?php header_image(); ?>) no-repeat center center; background-size: cover; height:400px;" <?php } ?>>

2) In custom-header.php you have to change both values:

'width'                  => 1920,
		'height'                 => 400,

3) Prepare the image exactly this size (1920 x 400), see if it looks ok, make sure that it’s more than 13KB (maybe 100KB?) and don’t crop it. If you upload the image in right size, the “Skip cropping” button will appear. Use it and the image on your site should look exactly the same as the one you prepared (given that you watch in on HP monitor – 1920 x 1080 px).

Of course, in your case change the heoght from 400px (my settings) to yours.

Thank you Sadzik, i will try it the way you suggest just now, will tell you whether it did work, regards

It works great Sadzik, well done man! First try and there we go, exactly as i wanted. Did all like you said above, in the header.php i didnt have any value but i placed 220px in the exact location guided by your copied code, custom header changed accordingly 1920x220px and it works, thanks a lot!

Hi! I have the same problem. But I cannot change the php/html files. I can only change the css since I am only using a premium wordpress account (no hosting). Is there any way I can make the header image sharp using only css?

I’m getting the same problem, how ever I can’t edit anything because I have Beaver Builder. When I go to the ‘EDIT’ section, I don’t see the same options as described in some of your replies.

I have managed to get the image sharp, but it is not the size I want (currently (1920×1959). I would like it to be half the size in the header.

Any suggestions?

https://www.rockenberry.com

HELLO!!
I AM HAVING THE SAME PROBLEM I HAVE CHANGED MY HEADER IMAGE(LOGO) 20 TIMES AND IT LOOKS THE SAME https://WWW.SARIDSOTO.COM HELPPP!