Preserved Topic: The Asylum 5K Challenge! (Page 1 of 2)

Ok folks, it's off and rolling. I have the distinct honor to introduce this months theme...Graphics!

A short explaination of the rules - the entries must be 5K or less (that's 5 kilobytes)....and SSI (server side includes) are not allowed. The rest is up to you!

The challenge runs for one month...so you have a bit of time to think up something interesting...and to make and test it!

At the end of one month, a winner will be decided (either by popular vote, or by the mods here...if we get more mods here, that is...or how do you see this?). Then the winner posts the next months theme...(if everybody is ok with this...)...give some input on this...we are just getting started!

This months theme....Graphics! Everything and anything to do with Graphics! That means, that your 5K idea must contain at least 1 (one) graphic in it...this can be a pic, a created graphic, etc. What you do with it is up to you. How it is displayed (and yes, it must be visible!) is up to you. So get crackin'! Yeeehaaaw!

[This message has been edited by WebShaman (edited 05-31-2002).]

OK, this is cool, so I thought I'd mention a few things that helped in terms of this...

• Resizing a GIF way beyond what it's supposed to gives that neato-keen "block" look, much fun to be had there.

• GIFs can be compressed best if they consist of same color bands running *horizontally*. For this reason, I usually run a motion blur on any gradients (top to bottom blends) with the motion going right to left, at 200 pixels. (You can save 70-80% in file size this way!)

• Someone pointed out in my first effort towards this that you could do a grphic at half width and then use width= to make it bigger again, the results were pretty good.

Any other tips? I'd like to see other people post any ideas they might have (general ones, don't give away your cool idea right away!), but instead more general tips for how to get the most mileage from tiny K images. This ought to be fun, but with the "graphic" category we've entered the most difficult arena, this ought to be interesting.


Your pal, -doc-

Well, just an obvious one...that two color .gifs can be made really tiny...and still suggest another color (put yellow and blue together...green!)...and you now have three colors, for the space of two...this, of course, is an optical illusion, but one that can be used to create an effect (or color) that actually isn't there...and you can save space, to boot!

