Bilder schneller laden

Computer: Software & Programmierung HTML & CSS
#1

Huhu Christian und andere HP-Expert-/innen :smile:

Wie angedroht, seid ihr mich noch nicht wieder los, es gibt noch ein paar probs zu lösen *ggg* :wink:

So, nachdem css jetzt so einigermaßen durch ist, ist mein nächstes Anliegen, für die guten „zurückgebliebenen“ Modem-User Bilder scheinbar schneller geladen zu bekommen. Es wird verschiedentlich vorgeschlagen, Bilddateien schon vorab in den Cache des Users zu laden, in dem man sie in 1x1-Pixel-Größe schon auf einer vorhergehenden Seite einbindet. Und da meine Seite doch ziemlich viele Grafiken beinhalten wird, wäre das zumindest für die größeren Teile eine gute Idee, sie schon mal auf der Startseite ins Boot zu holen, damit sie dann schon da sind wenn sie gebraucht werden. Dann müssten User mit weniger schneller Internet-Anbindung nicht so lange auf den Seitenaufbau warten.

Mir stellt sich jetzt aber die Frage, an welcher Stelle das am sinnvollsten wäre. Das finde ich in all den schlauen Ratgebern nämlich nicht ;-(. Meine Seite wird (wie wohl die meisten Homepages mit Framesets) aus zwei Frames bestehen - links die Navigation, rechts die eigentlichen Inhalte.

Daher die Frage an die „Experten“ und „innen“: kann mir jemand sagen, in welcher Reihenfolge die Frames und deren beiinhaltenden Dokumente geladen werden? Es wäre nämlich ausgesprochen doof, wenn ich den Aufbau der aufgerufenen Seite durch Grafiken blockiere, die jetzt noch gar nicht gebraucht werden. Sie sollen natürlich erst geladen werden, wenn das was der User momentan aufgerufen hat, schon da ist und während er sich das ansieht/liest.

Die Navigation bleibt natürlich die ganze Zeit stehen, solange der User auf meiner Seite ist,währenddessen die Inhalte wechseln (zumindest, wenn der User nicht gleich wieder von meiner Page flüchtet *ggg*). Ist es also besser die Grafiken am Ende der navigation.html einzubinden, oder am Ende der voraussichtlich zuerst aufgerufenen Inhalts-htmls?

Die Frage gehört zwar eigentlich nicht in „html“ sondern in „Bildbearbeitung“… aber dann würde ich zwei zusammengehörende Fragenkomplexe auseinanderreissen, drum versuche ich es mal hier, vielleicht weiß das ja auch hier jemand :wink:. Und zwar ebenfalls wegen der schnelleren Ladbarkeit… was ist besser/schneller, wenn ich (etwas größere) Grafiken „interlaced“ abzuspeichern - oder vorher eine einfache Schwarz-Weiß-Variante davon zu erstellen und per Animation erst die schwarz-weiße und dann die farbige Variante auf den Schirm zu holen (siehe http://drweb.de/trickkiste/tricks23.shtml)?

Und dann doch noch eine Frage zum css… genau das ist mir nämlich mit seiner margin-left- und margin-right-Einstellung zum Verhängnis geworden, und ich habe noch keine Lösung gefunden (eine Klasse namens ".nachladen mit margin-right: + bzw. - 10% hat mir keinen Erfolg gebracht, das Bild bleibt weiterhin 10 % vom rechten Rand entfernt) wie kriege ich sie ganz an den rechten Rand des Browsers drangeklebt, wo sie dann nicht mehr so auffällt?

'Tschuldigung, dass ich euch mit sovielen Fragen nerve, aber so ist das halt, wenn ein Dummy mit keine-Ahnung-von-tuten-und-blasen trotzdem schnellstmöglich eine schöne hp auf die Beine stellen will :wink: Tausend Dank für eure Geduld mit mir und für jeden Tipp :smile:))

Liebe Grüsslis
Nena

#2

Hallo Nena,

Es
wird verschiedentlich vorgeschlagen, Bilddateien schon vorab
in den Cache des Users zu laden, in dem man sie in
1x1-Pixel-Größe schon auf einer vorhergehenden Seite
einbindet.

Halte ich gar nichts von, weil deine Startseite ja sicher auch Bilder enthält und der Besucher wartet dann bis zum Umfallen darauf das die endlich geladen werden, wundert sich das wieso das so lange dauert und im schlechtsten Fall denkt er sich wenn die Startseite schon so ewig braucht schau ich mir den Rest gar nicht erst an. Ausserdem woher willst du wissen auf welche Seite der Benutzer als nächstes geht?

Besser ist folgendes:

allgemein:

  • bei Bildern die sich wiederholen, immer das gleiche Bild einbinden,
  • Bildergrössen nicht mit width und hight anpassen sondern im Bildbearbeitungsprogramm ändern,
    das klingt zwar alles logisch, aber ich finde immer wieder Seiten wo das falsch gemacht wird. Gerade mit Frontpage erstellte Seiten tun sich da negativ hervor.

für Fotos o.ä.

  • als Format .jpg verwenden,
  • die Komprimierung so einstellen das daß Qualität/Dateigrösse Verhältnis ok ist, und das für _jedes_ Bild, da kann es riesen Unteschiede geben,
  • „progressiv“(interlaced?) einstellen -> Bild wird erst in niedriger Qualität angezeigt und dann nachgeladen(hast du bestimmt schon mal gesehen)

für Schriften etc.

  • als Format .gif verwenden,
  • anzahl der Farben soweit wie möglich reduzieren,

größere) Grafiken „interlaced“ abzuspeichern - oder vorher
eine einfache Schwarz-Weiß-Variante davon zu erstellen und per
Animation erst die schwarz-weiße und dann die farbige Variante
auf den Schirm zu holen

siehe oben, kommt auf den Inhalt an, „progressiv“(interlaced) geht mit .jpg und macht sinn bei Fotos. Das andere geht nur bei .gif Bildern, also Schriften etc. Ein Gif kann max. 256 Farben haben, ist also für Fotos weniger geeignet.

Gruss Jan

#3

Hi!

Und dann doch noch eine Frage zum css… genau das ist mir
nämlich mit seiner margin-left- und margin-right-Einstellung zum
Verhängnis geworden, und ich habe noch keine Lösung gefunden
(eine Klasse namens ".nachladen mit margin-right: + bzw. - 10%
hat mir keinen Erfolg gebracht, das Bild bleibt weiterhin 10 %
vom rechten Rand entfernt) wie kriege ich sie ganz an den
rechten Rand des Browsers drangeklebt, wo sie dann nicht mehr so
auffällt?

Sieht so aus, als würdest Du den IE benutzen. Der hat standardmässig links und oben immer 10 Pixel Rand (Margin).

Du musst für das Body-Tag links und oben „0px“ verfügen; damit’s alle Browser bekommen, einmal im HTML und einmal im CSS:

body { margin-top:0; margin-left:0; }

CU DannyFox64

#4

Moin-Moin!

Die Frage gehört zwar eigentlich nicht in „html“ sondern in
„Bildbearbeitung“… aber dann würde ich zwei zusammengehörende
Fragenkomplexe auseinanderreissen, drum versuche ich es mal
hier, vielleicht weiß das ja auch hier jemand :wink:. Und zwar
ebenfalls wegen der schnelleren Ladbarkeit… was ist
besser/schneller, wenn ich (etwas größere) Grafiken „interlaced“
abzuspeichern - oder vorher eine einfache Schwarz-Weiß-Variante
davon zu erstellen und per Animation erst die schwarz-weiße und
dann die farbige Variante auf den Schirm zu holen (siehe
http://drweb.de/trickkiste/tricks23.shtml)?

Ja, DrWeb.de ist eben echt gut!

Also: wie Du willst. GIF-Files als Animation zu laden, bei denen das erste Frame schwarz/weiss enthält, ist natürlich eine klasse Idee. Auch da kannst Du „interlaced“ für jedes Einzelbild auswählen!
Statt schwarz/weiss sind 8 bis zu 16 Grautöne auch nicht schlecht; aber die Palette muss auf 8 bzw. 16 Grautöne/Farben optimiert sein! Das lädt dann auch recht schnell; und wenn der Besucher das Bild ausdruckt, erscheint es immer noch ansehnlich. (Ich arbeite auch gerade an so einer Lösung…)

Du wirst aber schnell feststellen, dass Fotos als GIF u.U. Bereiche in einer Farbe enthalten, die im Orig. mit Abstufung der Farbtöne viel besser aussehen… und Du entscheidest Dich dann für JPEG oder PNG-Format.

– JPEG: gut komprimiert abspeichern (75 bis 85% Bildqualität), und als „progressiv“. Bei „progressiv“ entsteht beim Laden so ein lustiger Effekt während das Bild geladen wird; die erste Anzeige ist pixelig, und das Bild schärft sich immer mehr, bis dass das Bild ganz geladen ist… sieht eben ganz lustig aus. *g*

– PNG: habe noch keine ausreichende Erfahrung, um Dir da einen Tipp zu geben… ich weiss nur, dass PNG auch bei TrueColor transparente Bereiche enthalten kann.

CU DannyFox64

#5

Alos! :confused:
Immer Deine Kompakt-Fragen,
die 20 Antworten nach sich ziehen! *g*

Bilddateien schon vorab in den
Cache des Users zu laden,

Zwei Möglichkeiten:

Entweder: (1) JavaScript-Funktion (dann siehe Forum JavaScript/andere Scriptsprachen…) ist für die Anzahl von vielen Bildern ungeeignet - da musst Du viel zu viel an Script schreiben…

Oder: (2) Wie Du schon sagst: als auf 1x1 (oder 0x0) Grösse vorladen

Oder: (3) als Pseudo-Thumbnails vorladen

Auf (2) und (3) gehe ich unten noch näher ein…

Mir stellt sich jetzt aber die Frage, an welcher Stelle das am
sinnvollsten wäre…
Meine Seite wird (wie wohl die meisten
Homepages mit Framesets) aus zwei Frames bestehen …

Das eröffnet eine gute Möglichkeit zum Vorladen…

Daher die Frage an die „Experten“ und „innen“: kann mir jemand
sagen, in welcher Reihenfolge die Frames und deren
beiinhaltenden Dokumente geladen werden?

Ganz genauso, wie Du sie im HTML-Dok. definierst - also exakt in der Reihenfolge, in der sie da definiert sind.

flüchtet *ggg*). Ist es also besser die Grafiken am Ende der
navigation.html einzubinden, oder am Ende der voraussichtlich
zuerst aufgerufenen Inhalts-htmls?

Ja, am Ende der ersten „Inhalts-HTML“-Seite. Quasi: Begrüssung und den Anwender lesen lassen… während im Hintergrund eine Serie von Bildern vorlädt, aber…

Zu (2) und (3) - in einem unsichtbaren Frame vorladen -

Ich würde das (heute) x so machen:
– Ein Frame-Set laden, OHNE die Bilder vorzuladen.
Dabei einen Frame mit 0,* Grösse integrieren, in dem die „0-Pixel-Bilder“ erscheinen können (ohne dass jmd. etwas davon sieht…).
– Den Besucher irgendwo im Inhaltstext darauf aufmerksam machen, dass er viele Bilder sehen wird, die er, wenn er will vorladen kann… (Lass den Besucher entscheiden: Leute mit einer schnellen Verbindung können auf ein Vorladen verzichten.)
– Unter der Navigation dann einen Button „Bilder vorladen“ setzen; wird der Button betätigt, lädt eine andere Seite „0-Frame“, die alle oder die erste Serie von Grafikdateien enthält. (Grössenangaben im IMG-Tag kannst Du Dir in diesem Falle übrigens sparen.)
– Gleichzeitig könnte irgendwo stehen, dass die Bilder gerade geladen werden.

(Ich habe zwar noch eine andere Idee, wie man das ganz toll machen könnte, aber dazu wohl besser ein andermal… zu viel Quelltext zu posten, der noch nicht geschrieben ist.)

Von wegen Thumbnails:

Übrigens: Wenn Du mit einer Funktion „Bilder vorladen“ arbeitest, brauchst Du für eine Bildergalerie keine Thumbnails mehr zu erzeugen. Dafür verwendest Du einfach dann die Original-Bilder und setzt die Grösse im IMG-Tag auf Thumbnail-Grösse; das Verhältnis muss aber stimmen!

CU DannyFox64

#6

Huhu DannyFox :smile:

erst viele herzliche Dankeschöns für deine zahlreichen Antworten *ggg*

Alos! :confused:
Immer Deine Kompakt-Fragen,
die 20 Antworten nach sich ziehen! *g*

hihi, 20 Threads dafür zu eröffnen würde es ja auch nicht wirklich bringen, oder? *rotlf*

[…] rechten Rand des Browsers drangeklebt, wo sie dann nicht mehr so
auffällt?

Sieht so aus, als würdest Du den IE benutzen. Der hat
standardmässig links und oben immer 10 Pixel Rand (Margin).

Du musst für das Body-Tag links und oben „0px“ verfügen;
damit’s alle Browser bekommen, einmal im HTML und einmal im
CSS:

Det hilft mir nix *gg*. Ich habe gerade mühsam gelernt, mit css einen Rand von 10% rechts und links zu setzen, und der soll auch bleiben :smile:. Ich möchte ja nicht den gesamten Text am Frame-Rand kleben haben, sondern wirklich nur die vorlandenden Bildchen. Gibt’s denn keine Möglichkeit, im body-tag den Abstand so einzustellen, dass er für alle anderen Elemente schön aussieht und nur ganz gezielt bestimmte Elemente (nämlich diese 1x1-Pixelteile) ganz an den Rand zu verbannen?

Bilddateien schon vorab in den
Cache des Users zu laden,

Java-Script kommt schon mal nicht wirklich in Frage. Erstens habe ich auch von Java-Script keine Ahnung *gg* - und ich arbeite nicht mit Frontpage oder anderen WYSIWYG-Furchtbaren-Code-Verbrechern, sondern schreibe jede Zeile selbst (mit Phase5). Phase 5 hilft zwar bissi mit und erspart einiges an Tipparbeit, wenn man weiß was man/frau tut, aber man kann eben auch nur die Features verwenden, wo man zumindest halbwegs eine Ahnung hat wofür sie sind und wie man sie einsetzt :wink:. Zweitens möchte ich – wenn überhaupt – Java-Script und anderen Programm-Code nur äußerst sparsam einsetzen und auch nur da, wo es entweder gar nicht anders zu lösen ist und/oder keinen Schaden macht, wenn der User JS im Browser abgeschalten hat bzw. per Firewall ausfiltert…

Oder: (2) Wie Du schon sagst: als auf 1x1 (oder 0x0) Grösse
vorladen
Ich würde das (heute) x so machen:
[…] – Ein Frame-Set laden, OHNE die Bilder vorzuladen.
Dabei einen Frame mit 0,* Grösse integrieren, in dem die
„0-Pixel-Bilder“ erscheinen können (ohne dass jmd. etwas davon
sieht…).

In welcher Reihenfolge laden denn die Frames? Stur von Links nach Rechts? Du hast ja weiter unten geschrieben, dass der Ladevorgang eines html-Dokuments von oben nach unten passiert. Würde also also erst der linke Frame nebst kompletten Inhalt geladen, dann der zweite Frame nebst allen Inhalt, eher der 3. Frame zu laden beginnt, dann würde ich mir erst recht ein Ei legen, wenn ich erst den Frame mit vorladenden Bildern laden würde und dann erst den echten Inhalt ;-/ Oder laden die Fram es durcheinander? Bzw. kann ich denn ein Frameset eröffnen, das in etwa so aussieht?

ich beantworte jegliche Fragen "Wollen Sie" eigentlich aus Prinzip immer mit "nein" :wink:
Mein Ziel mit der Page ist auch nicht, "Nachhilfestunden" in Webdesign und Internet-Nutzung zu geben. 
Und ich habe ja auch nicht vor Dutzende oder gar Hunderte von Hochglanz-Fotos auf meiner Page unterzubringen und die alle über die "Vorladen"-Funktion auf die Festplatte des Users zu schaufeln, sondern möchte halt ein paar wenige größere Bilddateien schon vorher auf in den Cache des Users buxieren, damit seine Seite dann danach schneller aufbauen kann. Ist es da echt notwendig, vorher zu fragen und auch noch eine Message zu geben, dass ein paar Bildchen geladen werden? Ich bin ja schon ein Anhänger dessen, den User nicht allzu sehr zu bevormunden... und gebe deshalb auch keine festen Schriftgrößen vor... aber was zu viel ist, ist dann doch zuviel :wink:



> Also: wie Du willst. GIF-Files als Animation zu laden, bei  
> denen das erste Frame schwarz/weiss enthält, ist natürlich  
> eine klasse Idee. Auch da kannst Du "interlaced" für jedes  
> Einzelbild auswählen!  
> Statt schwarz/weiss sind 8 bis zu 16 Grautöne auch nicht  
> schlecht; aber die Palette muss auf 8 bzw. 16 Grautöne/Farben  
> optimiert sein! Das lädt dann auch recht schnell; und wenn der  
> Besucher das Bild ausdruckt, erscheint es immer noch  
> ansehnlich. (Ich arbeite auch gerade an so einer Lösung...)


Ööööhm... du hast es mit dem DAU (Dümmsten anzunehmenden User ) zu tund \*fggg\*. Wie geht das (welche Schritte muss ich machen - mit AdobePhotoshop7 oder PaintShopPro7) zwei oder mehr Bilder in eine Animation zu basteln? Und wie optimiert man die Farbplaette auf 8 bzw. 16 Grautöne/Farben?


> Du wirst aber schnell feststellen, dass Fotos als GIF u.U.  
> Bereiche in einer Farbe enthalten, die im Orig. mit Abstufung  
> der Farbtöne viel besser aussehen... und Du entscheidest Dich  
> dann für JPEG oder PNG-Format.


Nö, geht net. Ich brauche das gif-Format wegen der transparenten Hintergründe, jpg kann die ja leider nicht ;-( 

Liebe Grüße und viiiiielen Dank für deine viele Mühe!!!
schönes Wochenende noch :smile:
Nena
#7

Huhu Jan :smile:

auch dir herzlich Danke für deine Mühe :smile:

Halte ich gar nichts von, weil deine Startseite ja sicher auch
Bilder enthält und der Besucher wartet dann bis zum Umfallen
darauf das die endlich geladen werden, wundert sich das wieso
das so lange dauert und im schlechtsten Fall denkt er sich
wenn die Startseite schon so ewig braucht schau ich mir den
Rest gar nicht erst an.

bis zum Umfallen auch wieder nicht :smile: Ich habe ja nicht vor Dutzende oder gar Hunderte von Hochglanz-Fotos auf meiner Page unterzubringen und die alle über die „Vorladen“-Funktion auf die Festplatte des Users zu schaufeln, sondern möchte halt ein paar wenige größere Bilddateien schon vorher auf in den Cache des Users buxieren, damit seine Seite dann danach schneller aufbauen kann :smile:

Ausserdem woher willst du wissen auf
welche Seite der Benutzer als nächstes geht?

Wie gesagt, sooo viele Sachen sinds nicht, die ich vorladen will, nur ein paar der größeren Bilddateien (sind nicht sooo viele und so um die 50 kb, also auch keine Megateile). Natürlich kann ich nicht wissen, wo der User als nächstes hingeht. Könnte natürlich sein, dass er/sie dann gar nicht dort hin kommt, wo ein vorgeladenes Bildchen dann tatsächlich gebraucht würde

Besser ist folgendes:

allgemein:

  • bei Bildern die sich wiederholen, immer das gleiche Bild
    einbinden,
  • Bildergrössen nicht mit width und hight anpassen sondern im
    Bildbearbeitungsprogramm ändern,
    das klingt zwar alles logisch, aber ich finde immer wieder
    Seiten wo das falsch gemacht wird. Gerade mit Frontpage
    erstellte Seiten tun sich da negativ hervor.

Ich verwende aber das unsägliche Frontpage (und all die anderen WYSIWYG-Schrott-Code-Produzierer) nicht *ggg*. Drum habe ich hier ja so viele dumme Fragen, weil ich (mit Phase5) alles selber schreibe :smile:)). Und ich habe ohnehin alle Bilder mit Bildbearbeitungsprog auf die richtige Größe gebracht, schon um mir die ständige width- und height-Tipperei zu sparen :wink:

Das einzige Bild, das sich tatsächlich wiederholt, ist das „Logo“. Auf der Startseite in groß, auf allen anderen Seiten in 1/3 der Originalgröße. Sollte ich eine mit Bildbearbeitungsprog verkleinerte Version erstellen, die ich auf allen anderen Seiten einbinde, oder kann ich, da ja die Originalgröße sowieso schon im Cache des Users ist, auch mit width und height runterzoomen?

für Fotos o.ä.

  • als Format .jpg verwenden,

det is schlecht, weil jpg leider keine transparenten Hintergründe beherrscht ;-(

für Schriften etc.

  • als Format .gif verwenden,

für Schriften gifs verwenden? Ich gebe lediglich im css die Schriftarten vor, in der die Schrift formatiert werden soll!?

größere) Grafiken „interlaced“ abzuspeichern - oder vorher
eine einfache Schwarz-Weiß-Variante davon zu erstellen und per
Animation erst die schwarz-weiße und dann die farbige Variante
auf den Schirm zu holen

Ööööhm… du hast es hier leider mit dem DAU (Dümmsten anzunehmenden User ) zu tund *fggg*. Wie geht das (welche Schritte muss ich machen - mit AdobePhotoshop7 oder PaintShopPro7) zwei oder mehr Bilder in eine Animation zu basteln?

siehe oben, kommt auf den Inhalt an, „progressiv“(interlaced)
geht mit .jpg und macht sinn bei Fotos. Das andere geht nur
bei .gif Bildern, also Schriften etc. Ein Gif kann max. 256
Farben haben, ist also für Fotos weniger geeignet.

Geht „interlaced“ denn bei gifs nicht? Wenn ich mit PaintShopPro in ein gif exportiere, werde ich gefragt ob es „non-interlaced“ oder „interlaced“ sein soll!? Und det mit den 256 Farben ist auch irgendwie seltsam. Schau mal zu http://www.regenbogenreich/muster.html. Da habe ich ein Foto meiner beiden verstorbenen Kater eingebunden, bei dem der Hintergrund transparent geschalten und als gif abgespeichert ist. Wie 356 Farben sieht das aber nicht aus!?

Liebe Grüße und viiiiielen Dank für deine viele Mühe!!!
schönes Wochenende noch :smile:
Nena

#8

uuups, falscher Link
uuups, da habe ich das „.de“ vergessen im Link und auf meiner „muster.html“ habe ich gar keine Fotos drin, das ist ja die Versuchsseite für die css. Hier die Berichtigung:
http://www.regenbogenreich.de und http://www.regenbogenreich.de/foxi.html

#9

Hallo,

– PNG: habe noch keine ausreichende Erfahrung, um Dir da
einen Tipp zu geben… ich weiss nur, dass PNG auch bei
TrueColor transparente Bereiche enthalten kann.

PNG geht nicht - das koennen zu viele BRowser immer noch nicht vernuenftig anzeigen - vor allem, wenn Du mit Transparenz arbeitest.
S.a. http://www.html-workshop.de/entry.php?id=00035

Zum Thema Vorladen schreib ich morgenwas - das viel mir hier nur gerade auf.

Greets
Christian

#10

Hallo Nena,

dort hin kommt, wo ein vorgeladenes Bildchen dann tatsächlich
gebraucht würde

Nicht mehr als 30kb pro Seite dann klappts auch mit den Modemusern,

auf allen anderen Seiten einbinde, oder kann ich, da ja die
Originalgröße sowieso schon im Cache des Users ist, auch mit
width und height runterzoomen?

lieber nicht, die Qualität leidet merklich

für Schriften gifs verwenden? Ich gebe lediglich im css die
Schriftarten vor, in der die Schrift formatiert werden soll!?

ich meinte für Bilder die Text enthalten, z.b. Symbol2.gif,

Ööööhm… du hast es hier leider mit dem DAU (Dümmsten
anzunehmenden User ) zu tund *fggg*. Wie geht das (welche
Schritte muss ich machen - mit AdobePhotoshop7 oder
PaintShopPro7) zwei oder mehr Bilder in eine Animation zu
basteln?

hier gibt es eine gute Anleitung für Photoshop http://www.br-online.de/wissen-bildung/thema/alpha-b… Animationen

ist. Wie 356 Farben sieht das aber nicht aus!?

geht auch mit gifs (war mir auch neu), schau dir die Bilder mal genau an, die bestehen hauptsächlich aus Brauntönen, bei dem mit dem trans. Hintergrund kannst du an dem Fellmuster sehr schön erkennen das die Anzahl der Farben reduziert ist.

Lad mal das Orginal in Photoshop, dann „Speichern fürs Web“(sorry ich hab eine engl. Version und muss die dt. Bezeichnungen raten) Format gif, genau darunter „Adaptive“(der 3. Eintrag), jetzt müsstest du den Unterschied zu dem Bild auf der Webseite sehen.

die Schriftart passt doch ganz gut auf deine Seite :wink:,

Gruss Jan

#11

Hai, Nena,

um ein Beild an den Broware-Rand zu kleben arbeitet man mit „margin“…
Der Witz ist, daß man auch negative Angaben machen kann:

zumindest der IE lässt sich so dazu bringen, das Bild sogar halb außerhalb des Browser-Fensters darzustellen…

…dann hattest Du in irgendeiner Antwort geschrieben, daß Du Fotos als gif abgespeichert hat und gar nicht auffallen würde, daß das nur 256 Farben sind - wenn Du eine Grafik im gif-Format abspeicherst, gibt es die Möglichkeit, eine dazugehörige Palette mit abzuspeichern, überwiegend nur eine winziges Fensterchen, in dem so Sachen wie „optimiert“ und „angepasst“ stehen. Bei einem Wald- und Wiesenbild zB werden in der Palette dann jede Menge Grüntöne gespeichert, dafür bleibt der Rot- und Violett-Bereich einfach weg. So kann man jede Menge Fotos auf 256 Farben reduzieren, ohne daß es blöd aussieht. Der Nachteil an dieser Methode ist aber, daß für jedes Bild eben die Palette dazugeladen wird - was dazu führen kann, daß ein gif-Bild größer ist, als das gleiche Bild im jpg-Format und die Ladezeit entsprechend länger. Wenn Du einen Transparent-Bereich brauchst, bleibt Dir nix übrig, ansonsten musst Du eben vergleichen, in welchem Format das Bild kleiner ist und das dann nehmen.

Gruß
Sibylle

#12

Hi Nena,

css einen Rand von 10% rechts und links zu setzen, und der
soll auch bleiben :smile:. Ich möchte ja nicht den gesamten Text am
Frame-Rand kleben haben, sondern wirklich nur die vorlandenden
Bildchen. Gibt’s denn keine Möglichkeit, im body-tag den
Abstand so einzustellen, dass er für alle anderen Elemente
schön aussieht und nur ganz gezielt bestimmte Elemente
(nämlich diese 1x1-Pixelteile) ganz an den Rand zu verbannen?

Ja, verschiedene Möglichkeiten:

-1-
mit negativem Einzug dem Body-Einzug entgegenwirken:
{ margin-left:-10px; }

-2-
DIV-Layer von minimaler (width/height) Grösse intergrieren,
absolut positionieren (left/top),
Die Lade-Reihenfolge (z-index) auf eine grosse Zahl setzen,
evtl. die Anzeige einfach ausblenden - geladen wird’s trotzdem -
div { position:absolute; width:1px; height:1px;
z-index:999; left: 0px; top: 0px;
visibility:hidden; }

Java-Script kommt schon mal nicht wirklich in Frage…

Gut, sinnvoll Deine Ausführenungen.

In welcher Reihenfolge laden denn die Frames? Stur von Links
nach Rechts? Du hast ja weiter unten geschrieben, dass der
Ladevorgang eines html-Dokuments von oben nach unten passiert.

Ja, ich meinte nicht *das*was*Du*auf*dem*Bildschirm*siehst*
sondern, so wie es im HTML-Dok. geschrieben steht. - Das, was erster geschrieben steht, wird erster geladen. Das, was zuletzt geschrieben steht, wird zuletzt geladen.

Würde also also erst der linke Frame nebst kompletten Inhalt
geladen, dann der zweite Frame nebst allen Inhalt, eher der 3.
Frame zu laden beginnt, dann würde ich mir erst recht ein Ei
legen, wenn ich erst den Frame mit vorladenden Bildern laden
würde und dann erst den echten Inhalt ;-/ Oder laden die Fram
es durcheinander? Bzw. kann ich denn ein Frameset eröffnen,
das in etwa so aussieht?

#13

Danke - Bilder an den Rand klatschen - jetzt gehts
Huhu Sibylle :smile:

oh no. Ich habe verzweifelt versucht, eine Klasse im css anzulegen, die mir das Bild über den rechten Rand rausschiebt. Und das hat irgendwie nie funktioniert, egal ob ich mit margin-right plus oder minus 100%, 200px, oder sonst was gearbeitet habe. Auf „cm“ bin ich nicht gekommen - und auf die Idee, das bescheuerte Bild über den linken Rand rauspurzeln zu lassen, auch nicht ;-/. Dzdzdzdzdzzzz, gut dass Dummheit nicht quietscht *rotfl*.

Danke + liebe Grüße
Nena

#14

Huhu DannyFox :smile:)) Ich nochmal :smile:))

