WordPress.com Forums » Topic: Animating/improving header image quality?

benji1974 on "Animating/improving header image quality?"

benji1974 — Sun, 07 Oct 2007 00:31:28 +0000

I have no problem with quality or animation of the header at: http://videogazette.wordpress.com

File size is 153 kb.

All you have to do to get any animated gif to work in the header is to have the dimensions of th image exactly what the header calls for so the crop doesn't have to take effect because that will ruin the animation sequence. Cropping effectively works on a single frame only and WordPress will ignore the rest. Hope this helps.

virpioinonen on "Animating/improving header image quality?"

virpioinonen — Thu, 17 May 2007 20:08:26 +0000

Check out the header pic at: http://otus.wordpress.com/
Filesize is around 18 kb. I just deleted the pic in my old blog so now you just have to take my word that the pic I uploaded earlier was indeed crisp and clear. :(

drmike on "Animating/improving header image quality?"

drmike — Thu, 17 May 2007 19:41:47 +0000

File sizes in kb and some links to what you're seeing would help.

virpioinonen on "Animating/improving header image quality?"

virpioinonen — Thu, 17 May 2007 19:32:13 +0000

I've been having the same problem with header picture quality as mentioned in the beginning of this thread. Because I have two blogs on WordPress I've been able to do some comparative custom header research: the same header pic I uploaded to my older blog some 8 months ago(?) looks just fine whereas the same pic in my new blog looks all grainy. Uploading it as gif, jpeg or png -format doesn't affect the pic. The same problem persists also when using different templates.

Any advice?

sussexmuddyarse on "Animating/improving header image quality?"

sussexmuddyarse — Sun, 18 Mar 2007 12:15:49 +0000

Thanks I will try changing the transition pics...I managed to optimise the file and get it down to around 700kb from 1.2mb, so hopefully I can get it smaller.

ryannjenn on "Animating/improving header image quality?"

ryannjenn — Sat, 17 Mar 2007 21:05:31 +0000

I have been playing around with the animations also. Those 5 pics in between each image kill the filesize. My advice would be to reduce the quality of those transition pics (since they are only up for a small amount of time and only for transition) or try it without the transitions.

I went from 2 main pics with 5 on each side for transition and upped it to 10 on each side and it doubled my filesize.

sussexmuddyarse on "Animating/improving header image quality?"

sussexmuddyarse — Sat, 17 Mar 2007 20:03:24 +0000

Just noticed your link ryanjenn, thanks :) I tried using the gif animator to optimise but it only made a small difference to the file size for a big loss in quality, but i have Picassa installed so will try it on that.

sussexmuddyarse on "Animating/improving header image quality?"

sussexmuddyarse — Sat, 17 Mar 2007 19:58:51 +0000

Timethief...I had a look at your link but that's not what I've done. Mine is just an animated gif so doesn't require any script or PHP fiddling.

My gif is made up of three pics...60 seconds for each photo, then 5 pics 20th of a second long using varying amounts of transparency to merge to the next pic. Definitely an animated gif...I could just as easily create a stick man running across the page.

I assume the method you refer to would create a much smaller file, but I believe I'd have to pay to get customisation etc to get it to work? Plus I haven't a clue where to start with PHP etc!

ryannjenn on "Animating/improving header image quality?"

ryannjenn — Sat, 17 Mar 2007 19:44:34 +0000

An animated GIF is rotating still images. You can adjust the rotation speed of each frame, turn on and off the layers (or pictures) you want to show during each frame, and add "tweeners" to make even slow transitions between images to smooth it out. I went into Adobe Photoshop/ImageReady and made one myself and tried it out on a private blog I have and it worked great sussex. Thanks for the tip.

timethief on "Animating/improving header image quality?"

timethief — Sat, 17 Mar 2007 19:38:17 +0000

I went back and tried it out again. Yes your header does change every 60 seconds. That means you have "still images" being presented every 60 seconds as rotating still image headers.

As for "animation" well that's a different story, isn't it? I thought you were talking about "animated images". - lol - I think we can safely presume that we are talking about two very different things.

http://en.forums.wordpress.com/topic.php?id=5626&page&replies=14#post-36298

timethief on "Animating/improving header image quality?"

timethief — Sat, 17 Mar 2007 19:15:52 +0000

I'm glad to hear it works. Perhaps I just didn't hang in long enough to see it do so. Thanks for sharing. :)

ryannjenn on "Animating/improving header image quality?"

ryannjenn — Sat, 17 Mar 2007 19:10:58 +0000

You may want to check this out and some of the links at the bottom to optimize the individual pictures of that gif for those on slower connection speed. GIF's dont have the compression that JPG's have I believe, but that still is a pretty big header size.
http://faq.wordpress.com/2006/05/08/optimise-your-images/

sussexmuddyarse on "Animating/improving header image quality?"

sussexmuddyarse — Sat, 17 Mar 2007 18:57:56 +0000

I used Ulead GIF Animated 5 from CNET.com, 15 day trial. Had trouble getting the file size down...its over 1mb as it is!

ryannjenn on "Animating/improving header image quality?"

ryannjenn — Sat, 17 Mar 2007 18:56:04 +0000

I see it in Firefox 2.0.0.2 on win xp and it is animated but every minute it changes background photos. Nice job!...as i head back to photoshop and try it myself :)

sussexmuddyarse on "Animating/improving header image quality?"

sussexmuddyarse — Sat, 17 Mar 2007 18:54:06 +0000

No its the one linked to my username...it does only change once every 60 seconds as I didn't want to annoy visitors...

