Startseite mit Bild

[DieFüchsin]

Ich würd gern auf meine angehende Homepage eine Startseite mit einem großen Bild einfügen, bzw das Bild soll die Startseite sein, über die man per anklickbare Symbole zu den verschiedenen Interessenbereichen kommt. Mein Vater meint, so große Bilder könnten langsame Internetzugänge nicht darstellen.
Gibts da irgendne Möglichkeit, rumzutricksen oder kann ich das gleich vergessen?

[KenSentMe]

ach quatsch...
wenn das bild keine 400kb gross ist.. *g
also je größer (dateigröße! nicht höhe und breite!) desto länger dauert es..
mit einem Modem (56 kbit/s = max. 7 kb/s) kannst du dann ausrechnen wie lange es für modemnutzer dauert, bis sie das bild sehen...

ps: bild evtl einfach mit einem guten komprimierer ein bisschen in der qualität verschlechtern oder das format auf jpg/gif ändern und dann speichern - das verkleinert die datei auch. sag einfach um was für eine dateiendung und dateigröße + bildgröße es sich handelt.
zum bild konvertieren oder verkleinern:
http://www.xnview.de/

*edit*
dieses bild ist auch nur 149k bei 756 x 1024 Pixel - im jpg format
http://sevenels.net/Flickr/Street%20teddy.jpg
sehr große bilder gehen also auf jede hp. nur man muss eben aufpassen, dass es nicht zu viele werden */edit*

[dotperinch]

solange du nicht versuchst bmps oder tiffs auf deine startseite zu setzen .

persönlich würde ich jpg empfehlen, da reicht in photoshop normal eine einstellung von 8, manchmal sogar schon 6 um gute ergebnisse zu bekommen. kannst ja selbst schauen, was noch gut aussieht und was nicht (sogar in gimp und anderen programmen).

außerdem solltest du beachten, das allzugroße bilder eh nicht angebracht sind, die meisten fahren noch 1024 x 768 als auflösung, also bleib am besten darunter und du fährst damit ganz gut.

[Mic]

Ab einer gewissen Dateigröße würde ich empfehlen, das Bild in kleinere Stücke zu schneiden. Dadurch wird es insgesamt natürlich nicht kleiner, aber der Betrachter muss bei einer geringen Bandbreite nicht warten, bis das komplette Bild geladen wurde, sondern kann sich sozusagen an einem "Mosaik" erfreuen.
Man darf die Ungeduld der Surfer nie unterschätzen..

Was die Größe des Bildes angeht, wäre eine mögliche Option, es nicht in fester Breite und Länge, sondern prozentual anzulegen. Das hängt aber von der Art des Bildes ab, ist also keine allgemeingültige Empfehlung.

[Treibholz]

Ich habs mit Slices gelöst, kennst ja meine Seite. Wie Mic sagte wird das Bild in verschiedene Teile getrennt, die dann einzeln geladen werden (oder vorgeladen, wenn mans will). Du könntest z.B. eine Fläche nehmen, die farblich zum Bild passt, das dort erscheinen soll, z.B. als CSS-gestyltes DIV. Bietet sich aber meist nur bei Bildern mit wenig Farben an, oft wird dieser "Trick" für einfarbige Hintergründe mit Mustern verwendet.
Die Option mit den Slices hat noch einen Vorteil: du kannst so einzelne Elemente aus deinem Bild animieren oder Ähnliches. Die "Image-Map" hat beinahe ausgedient, kommt aber auch ab und zu noch zum Vorschein.

Wenn du ein sehr grafisches Layout machen möchtest, solltest du dir überlegen, ob du nicht lieber Flash benutzen willst, das hätte den Vorteil der relativen Größe. Bei reinem HTML / PHP ist es schwierig ohne absolute Werte zu arbeiten, je komplexer das Bild ist.

[TentakelTommy]

Wenn du ein sehr grafisches Layout machen möchtest, solltest du dir überlegen, ob du nicht lieber Flash benutzen willst

Und gleich diverse Endgeräte von vornerein aussperren. Mal davon abgesehen, daß ich ohne Flash surfe, was zB hier die Werbung erspart...
Flash ist was für leute, die wissen, was sie (sich und anderen an-) tun.

"anklickbare Symbole" nerven mich im übrigen auch, wenn man immer erst raten soll, was das denn sein darf. Oder machst du ein online-Adventure?

[Treibholz]

Was ist so falsch daran bei einem grafischen Entwurf Flash vorzuschlagen? Bloß weil du es nicht willst, heißt das ja nicht, dass niemand das Plugin hat.

Ich hab mich aber auch gegen Flash entschieden, mir gefällt es einfach, die volle Kontrolle über den Browser zu haben (Deeplinks, vor/zurück Navigation etc.), deshalb würd ich es aber nicht gleich verdammen. Mit einem grafischen Layout schließt du übrigens auch schon Leute aus, z.B. Sehbehinderte. Einiges kann man noch mit geschicktem HTML und CSS regeln aber nicht alles, kommt auf die Komplexität des Entwurfs an.

Und wenn dich anklickbare Symbole nerven, dann hol dir nen Textbrowser.

[td]

Was ist so falsch daran bei einem grafischen Entwurf Flash vorzuschlagen? Bloß weil du es nicht willst, heißt das ja nicht, dass niemand das Plugin hat.