Das mit den (Pseudo-)Thumbnails habe ich jetzt kapiert *einStücknachrechtsrutschundvonderLeitungruntersteig* :smile:. Und mit dem Herauspurzeln lassen des Bildes aus dem sichtbaren Bereich hat sich nun ja erledigt. Ich brauche also gar keinen dritten Frame, da ich ja die just-for-cache-Bildchen ganz am Ende der inhalts-htm laden und über den linken Rand rausschieben kann :wink:

Also mich stört’s, wenn ich mir den Inhalt nicht näher ansehen
will, was ich ja erst weiss, wenn ich die erste oder zweite
Seite der Homepage angesehen habe.

Mein Prob ist, dass auf meiner Seite sicherlich auch sehr viele
Leute landen werden, die soviel wie gar keine Ahnung haben von
Internet, Ladezeiten, „Vorladen“ etc. Ich müsste also wenn,

Dann könntest Du mit einer Zwischenseite arbeiten „Hier geht’s
zur Bildgalerie“ oder „Hier bitte eintreten“; dort auf der
Zwischenseite steht dann in der ersten Zeile „Bilder werden
geladen“

Aber det will mir nicht in den Kopf :smile:). Offensichtlich bin ich blonder als ich dachte :wink:.

Wenn ich eine Zwischenseite einrichte, die nur ein „bitte eintreten“ enthält, dann kann ich mir die ganze Vorladerei gleich sparen, denn auf der Seite hält sich ja kein Mensch länger als 5 Sekunden auf :smile:. Der Gag ist ja, dass sich der eine oder andere Besucher auf der Willkommensseite etwas länger aufhält, weil es da einen Text zu lesen gibt. Und die Wartezeit könnte genutzt werden, um ein paar Bilder in den Cache zu bugsieren. Eine Zwischenseite, auf der sich der Besucher nur 5 Sekunden aufhält, bringt mir für den Zweck rein gar nichts, dann kann ich mir die Vorladerei doch gleich sparen, weil innerhalb von 5 Sekunden kein Modem der Welt eine 50-kb-Datei in den Cache bugsiert!?

