yoko theme – blurry header image
-
Hi, whatever I do I cannot prevent the uploaded image in the header becoming blurry. My photos are high resolution – I’ve tried every size, it looks great in jpeg or png, but as soon as I upload the images are horribly blurry.
Can you help?
Thanks.The blog I need help with is: (visible only to logged in users)
-
Hi there,
I’m taking a look at all the images in your media library, and they all appear blurry right from their source. Some examples:
So it’s not that setting it as your Header Image is blurry, it’s that the images are blurry even within the media library.
How you creating these images on your computer? The elements that look blurriest are the book covers — are you using any scaling from their source image to create these headers?
-Alex G.
-
Hi Alex, thanks for coming back to me so quickly. Those images you looked at are the endless different times that I have tried different sizes etc for the header – my images are crystal clear they are book covers and produce wonderfully everywhere except when I upload them – if you look at my website under photos – you will see what I mean – they are all over 5MB and look fantastic when I put them in MS publisher and save them as Jpeg or PNG, but as soon as they upload on the header (only) – they become fuzzy. I have had friends try it and they say it is fine with theirs, so by process of elimination it seems to be my website.
-
What are the dimensions of the header file on your computer? The Custom header spot is 1102 × 350 pixels at its largest, so if your local file is not those same dimensions, the upload is automatically skewing it for you to fit that spot as best as possible.
It sounds like you’re uploading directly in the the Custom Header location, so let’s try this as an experiment:
1) Create a file locally that’s exactly 1102 x 350, containing your book covers, that is nice and clear.
2) Upload that file only into the Media Library, not the custom header spot, here:
https://jackieparry.wordpress.com/wp-admin/media-new.php
And let’s see if that upload helps it stay clear and focused.
-Alex G.
-
Hi Alex, thanks for that (I appreciated the link too). I checked the size of the JPEG image and it is 27KB!!!!! and 649×207 (the MS publisher image is 4,674KB!) – and when I uploaded to the media Library it did look blurry – funny when I put it into header it looks fine (until I publish it!) – So, it would seem that is the problem, when saving as a JPEG file it reduces it dramatically. I should have realised – can you tell me how I keep the quality as a JPEG file or can I save it as another file and still upload it (PNG is blurry too). I’d appreciate any help you can give me (bearing in mind I am not very technically minded!).
Regards,
Jackie -
Hi Jackie,
Thanks for running that experiment. :) So now we know there’s something in the file creation that’s causing the blurriness. Honestly, I’m not all that familiar with using Microsoft Publisher for image editing. For something like this, I’d normally recommend a program like GIMP (free software often compared to Photoshop), or even Microsoft Paint.
Both of those programs will let you set an image’s dimensions, and then copy+paste elements into it.
My recommendation would be to first create your image’s background at the full size of 1102 x 350 pixels in one of those programs.
Next, open up your high-resolution book cover, and save it as a new copy. Scale that image down to a more appropriate size, but where it’s not blurry (and don’t make any more adjustments to its size other than this step.) Copy and paste that image on top of your 1102×350 background. Follow that for all your book covers.
This video may be helpful for learning to resize an image in GIMP:
https://www.youtube.com/watch?v=ak3MAowRPiU
Here’s one for paint:
Next, add your text.
Saving that as PNG either from Paint or GIMP will result in a great image, so long as scaling down your book covers didn’t appear blurry.
-Alex G.
-
Many thanks for all your help – I tried some of the other programs such as Canvas but the same happened, I was put off by GIMP as someone said it was hard to use -but I will have a go. I appreciate the instructions and links. :-)
-
Tried GIMP – just doesn’t work, resized image to fit into banner (on Gimp) and comes up blurry on website – clear as a bell on the PNG file from gimp. Any other ideas? – So frustrating!
-
I am wondering, too, why these images come up perfectly clear in the body of the webpage (in the blog) when I resize or compress the pictures, sometimes to quite small – which leads me back to something in the header that is causing the blurr.
-
Sorry for the deluge of emails – I hope you are enjoying Easter. I have a picture up that someone else did for me – could be that my computer is set to save JPEG as low resolution… it’s all a bit odd, no one else has this problem!
-
Hi Jackie,
Very sorry for the continued troubles, but I’m glad someone else was able to get clear picture setup for you.
It looks like you’ve uploaded a ton of new images to your media library. Was this the one that was ‘clear as a bell’ on GIMP?
The title of the image file intrigued me, because this looks very much like you had an image made in 960 x 250 pixels and then resized it to 1102 × 350 pixels, causing the blurry text. When you have text in an image, scaling it up will nearly always cause it to be blurry. Is the title just misleading and you did indeed make the image at 1102 x 350 pixels?
-Alex G.
-
Hi again! Thanks for your response – honestly, it is hard to remember, my friend suggested this size, I tried it – but nothing worked – I made the images smaller, larger – every size possible (as you can see) – GIMP did have a clear image when I created it, but blurry when uploaded – I am at a loss – I can only think it is something on my computer – frustrating as I need to be able to do this regularly and it seems I can’t – any suggestions welcomed!
-
Do you still have access to the image that is clear on your computer? If so, I’ll send you an email where you can attach the image for me and I can take look. Having access to the file will be helpful.
Because these media uploads really shouldn’t be making any changes to the file, just like how emailing an attachment doesn’t change that attachment. I have a feel we just need to figure out what’s making them blurry on your computer.
-
Yes, I’d have it somewhere. Thanks for this – I really appreciate you hanging in there with me! :-)
- The topic ‘yoko theme – blurry header image’ is closed to new replies.
WordPress.com Forums 