Blurry Header
-
Hello! I’m using the Twenty Fourteen theme (which I really love btw), the problem is the header (that I made) gets a bit blurry. I’ve tried the recommended dimensions, I’ve also tried making the image slightly bigger. The image looks fine in the media page but then it gets blurry after being selected and cropped. I see no option to skip cropping either. :/
The blog I need help with is: (visible only to logged in users)
-
Could you upload your original image to your Media Library so we can take a closer look? Thank you!
-
Original: https://i8xitalu.files.wordpress.com/2021/05/wp-header-v2-1.png
Cropped: https://i8xitalu.files.wordpress.com/2021/05/cropped-wp-header-v2-1-1.png
Should I try making the image much bigger? I noticed that on my laptop the header on the blog appears much bigger than the original image that I made.
-
Hi there,
Are you by any chance using a Retina/ultra-HD screen? I can see the image is a little fuzzy on my Macbook’s Retina screen, but it’s crisp on my external monitor.
If so, this is expected – very high-resolution screens have double the pixel density of regular screens, so what in effect happens is that on those screens the browser loads the image at double the size as specified in the HTML, and then squishes it back down to fit in the available space.
The problem is that blowing up an image bigger than it actually is, reduces the quality. So to ensure your images still look good on high-res screens, we recommend you use an image double the site that’s actually needed.
https://wordpress.com/support/media/image-optimization/#retina-displays
Your theme displays the header image at 1260px wide, so try exporting an image at double that size from the image editing program you used to create that image (assuming your original source image is big enough, of course :) )
-
Uhhhh not sure if my screen is HD but I tried making a new header that’s twice the size (https://i8xitalu.files.wordpress.com/2021/05/wp-header-v3.png). But when I press ‘select and crop’ the cropping marquee doesn’t show up and pressing the ‘crop image’ button just gives me this message: “There has been an error cropping your image.” I tried resizing it several times and it seems that 1600px is the widest I can go with the cropping marquee still appearing. However, going with that resolution still gives me a blurry header. :/
-
Oh wait, I think I kinda figured it out. So I tried using the same 2520×480 image, selected it as the header from the media library like before. Then I clicked ‘Edit Image’ (in the Attachment Details section). A new window was opened and I scaled the image there to 1260×240, the recommended header size. After that, I switched back to the tab where I was customizing the theme and closed the media library window. Then I tried adding a header again, selected the now scaled/resized image from the media library and a ‘Skip cropping’ button appeared and I clicked that.
Anyway, thanks for the help! Learned something about retina displays and I’ll be keeping that in mind for future posts/whatever. (o˘◡˘o)
- The topic ‘Blurry Header’ is closed to new replies.
WordPress.com Forums 