If it still doesn't work for you let me know! Thanks

timethief on "Animating/improving header image quality?"

timethief — Sat, 17 Mar 2007 18:40:34 +0000

My remark was based on my own past experience based on working with a blog theme that had not been css customized.

I'm presently looking at the blog linked to your username. It's in the Contempt theme and does not appear to be css customized. The header I'm viewing via a firefox 2.0.0.2 browser does not appear to be animated. Are you referring to another blog? If so please provide the url.

sussexmuddyarse on "Animating/improving header image quality?"

sussexmuddyarse — Sat, 17 Mar 2007 18:32:37 +0000

So don't bother trying to use animated gifs in headers.

Ho hum...

Keeps quiet and hope no one notices my success then :-)

(Only changes once every 60 seconds so you'll have to watch for a while...don't grass me up!)

timethief on "Animating/improving header image quality?"

timethief — Sat, 17 Mar 2007 16:28:21 +0000

We cannot at this time have animated headers although if you use the forum search box you will find they have been requested. So don't bother trying to use animated gifs in headers. They will work on pages, in posts and in text widgets but not in headers.

ryannjenn on "Animating/improving header image quality?"

ryannjenn — Sat, 17 Mar 2007 15:25:13 +0000

There is this one regarding where the image is hosted:
http://en.forums.wordpress.com/topic.php?id=5796&page&replies=5#post-37445

Might be due to the fact that headers have to be uploaded to the wp servers and other images can be hosted elsewhere.

drmike on "Animating/improving header image quality?"

drmike — Sat, 17 Mar 2007 15:17:09 +0000

I remember in the back of my mind another thread about animated gifs being a security issue but I can't find it right off.

raincoaster on "Animating/improving header image quality?"

raincoaster — Sat, 17 Mar 2007 11:41:21 +0000

I don't use uploaded headers, but I do post animated gifs in my blog and they work just fine, if that helps. They're hosted at Photobucket, though.

sussexmuddyarse on "Animating/improving header image quality?"

sussexmuddyarse — Sat, 17 Mar 2007 10:47:16 +0000

Sorry about dragging the thread up from the depths, but did anyone have any luck with using animated gifs as headers? Don't want to spend all morning installing the releveant programs and messing with MS Paint if its not going to work!

My headers are correctly sized before uploading so I it didn't go through the cropping process.

sulz on "Animating/improving header image quality?"

sulz — Sat, 15 Jul 2006 05:52:23 +0000

I've commented several times that there ought to be a way to skip the crop tool if your header is already sized appropriately. However I seem to be a lone voice on that...

well, this is the first i've seen and i think it's a great idea. you should put forward your suggestion here -

http://wordpress.com/forums/topic.php?id=2860&replies=9

podz is keeping tabs on that thread so that way you know the right person would be reading it.

timethief on "Animating/improving header image quality?"

timethief — Sat, 15 Jul 2006 02:24:02 +0000

@jb510
If you really think this is a non-negotiable theme feature that should be avaialble on any theme then you can add it to this thread here http://wordpress.com/forums/topic.php?id=2859&page=2&replies=34
previous to Andy creating the cropping tool the only theme that could be customized as far as inserting a header goes was regulus.

@veltis
If you really think an animated header in some of the themes with huge headers (eg.Benevolence and presumably Ambiru) such as slow dissolving slideshow or such is a non negotiable feature then the thread to add your request to is as above.

jb510 on "Animating/improving header image quality?"

jb510 — Sat, 15 Jul 2006 02:04:52 +0000

I've commented several times that there ought to be a way to skip the crop tool if your header is already sized appropriately. However I seem to be a lone voice on that...

veltis on "Animating/improving header image quality?"

veltis — Fri, 14 Jul 2006 19:28:10 +0000

jb510, I think you're right. Works in Regulus, because it doesn't crop. Thanks! Pity though, would be very cool to be able to have a animated header in some of the themes with huge headers (like Benevolence). Not the headache-inducing test that's on rubbergum right now, but rather a slow dissolving slideshow or such.

jb510 on "Animating/improving header image quality?"

jb510 — Fri, 14 Jul 2006 17:47:50 +0000

I would bet the header cropping routine is trashing the animated gif. You might try using an animated header on the Regulus theme which doesn't use the cropping routine (I think, I've never actually used Regulus so tell me if I'm wrong).

veltis on "Animating/improving header image quality?"

veltis — Fri, 14 Jul 2006 16:58:11 +0000

Oh yeah, the example animated header test (with original file as a post) is on http://rubbergum.wordpress.com NOT on my other blog(spongefile). Have played with it more, and still no luck. Did someone get this to work on their blog?

veltis on "Animating/improving header image quality?"

veltis — Fri, 14 Jul 2006 06:51:28 +0000

I cropped the pics to size in Illustrator, but maybe they're getting resized somewhere along the way. Quite possibly the quality of pic issue is just something that's going wrong on my computer, not on WP, since I did get one gif loaded grain-free. Sorry about that.

Now I just have the animation question left (want to do a simple slideshow), and actually, along those lines, am also wondering is an image map/rollover possible? Don't need it, just exploring options.

timethief on "Animating/improving header image quality?"

timethief — Fri, 14 Jul 2006 04:11:32 +0000

veltis - I'm using the same method as sulz. The measurements are:
Ambiru 500*225
Benevolence 700*225
Blix 690*115
Connections 741*143
Contempt 750*140
Neat 700*200
Regulus 730*140
and Podz will be entering them into the FAQ.