Ist ja auch ueberhaupt kein Problem, schliesslich ist es ja nicht so, dass fuer bestimmte Plattformen (so circa alles, was nicht Windows oder OS X heisst) die aktuellste Version immer noch Flash 7 ist.

[TentakelTommy]

...Falls es dafür überhaupt ein Flash gibt (Handy, TV-Stationen, Spielekonsolen, Last-Generation-Systeme) - auch Suchmaschinen.

Und auf die "volle Kontrolle" hast du ja schon erwähnt: keine Deep-Bookmarks, keine Zitate kopieren, keine Bilder zoomen etc.

Und bei einem gut gemachten grafischen Layout kommt auch ein Textparser mit klar - bei Flash machst du dann halt die Seite doppelt.

Und bezüglich Textbrowser: ich hab links, lynx und Opera mit netten Layouts im Benutzermodus.

[add] wenn wir schon beim Glaubenskrieg sind - warum nicht svg?

[DieFüchsin]

Danke erstmal für eure Tipps, ich werde das Bild einfach erstmal zeichnen und werde es euch dann mal zeigen.

Das mit dem in Stücke schneiden finde ich eine gute Idee.

Flash möchte ich nicht verwenden, es gefällt mir einfach persönlich nicht.

Die anklickbaren Symbole werden natürlich nicht ohne deutlich lesbare Beschriftung erscheinen und evtl am Rand nochmal aufgelistet.

Ich hatte mir folgendes Vorgestellt: ein kleiner Fuchsbau, der ein bisschen wohnlich eingerichtet ist. Kleine Gebrauchsgegenstände (zB Tasse) führen zu den Kategorien (zB Teerezepte).

[DieFüchsin]

Hier ist mal der Prototyp des bildes. Es soll dann etwa 2/3 des Bildschirms einnehmen.



Ich musste es in zwei Teilen einscannen, weils zu groß war.
Kann mir jemand Tipps geben, wie ichs am besten colorieren kann, dass es dann nicht zu groß wird?[/url]

[flob]

Kann mir jemand Tipps geben, wie ichs am besten colorieren kann, dass es dann nicht zu groß wird?

Ja, z.B. ich. Wenn du das Bild mit wenigen Farben flächig colorierst (hauptsächlich Flächen mit genau EINER Farbe), dann kannst du mit dem GIF-Format sehr kleine Dateigrößen produzieren - verlustfrei. Allerdings unterstützt GIF nur höchstens 256 Farben pro Bild. Wenn du mit JPEG komprimierst, sind gleichmäßige Flächen eher schlecht, da bei hoher Kompressionsrate (die du brauchen wirst) dann hässliche Störungen (Artefakte) auftreten - du solltest hier also möglichst viel durcheinandermischen, dass man die Störungen nicht mehr so leicht erkennt. PNG hat auch seine Vorteile. Bei Wikipedia werden die Kompressionsmethoden ganz gut erklärt, les dir mal diese Artikel durch: JPEG, GIF, PNG.

[Treibholz]

Hast du sehr schön gezeichnet.
Allerdings stimmt die Perspektive des Schranks nicht so ganz, wenn du das mal mit den Fluchtpunkten des Tischs vergleichst. Hmm, generell würd ichs erst mal kleiner als 800x600 machen, damit auch Leute mit niedrigeren Auflösungen in den Genuss kommen, nicht groß scrollen zu müssen. Also vielleicht schwarzer Hintergrund (oder jedenfalls etwas dunkler) und den Fuchsbau zentriert in die Mitte des Bildes.

Würds in warmen Farbtönen kolorieren. Das kannst du mit Photoshop tun oder - wenn du nicht bereit bist so viel Geld auszugeben - mit Open Canvas, davon hab ich sehr viel Gutes gehört.

[DieFüchsin]

Danke fürs Lob, Treibholz.

Bei der Schrankperspektive hab ich ein wenig geschummelt, fällt es sehr auf?

Was ich über PNG gelesen hab, gefällt mir ganz gut, JPG-Bilder werden mir doch zu sehr vermatscht. Die Tranzparenzmöglichkeit könnte sich auch als Nützlich erweisen.

Bei Google stand: Obwohl die Komprimierungsmethode bei PNG in der Regel deutlich kleinere Dateien erzeugt als bei GIF, speichern viele Programme PNG-Dateien nicht optimal ab, was zu unnötig großen Dateien führt. Verschiedene Programme ermöglichen eine verlustfreie Neukomprimierung und oft wesentlich kleinere Dateien (siehe Weblinks).
Wisst ihr, ob ich mit Photoshop optimal komprimierte Dateien speichern kann?

Unter "Nachteile" war dies zu lesen:

bietet keine Möglichkeit zur Animation wie das GIF-Format. Hierzu wurde das MNG-Format geschaffen, welches jedoch bislang keine nennenswerte Verbreitung erreicht hat. Desweiteren gibt es mit APNG ein Format, das Animation ermöglicht, gleichzeitig aber insofern zum PNG-Format abwärtskompatibel ist, als PNG-Dekoder das erste Bild der Animation anzeigen.


Ich will zwar nichts animieren, aber das Aussehen der kleinen interaktiven Symbole verändern, wenn die Maus draufkommt. Ist das Möglich?

[DasJan]

Ich will zwar nichts animieren, aber das Aussehen der kleinen interaktiven Symbole verändern, wenn die Maus draufkommt. Ist das Möglich?

Ja. Das geht mit JavaScript:
http://de.selfhtml.org/javascript/beispiele/buttons.htm

Das Jan