Liebe Grüße
Nena, *verzweifeltdiekurzenHaarerauf*

#15

Hallo Jan :smile:

Nicht mehr als 30kb pro Seite dann klappts auch mit den
Modemusern,

waaaaassss??? Na dann kann ich ja getrost aufhören, überhaupt IRGENDetwas zu machen!!! 30 kb ist doch der glatte Witz??? ca. 5-10 kb braucht das pure html-Dokument ja schon, dann kann ich noch 2-3 sch…0-8-15-cliparts einbinden und das war’s dann schon??? :frowning:(((((((((

hier gibt es eine gute Anleitung für Photoshop
http://www.br-online.de/wissen-bildung/thema/alpha-b…
Animationen

Danke für den Link!!! Aber sag mal, bin ich so blöd, oder stimmt mit der Seite was nicht? An meiner firewall liegts nicht ich habe schon geschaut. br-online steht nicht in der liste drin, dass da irgendwas ausgefiltert würde. Bei mir funktionieren aber nur die Links im linken frame, die dann rechts eine Liste von Photoshop-Features in der jeweiligen Kategorie aufruft. Ich nehme an, dass das Links sein zu den jeweiligen Workshops sein sollten. Bei mir ist es purer Text. Pinge ich den server von br-online.de an, kommt „Zeitüberschreiten der Anforderung“. Bin ich blöd, oder ist die Seite zur Zeit teilweise down?

Lad mal das Orginal in Photoshop, dann „Speichern fürs
Web“(sorry ich hab eine engl. Version und muss die dt.
Bezeichnungen raten) Format gif, genau darunter „Adaptive“(der
3. Eintrag), jetzt müsstest du den Unterschied zu dem Bild auf
der Webseite sehen.

Ooooh ja. Ist ein gewaltiger Unterschied :smile:) Allerdings auch in der Datei-Größe – die verdoppelt sich leider ;-/

die Schriftart passt doch ganz gut auf deine Seite :wink:,

Welche meinst du? Verdana, die Schrift in der Seite „muster.html“ oder Comic-Sans, die Schrift in „index.html“ und „foxi.html“? Von der Comic-Sans wurde mir hier leider aus Gründen der Lesbarkeit krass abgeraten, sodass ich zähneknirrschend auf Verdana ausweiche. Die „muster.html“ enthält meine bisherigen Versuche, die Einstellungen der formate.css umzusetzen - und die wird wohl auch die Grundlage meiner letztendlichen Homepage-Seiten…

Liebe Grüsslis
Nena

#16

Hallo,

waaaaassss??? Na dann kann ich ja getrost aufhören,
überhaupt IRGENDetwas zu machen!!! 30 kb ist doch der glatte
Witz!?!?!? ca. 5-10 kb braucht das pure html-Dokument ja
schon, dann kann ich noch 2-3 sch…0-8-15-cliparts einbinden
und das war’s dann schon??? :frowning:(((((((((

ein gif ist nicht so groß wenn du mit den Farben sparst, ok nimm einfach 30 kb pro Bild als max. Obergrenze, der C64 hatte auch nur 64kb RAM und damit konnte man auch spielen, Briefe schreiben etc. aber das nur am Rande,

hier gibt es eine gute Anleitung für Photoshop
http://www.br-online.de/wissen-bildung/thema/alpha-b…
Animationen

„Zeitüberschreiten der Anforderung“. Bin ich blöd, oder ist
die Seite zur Zeit teilweise down?

Bei mir geht es http://www.br-online.de/wissen-bildung/thema/alpha-b… funktioniert der Link? Ist JavaScript an? Hast du Flash installiert? Die Anleitung ist ein Flashfilm.

Ooooh ja. Ist ein gewaltiger Unterschied :smile:) Allerdings auch
in der Datei-Größe – die verdoppelt sich leider ;-/

versuch die Anzahl der Farben zu reduzieren, soweit bis du einen guten Wert gefunden hast.

die Schriftart passt doch ganz gut auf deine Seite :wink:,

Welche meinst du? Verdana, die Schrift in der Seite
„muster.html“ oder Comic-Sans, die Schrift in „index.html“ und
„foxi.html“? Von der Comic-Sans wurde mir hier leider aus …

Comic Sans ich hatte etwas weiter unten ein bischen über Comic gemosert.

Gruss Jan

#17

Huhu Nena!

Aber det will mir nicht in den Kopf :smile:). Offensichtlich bin
ich blonder als ich dachte :wink:.

Wenn ich eine Zwischenseite einrichte, die nur ein „bitte
eintreten“ enthält, dann kann ich mir die ganze Vorladerei
gleich sparen, denn auf der Seite hält sich ja kein Mensch
länger als 5 Sekunden auf :smile:. Der Gag ist ja, dass sich der
eine oder andere Besucher auf der Willkommensseite etwas
länger aufhält, weil es da einen Text zu lesen gibt. Und die
Wartezeit könnte genutzt werden, um ein paar Bilder in den
Cache zu bugsieren. Eine Zwischenseite, auf der sich der
Besucher nur 5 Sekunden aufhält, bringt mir für den Zweck rein
gar nichts, dann kann ich mir die Vorladerei doch gleich
sparen, weil innerhalb von 5 Sekunden kein Modem der Welt eine
50-kb-Datei in den Cache bugsiert!?

Du hast da vollkommen recht.

Hab’s im übrigen eben mit so’ner Lösung „Zwischen-Seite“ probiert… und bin auf andere techn. Probs gestossen - so’n M*st! - Mal sehen, wie ich das irgendwann zuletzt gelöst habe…

Liebe Grüße
Nena, *verzweifeltdiekurzenHaarerauf*

(offTopic: aber das brauchst Du doch nicht - gibt doch Haargel!)

Grüsse, DannyFox64

#18

Huhu Jan :smile:

Bei mir geht es
http://www.br-online.de/wissen-bildung/thema/alpha-b…
funktioniert der Link? Ist JavaScript an? Hast du Flash
installiert? Die Anleitung ist ein Flashfilm.

Müsste eigentlich schon installiert gewesen sein. Habe aber jetzt nochmal und es geht immer noch nicht. Du meinst doch das flash-plugin von macromedia oder? Ich habs für IE und Mozilla installiert und habe auch den Cache geleert, aber es läuft weder mit dem einen noch mit dem anderen!? :frowning:

die Schriftart passt doch ganz gut auf deine Seite :wink:,

Welche meinst du? Verdana, die Schrift in der Seite
„muster.html“ oder Comic-Sans, die Schrift in „index.html“ und
„foxi.html“? Von der Comic-Sans wurde mir hier leider aus …

Comic Sans ich hatte etwas weiter unten ein bischen über Comic
gemosert.

Ich habe (nicht nur) deshalb die Comic Sans rausgeschmissen und nu sagst du mir, dass sie zu meiner Page passt *grummel* :wink:

Liebe Grüsslis
Nena

#19

Hi Nena,

muss mich x in Euren Dialog reinklinken:

Comic Sans ich hatte etwas weiter unten ein bischen über Comic
gemosert.

Ich habe (nicht nur) deshalb die Comic Sans rausgeschmissen
und nu sagst du mir, dass sie zu meiner Page passt *grummel*
:wink:

Die ‚Comic Sans‘ ist eigentlich eine „Script-Schriftart“ und wird auch so vom System und im Browser erkannt. Das Problem damit ist, dass, hat ein Site-Besucher die ‚Comic Sans‘ nicht installiert, wird dafür eine Ersatzschrift angezeigt. – Die Reihenfolge richtet sich dann nach der „font-family“, die im CSS spezifiziert ist: Bsp:

body { font-family:'Comic Sans,Verdana,Arial,Helvetica,Sans-Serif'; }

Wenn Du andere Schriftschnitte/-familien nach der ‚Comic Sans‘ weg lässt, bekommt der Besucher eine mögliche Script-Schrift seines Systems zu sehen (von BrushScript über Commercial Script, Lucida Handwriting, NoodleScipt bis hin zu Vivante ist da alles drin).

CU DannyFox64

#20

PNG-Transparenz im IE
tach

PNG geht nicht - das koennen zu viele BRowser immer noch nicht
vernuenftig anzeigen - vor allem, wenn Du mit Transparenz
arbeitest.
S.a. http://www.html-workshop.de/entry.php?id=00035

Das „zu viele Browser“ würde ich gerne streichen. Der IE ist für mich nicht „viele Browser“, beim Opera5 weiß ich nicht wie da die Verbreitung ist. Aber diese Diskussion gehört hier nicht hin, wollt ich nur mal kurz anmerken.

Zur Transparenz im IE:
Gilt das für alle Angaben zur transparenz oder nur für die teiltransparenten Pixel?

Gruß Jens