Why is my header fuzzy when I upload it?

[scrabblebabble]

I had a designer create my header for wordpress. It looks perfect when I upload it but then when I look at it as a preview, it looks stretched out and fuzzy.

It read:
Images of exactly 1000 × 288 pixels will be used as-is.

It told this to the designer and he said he made it fit that size. I know he did his part. I just don't know how to fix it. Any suggestions?

[jjykim]

Once it's been uploaded, it looks fine? What height and width specifications did you use for the image tag? Sounds like the image is being stretched.

Also, it makes a difference when you use a GIF/PNG vs JPEG because the latter tends to be compressed and shows up fuzzy depending on how much it's been compressed.

[Mowgli]

can you link it? I know we have rules of self promo but these technical problems are tough to evaluate without seeing it in action.

[Bill the Builder]

Or else place it in your signature.

Also check the banner required upload size. Sometimes the things get fussy and stretch banners to meet the wordpress banner size. I've had to place a banner on a background sized to Wordpress and then upload it to maintain its shapw

[lisa]

Yes, in this case it would OK to post the link or even in the signature as Bill suggested. (Go to Settings).

[scrabblebabble]

I'm currently editing my site in a wordpress folder with my current host. I can't really link it yet. I can take screen shots.

You can upload a custom header image to be shown at the top of your site instead of the default one. On the next screen you will be able to crop the image.
Images of exactly 1000 × 288 pixels will be used as-is.

Here's what happened. The image was too big. It had to be cropped.
MSE1.jpg
My designer made it smaller but it still didn't fit. Check next post.

[scrabblebabble]

So then I tried the second version.MSE2.jpg
I then tried to shrink it using picnik. Maybe that's why it got stretched???
The first pic fits the dimensions 1000 X 288.

If I try to go through the backround. It gets chopped up.

[Mowgli]

There's definitely a problem there. I sized it up and it was around 730 x 192 in the preview you attached. I'm guessing it is manually stretched on you theme's side. If you have chrome/chromium, update your theme(upload banner/save), right click your banner and go to "inspect element". See if it is resized via code.

[lambert22]

The easiest way I have found to prevent a graphic from becoming distorted by cropping or resizing after upload, is by creating the image in your photo editor in the size that you want/need it to be. That way there is no need for cropping or altering it in any way after upload.

If the space provided for your header by your Wordpress theme is 1000px X 288px, then a graphic created in that specific size in your photo editor should fit without having to alter it. Once you start playing around with it by cropping and/or resizing it, it will lose some of its quality and become fuzzy.

[esmconcepts]

Hi,
It still would be a good idea to post your site name, you have the blessing of the queen "Lisa".

My first thoughts are, how wide is your site layout (body)?

From what I see in your attached images, it seems to be restricting your header image with the crop handle on the right side. You could increase the size of your header area so that the header image does not need to be cropped or re-sized.

I totally agree with the other members who say an image that is auto-sized will get blurred and lose sharp details. Best to make it fit the area it is inserted into. This is especially true for a .jpg image.

You can look in your css file for HEADER or however it is named, then find the (width) setting and increase it by 100px or so. But this still might be an issue if it is fighting the body or content size.

Need to look at the site online to really tell you what your options are.

Hope it helps,
Steve

[esmconcepts]

OK, found your site (coffee was not working yet), seems you have the header image working.

There still might be issues with the H1 tag area above your header image. It has an area on the left called wsite-logo (website logo) and then the white spotted narrow bar to the right. I guess this would be filled by a logo image and also has a h-reference to your index (home) page. The home reference works (clicks), but there is no logo.

Nice site, I really like your reference to your grandmother and her advise from the Depression Era. Those days could come back at any time and the tricks for survival will be invaluable. Good niche, good topic, highly expandable for an ongoing subject.

If you have any more questions, just ask.

Steve

[scrabblebabble]

Keep in mind that the web is set to display best at 72dpi. Compressing a large piece of content through HTML tags (resizing it in our editor) is going to blur the image as it reduces in size.

Thanks for the info. I'll see if I can manage to do this.

[scrabblebabble]

OK, found your site (coffee was not working yet), seems you have the header image working.

There still might be issues with the H1 tag area above your header image. It has an area on the left called wsite-logo (website logo) and then the white spotted narrow bar to the right. I guess this would be filled by a logo image and also has a h-reference to your index (home) page. The home reference works (clicks), but there is no logo.

Nice site, I really like your reference to your grandmother and her advise from the Depression Era. Those days could come back at any time and the tricks for survival will be invaluable. Good niche, good topic, highly expandable for an ongoing subject.

If you have any more questions, just ask.

Steve

Thanks Steve,
I believe you viewed the site when it was still a Weebly site. It's still a little blurry. I probably shouldn't have made it go live yet. Oh well. I just have a big learning curve with WP and it's frustrating.

[esmconcepts]

Hi,

OK, I pulled your site up again, it's, shall we say, out of shape.

The layout for the main content and the right sidebar are out of whack. Basically, the content is over riding the whole body space and that kicks the sidebar down and under the content area.

When you say its frustrating, I know what you mean, been there, done that. The good news is, we can fix it.

There are two ways. I can post the needed information and changes that need to be made to the css file and maybe some other code issues, then you can do the editing inside you admin area to the files as required. It might take a few post back and forth, to get it tweaked the way you want.

OR, you can create a new user with admin privileges (ME) and I can make the changes needed to get it back in order. then also fix or customize any settings or display issues you might want. When I'm done, you delete (ME) as a user.

I notice you are using a free WordPress theme also, we can discuss this as needed. Also, the free themes main site is in German. Ich glaube nicht lesen oder schreiben Deutsch. Do you?

I am willing to help you get your site in order mainly because you are a teacher. An honorable profession. You have to learn before you can teach. As I said before, your site's main topic is COOL. I can help get it up and running, then you go to work adding content and make it prosper and excel.

So, what do you think? The cost is the same either way: FREE! If you go the admin new user path, we will need to communicate with PM's (personal messages) for reasons of security, aka, passwords etc.

The end cost to you is: You have to thank Lisa for providing the forum. I leave it to you, Lehrer.

Steve

[scrabblebabble]

The easiest way I have found to prevent a graphic from becoming distorted by cropping or resizing after upload, is by creating the image in your photo editor in the size that you want/need it to be. That way there is no need for cropping or altering it in any way after upload.

If the space provided for your header by your Wordpress theme is 1000px X 288px, then a graphic created in that specific size in your photo editor should fit without having to alter it. Once you start playing around with it by cropping and/or resizing it, it will lose some of its quality and become fuzzy.

Good to know. Thanks.