Thanks for the tips, Doc! Any ideas on how to 'judge' the stuff? A popular vote? A panel of 'experts,' or mods? With criteria (smallest, best viewed (through many diferent browsers, for ex., )? Subjective (very nice effect/idea/whatever)? A combination of them all?

Or do we wish to drop the 'judge' stuff altogether? I see one vote for dropping it...ok, with my vote, that makes two...

Keep those tips acomin'! And get those fingers on a keyboard near you now! What's that? I hear your brain screamin'! Wooohooo!!!

[This message has been edited by WebShaman (edited 05-31-2002).]

WS: I kind of thought that this was going to be uncompetitive (after all if you've posted early you should have got quite a lot of feedback) - although if the forum mods want to make honourable mentions at the end then that would be cool.

Graphics eh? Well I'll try and come up with something interesting.

[edit: I've now added some subtopics on optimization -the graphics one is here (and there are ones opened for HTML and JavaScript):
http://faq.ozoneasylum.com/FaqWiki/shownode.php?sortby=rating&id=501
feel free to throw in any good ideas and tips.]

___________________
Emps

FAQs: Emperor

OK this may be a stupid question but . . .

When it comes to "Graphics" does that mean a page with graphics or can we do something funky with them kind of like what Doc did with his 5k page?

Later,
C:\


~Binary is best~

my first attempt at a 5kb site
http://www.unitedrealms.com/layout1.htm

total size 1.13kb

I have a question does the image files count so should I add that to the total size of the file or is it just the .htm file that counts?

I've never done these 5kb sites before

hmm never finished this but I think it's under 5K
(if not I could easily make it fit)


What's the rule on browser compatibility?



.:[ The Tao of Steve ]:.
Be Desireless
Be Excellent
Be Gone
...................................

CPrompt: I think anythng that fits the term 'Graphics' will be cool.

RammStein: Everything counts towards the 5k.

___________________
Emps

FAQs: Emperor

Emps .. oh well .. back to the drawing board .. one of my graphic files is 20kB

scratching his head .. it says one thing .. but then says another size .. fuck it




[This message has been edited by RammStein (edited 05-31-2002).]

This should be fun..

A litle short question I want answered. Does vml count as graphic? Should be fun to create something with that

_________________________
Anyone who has lost track of time when using a computer knows the propensity to dream, the urge to make dreams come true and the tendency to miss lunch.
- copied from the wall of cell 408 -

RammStein (and anyone else): I presume we are following the rules on the 5k site at least until we throw in our own little twists.

Veneficuz: I can't see why not as long as we can be sure that we can get an appropriate measure of a file's size in all browsers (which is why server-side coding could be used in a naughty way to serve up different versions to different browsers - here it is cross-browser or nothing!!).

Any the mods can decide on the small details and problems as they crop up.

___________________
Emps

FAQs: Emperor

Emps: Should we start up a topic such as the one in PSPong about the rules? I think this would help sort out some of the questions and keep the threads alive with submissions. Just my thought.

Also, need some help on shrinking the file size of some graphics, is it ok if I get help in the PS forum

Later,
C:\


~Binary is best~

CPrompt: I suspect the section WS started in the FAQ should be the place to go from now on - if you have any content for it then feel free to throw it in (better than refering people to the 5k web site.

___________________
Emps

FAQs: Emperor

Yup to all questions...'Grapics' entails a big area...that's one of the reasons I chose it...so do what ever comes to mind, as long as it invovles graphics...if ya want'em to move, then do it!

I feel that the 5K sites should also be cross browser...

The FAQ is, as Emps suggested, the best place for the rules...

I think this is a great idea...big thanks to the Doc, and Ini, for getting us interested...so let's get crackin'!

Doc, (or anyone), what did you mean by:

quote:

---

GIFs can be compressed best if they consist of same color bands running *horizontally*.

---

What about acutal photographs that were taken with a digicam? Any tips on getting those down in file size?

Later,
C:\


~Binary is best~

My 5k site..

the spot! -- Simple, efficient, and GREAT stress relief! (Homage to The Big Red Button that dosn't do anything.)




'Me no here. Me go bye. Leave me message. Me reply.'

Wolfen's Sig Site

C:\

It all has to do with the compression algorithm for GIF's.

A 6*6px gif that consist of a black to white fade top to bottom would be GIF-compressed to something like:
Row 1: 10*#000000
Row 2: 10*#333333
Row 3: 10*#666666
Row 4: 10*#999999
Row 5: 10*#cccccc
Row 6: 10*#cccccc

All-in-all 60 chars of information for the whole pic, since the algorithm takes the color pixel and adds a factor (the number of horizontally continious pixels in the same colour)

and so on.

if the transition was left to right it would be:

Row 1: #000000, #333333, #666666, #999999, #cccccc, #ffffff
Row 2: #000000, #333333, #666666, #999999, #cccccc, #ffffff
Row 3: #000000, #333333, #666666, #999999, #cccccc, #ffffff
Row 4: #000000, #333333, #666666, #999999, #cccccc, #ffffff
Row 5: #000000, #333333, #666666, #999999, #cccccc, #ffffff
Row 6: #000000, #333333, #666666, #999999, #cccccc, #ffffff

Which makes 282 chars of info for the file. Since gif compression works in a horizontal plane, you need a description of every singel pixel in the picture.

This of course is a coarse way to show how the compression works.

Nimraw, thanks for that. So in use of a gradient, the top to bottom would compress in a smaller file since *.GIF's work in a "horizontal plane"?

Later,
C:\


~Binary is best~

[growling at his computer]

only ONE of my files is not shrinking in size .. and it's pissing me off! .. LOL .. I guess I'm just going to have to take that graphic out and put in some text! .. grrrrrr

I know what you mean Rammstein. I only have one graphic that I really want to include but . . . whatever! Have to find something else to do.

Graphics is very hard to include in a 5k webpage(site) !!!!!!!!!!!!

Later,
C:\


~Binary is best~

I had already started this project as an OO version of xeyes (seen somewhere on the web).
Each eye is an object that has a pupil that tracks the cursor.
Each face is an object that has 2 eyes.

I saw the 5k thing and optimized it but tried to still keep it cross browser.
It doesn't do anything usefull.

Eyes

index.html 2523
face.gif 587
pupil.gif 70
================
total 3180

Thats really good RoyW. I am still trying to figure out something to do. Man I'm pathetic

Later,
C:\


~Binary is best~

Roy W: Thats really nice work - how many of those faces can you have before you reach the 5k limit?

Like CPrompt I'm struggling for inspiration - graphics? Damn you WS ~shakes fist~

___________________
Emps

FAQs: Emperor

Great work RoyW!

Same problem as Emps and C:\, haven't got a clue as to what to do with the 5k...

_________________________
Anyone who has lost track of time when using a computer knows the propensity to dream, the urge to make dreams come true and the tendency to miss lunch.
- copied from the wall of cell 408 -

Well at least I'm not the only one strugling. Getting a graphic down in size to use in a cool way under 5k is like maddening!

Later,
C:\


~Binary is best~

I am not really a graphic person so drawing circles was easy .
Emperor - according to the rules at the5k.org you can re-use the same image as many times as you want. The size is the size that the files occupy on the server. That is why SSI is not a good idea, you could create a 1k .php file that creates a 20k HTML file. The way to judge the size is to download all the individual components and add up the space they take on your disk drive
(well at least thats my interpretation)

well I'm back at the drawing board .. I thought my black and white graphics would save me on file size .. but like I stated above only one of my files doesn't want to compress .. so I'm back to square one .. need some more inspiration

cEll .::. 513

Yup...that's a really nice page you got there RoyW...and of course, those rules are correct...very nice, indeed...

So to those of you applying *cough* 'words' before and after my name ...just take advantage of the rules...like RoyW...

On with the challenge!!!

Crunch them, twist them, squeeze them...until they fit...dontcha just looove graphics?


[This message has been edited by WebShaman (edited 06-07-2002).]

quote:

---

So to those of you applying *cough* 'words' before and after my name

---

huh???

Later,
C:\


~Binary is best~

Ok, after seing that WS was a forum leader for this forum I just had to read this, so its like sig contests only with 5k webpages! Thats a grrrrreeeeaaatt idea!

No worries CPrompt...that was just a little kidding around because of the Topic...graphics...and how fustrating it can be to get them small enough for a 5k page...

Which is a great exercise for optimizing graphics...which then leads to faster load times...

So to all at this point - good work, and keep it up! Strain that brain!

Ok participants! It's now middle of da month! Just two weeks left!

Get your brain in gear, and move that rear!

Let's see whatcha got!

My pathetic IE-only effort of a <5k page on the theme "image"...

It's 1 761 byte, w/o any tricks. I was aiming to animate it all, but then it kills my 1.7 Ghz P4...
I could sure use some pointers on efficient code

anyways, here ya go: http://www.dmsproject.com/test/5k/dms.html

/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-

Wow...coolness. Me likes...

Sorry, I can't give you any 'real' tips on code optimization...but maybe Ini, or Doc can...they are both pros in that area...

I decided to play a bit more on the graphic theme by code
(not even in the same state skillwise as Slime and Ini, but it's my first tries and it's fun).

Here is some "odd" perspective images generated slightly different depending on browser size.

it's 1,36 kB (1 394 byte)

Here ya' go: http://www.dmsproject.com/test/5k/dms2.html

/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-

Well, figured I'd try my hand in here. Nothing as technical or as awe-inspiring as some of the pages so far, but my humble stab at it.

http://www.blueskynet.as/alo/5k.html

Weighing in at 5,019 bytes (4.90 kilobytes) and containing 3 "graphics".



[This message has been edited by silence (edited 06-18-2002).]

Silence,

Very cool. That is funny I was working on some ASCII art the other day and was thinking of doing a page on it for my 5k.

I have *no* idea what to do for one.

Good job!

Later,
C:\


~Binary is best~

So, will there be any summary/judging on this?
/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-

Well....I think maybe we should have a pow wow on that...I know that some were against that...

So, Folks, who is for a rating, and who is against one?

I personally, am for it.

Also, I would like to thank all the participants...not bad, people. Nice to see that there was interest in the subject...

So...let's get the ratings thing down, so that we can start the new month with the next topic...

WS: Its your call. I'm personally in favour of it being non-competitive (as there is the potential for people giving feedback and improving their entries during the month) but whatever the people want I've been a little busy but I will get around to entering next month if the topic fills me with inspiration.

___________________
Emps

FAQs: Emperor