Post #74

Be nice to sheep

16th December 2003, late at night | Comments (44)

Screen shot of the sheep within the graphics package used to make them

Well, after an impassioned email from Kirstin, I’ve made a few changes to the panorama graphics here, I hope they please the animal-lovers amongst us:

  1. The sheep now go to bed at night, lying down in a huddle to protect themselves from wolves;
  2. When it rains heavily, or snows at night, or if there’s a thunderstorm, then the sheep shelter by the hedge;
  3. The sheep now alternate their positions in the field every other day (so they get some exercise).

And good news for those of us on dial-up: this time I’ve exported all the images as JPEGs, rather than PNGs, and saved 40% (4.63MB) in total file sizes as a result. There’s a slight dip in quality, but I don’t think you’d notice unless you had the old and new versions side by side.

The bad news (for me anyway) is that I now have to produce ninety images to make the site work.

Yes, ninety.

Yes, I know, it is madness.

Oh well…

BTW, I searched long and hard to find a way to optimise my PNGs, but, despite Dave and Mark having been on similar quests before, I wasn’t able to find an acceptable, friendly solution that really made a difference. If anyone knows of anything not mentioned in those two posts, I’d love to know about it.

Jump up to the start of the post ↑

Comments (44)

Jump down to the comment form ↓

  1. Roman:

    No mention of Santa?

    Posted 7 minutes after the fact
    Inspired: ↓ Dunstan
  2. Dunstan:

    I was seeing if people noticed him :op

    Posted 9 minutes after the fact
    Inspired by: ↑ Roman
  3. Stuart:

    Ninety images? NINETY? I had to find five images and a background when I redesigned, and it was the hardest part. And I'm still not happy with any of them. You're a nutter. :)

    Posted 43 minutes after the fact
    Inspired: ↓ Dunstan
  4. Dunstan:

    I know! :oD

    And I can't think of any way to get around it all... it's taken a couple of days to get it all sorted out, and it's painfully slow.

    I have 86 layers in my Photoshop document, and 76 layers in my XaraX (vector) document.

    It's no simple thing this, I tell you :o)

    Posted 54 minutes after the fact
    Inspired by: ↑ Stuart
    Inspired: ↓ Ethan
  5. Marq:

    Working hard works. I guess. Although, not being totally sane helps, too.

    Posted 1 hour, 16 minutes after the fact
  6. Ethan:

    Did pngcrush not work for you, Dunstan? Haven't tried it myself, but I've heard some great reviews; I'd be interested to hear what yours are.

    And yes, you're definitely a nutter.

    Posted 1 hour, 26 minutes after the fact
    Inspired by: ↑ Dunstan
    Inspired: ↓ Dunstan, ↓ Dunstan
  7. Dunstan:

    Well, I simply don't understand how to make a command line program (as pngcrush is) work on my desktop PC.

    I know how to get a command window up in Windows, but I'm stumped beyond that, and I couldn't follow the very short instructions in the help file :o(

    If anyone knows how to get it working, I'd love to know :o)

    Posted 1 hour, 29 minutes after the fact
    Inspired by: ↑ Ethan
    Inspired: ↓ Dunstan
  8. Dunstan:

    Ah, Mr Ethan very kindly held my hand and walked me through the whole command line process.

    I found I got a 5.9% reduction on the larger images using pngcrush, so for now I'll stick with my JPEGs.

    Posted 2 hours, 10 minutes after the fact
    Inspired by: ↑ Ethan, ↑ Dunstan
  9. Dris:

    Dunstan, you never fail to make me laugh. From the Naked/Super Dunstan technologies logo to "Hug the Cookie Monster" to the sheep in that weather image... Accordingly, you're a nutter. :)

    By the way, Kirstin, how very observant. Would you happen to be a shepherd?

    Posted 7 hours, 46 minutes after the fact
  10. Authgeek:

    Your banner is just about the coolest website banner I have ever seen.

    That is all.

    Posted 8 hours, 10 minutes after the fact
  11. Ernie:

    What? All this extra effort for sheep? :)

    Posted 9 hours, 10 minutes after the fact
    Inspired: ↓ Dunstan
  12. Dunstan:

    Ernie - never under-estimate the power of the sheep-fanciers movement... I'm probably in their good books right now, while you'll be targeted by shepherds from all over the world for that heartless comment ;o)

    Posted 11 hours, 11 minutes after the fact
    Inspired by: ↑ Ernie
  13. McChris:

    I can almost here the sheeep bleating from here ... wheres my wellies????

    Posted 13 hours, 52 minutes after the fact
    Inspired: ↓ Dunstan
  14. Dunstan:

    Excellent thinking Chris - optional sound effects ;o)

    Posted 13 hours, 56 minutes after the fact
    Inspired by: ↑ McChris
  15. Marten:

    What about setting up a server side script as to randomly generate a new image with new sheep locations every day?

    It also might be a nice touch to have a sheppard in there once a week or so. And coming summer, they of course should all be shaven someday :)

    Posted 15 hours, 51 minutes after the fact
  16. S T E F:

    You *are* nuts.

    But I love that kind of craziness. That's inventive. I'm always looking for fun things, just to show people that the web is not only zero's and one's, but it's mostly people and communication, both visual and er (what's the adjective for "message"?).

    Anyway. You're nuts. :-)

    (although, don't you ever have something useful to do like washing up or something? ;-))

    Posted 16 hours, 10 minutes after the fact
  17. Sian:

    Yay and a Santa :) what about some cows?

    Posted 19 hours, 15 minutes after the fact
    Inspired: ↓ Dunstan
  18. Dunstan:

    We don't have cows, sorry :o/

    Posted 19 hours, 17 minutes after the fact
    Inspired by: ↑ Sian
  19. David House:

    About the Command Line thing:
    1) Open Command Prompt (or restart in DOS)
    2) type 'cd "path/to/program.exe x"' where x is a space-seperated list of parameters. For example, in my C++ compiler, the first parameter was the path to the .cpp file I wanted to compile.

    HTH!

    Posted 19 hours, 23 minutes after the fact
  20. P01:

    Dunstan: Nice subtle enhancements. It's nice to see the sheeps haing a life.
    To use PNGCRUSH, you simply have open a dosbox and type :

    pngcrush source_image.png crushed_image.png

    and voilà. You should gain many bytes on your images, but I'm sure if they'll be smaller than in JPG.

    Posted 19 hours, 47 minutes after the fact
  21. Tony Crockford:

    Did you try ignite for your png compression?

    it'll take a native psd file and give you a lot of fine control over the outputs. (I'd even bet on you getting smaller jpg's too) for gif images image ready is the best, but try ignite - it's free (almost): http://www.ignite-it.co.uk

    ;o)

    Posted 21 hours, 56 minutes after the fact
  22. Dris:

    That reminds me, I had an idea for a design that would be littered (in a somewhat orderly way) with tiny pixel people doing their thing. I never thought about applying the current weather and time into it... I'm inspired!

    Posted 22 hours, 42 minutes after the fact
  23. Matt:

    For what you're doing JPEG is probably best, but the new version of Photoshop (CS) now consistently gives me smaller sizes for PNGs then it does for GIFs, so just as a matter of practicality I'm saving most of my simple things as PNGs now.

    Posted 23 hours, 53 minutes after the fact
  24. Kevin:

    And here was me thinking my random header image looked half decent.

    I bow in the glory of your far superior coding skills (I am not even half amateurish) and your unending patience.

    I am now off to sit in the corner like a boy recently thumped at conkers, even though his was a bully 42.

    Posted 1 day after the fact
  25. Eduardo:

    Can you tell me where's the weather.com XML feed?

    I've been waiting for this think for years.

    Posted 1 day, 16 hours after the fact
    Inspired: ↓ Dunstan
  26. Dunstan:

    It's stupidly hard to find:
    http://registration.weather.com/registration/xmloap/step1

    Though there are plenty of free XML weather feeds out there, you're not limited to weather.com

    Posted 1 day, 17 hours after the fact
    Inspired by: ↑ Eduardo
    Inspired: ↓ Eduardo, ↓ Jamie
  27. Eduardo:

    Ok, thanks. I hope never need help from you again (don't like people telling me I'm an idiot)

    Posted 1 day, 18 hours after the fact
    Inspired by: ↑ Dunstan
    Inspired: ↓ Dunstan
  28. Dunstan:

    Eh? I'm not calling you an idiot.

    I'm saying that it's 'stupidly hard to find' - that means they have made it harder to find than they should have done.

    They are stupid. Not you.

    Posted 1 day, 18 hours after the fact
    Inspired by: ↑ Eduardo
    Inspired: ↓ Eduardo
  29. Eduardo:

    ohh, sorry. I misunderstood your post.

    Merry Christmas!

    Posted 1 day, 18 hours after the fact
    Inspired by: ↑ Dunstan
    Inspired: ↓ Dunstan
  30. Dunstan:

    :oD

    You too, Eduardo!

    Posted 1 day, 18 hours after the fact
    Inspired by: ↑ Eduardo
  31. Eduardo:

    In the topic of the sheeps:
    Maybe it easier (at least fewer images) if you put a picture in the background and add individual transparent GIF (or PNG) images of sheeps, clouds, etc., in top of that.

    This way you can change the position of the sheeps, without needing a new image.

    what do you think?

    Eduardo
    Argentina

    Posted 1 day, 18 hours after the fact
  32. Scottbp:

    While I do love your banner, 90+ images?
    OY gevalt!
    Me, I would have embraced flash. Seems to be the perfect place for that...
    On the subject of sheep though, very cute...

    Posted 2 days, 2 hours after the fact
    Inspired: ↓ Dunstan
  33. P01:

    just my 0.02€

    Eduardo: For sure Dunstan could compose the header image "live" but it would alter the markup which he may not be ok to do.

    Dunstan: I noticed your night and day CSS takes ~10Kb. Wouldn't be better to use a PHP file reading the weather XML feed to build the CSS ?

    Posted 2 days, 3 hours after the fact
    Inspired: ↓ Dunstan
  34. Dunstan:

    Good point Po1: I have split the css files up and got PHP to print out a link to the correct one, so that saves some size, but I'll look in to making that print out even more specific.

    However, I don't know that writing a new CSS file to disc each time a page loads would be a good idea...

    Posted 2 days, 11 hours after the fact
    Inspired by: ↑ P01
  35. Dunstan:

    Scott - for some reason Flash never occured to me, which is daft because, as you say, it seems like the perfect thing to use here.

    I guess the only problem would be that of file size... oh, and of course that I'm a bit of a duffer with Flash - I've made some things, but never really got in to it.

    But with Flash, things could move... oooh... I will think further on this!

    BTW, Scott, you and Erin have a funny site :op

    http://www.worldwithoutshrimp.com/archives/000073.php

    Posted 2 days, 11 hours after the fact
    Inspired by: ↑ Scottbp
  36. P01:

    Dunstan: I rather thought to remove the class attribute in the "scene" DIV and replace the

    <style type="text/css" media="screen">@import "/blog/include/day.css";</style>

    by

    <style type="text/css" media="screen">@import "/blog/include/headerCssRuleBasedOntheWeatherXmlFeed.php";</style>

    Where headerCssRuleBasedOntheWeatherXmlFeed.php is a PHP script that loads/reads the weather XML feed and simply output the appropriate CSS rule. That way you'd move the code handling the XML feed from the page themselves to the CSS, so the only impact it would have is to lower your bandwidth usage since the CSS would drop from ~8kb ( for night.css ) to few bytes.

    Do not hesitate to contact me if you think I can be of any help.

    Posted 2 days, 11 hours after the fact
    Inspired: ↓ Dunstan
  37. Dunstan:

    Are you allowed to @import something other than a .css file then?

    If so, perfect and thank you!

    It just never occured to that that was allowed... good thinking, sir :o)

    Posted 2 days, 12 hours after the fact
    Inspired by: ↑ P01
    Inspired: ↓ P01, ↓ Simon Willison
  38. P01:

    Dunstan: yes, you can @import a PHP file, but don't forget to set the text/css MIME type in the PHP script because Mozilla seems to check if the type of the imported files match the one set in the style tag.

    header( "Content-type: text/css" );

    Cheers,

    Posted 2 days, 14 hours after the fact
    Inspired by: ↑ Dunstan
  39. Doug:

    This is truly an awesome effect. Any tips on how a newbie could do something similar? I can program PHP in a clunky, amateurish kind of way, but XML is new to me. I've skimmed through the page at http://us3.php.net/xml, but it's a bit overwhelming.

    P.S. I found your site through http://chrispederick.myacen.com/blog/archive.php?archive=2003_12_01_index.php#post107146304528384824

    Posted 2 days, 14 hours after the fact
  40. Simon Willison:

    One potential problem with this technique is that browsers (IE in particular) tend to hang on to CSS files like a limpet, caching them no matter what you tell the browser to do. You may find that some browser's keep on usingb the CSS file they were originally served up, meaning the image won't change for them.

    Posted 2 days, 17 hours after the fact
    Inspired by: ↑ Dunstan
  41. P01:

    Oh la la, I somewhat went crazy with my idea of PHP-CSS, there is a more conventionnal way that simply consist in using a PHP script as background-image X__X

    Simon: At least it's possible to limit the number of occurence where stupidly IE caches the image by setting the right HTTP headers. But I know IE always behave like crap when it can. Whatever the CSS in IE is already partially screwed up. ( cf: the illustrations in the entries and the alignement of the container DIV )

    Posted 2 days, 20 hours after the fact
  42. Phillip Harrington:

    I'll add another vote for "Sheep need a Shepherd."

    Posted 3 days, 1 hour after the fact
  43. Jamie:

    Do you get data about the phases of the moon from weather.com as well? It could be just that it's hard to find, but when I looked I couldn't find it...

    Posted 1 week, 2 days after the fact
    Inspired by: ↑ Dunstan
    Inspired: ↓ Dunstan
  44. Dunstan:

    No, that's calculated using a PHP script - because the moon passes through consistant phases, you only need to know when to start off the calculation process (ie. prime it with the date of a known full moon) to calculate future mooon behaviour.

    Posted 1 week, 2 days after the fact
    Inspired by: ↑ Jamie

Jump up to the start of the post ↑

Add your comment

I'm sorry, but comments can no longer be posted to this blog.