Bilder/Grafiken für HP optimieren

I-A-N

I-A-N

Angesehenes Mitglied
Hallo!

Ich habe heute die Ladezeit meines Projekts getestet - Ergebnis: Ungenügend!
Ich nutze auf der Startseite einen Promo-banner, wo mehrere Bilder gezeigt werden (als Slideshow).
Auf diesen Banner kann ich nicht verzichten! Fragt bitte nicht wieso.

Welche Möglichkeiten gibt es für mich, die Bilder kleiner zu machen, damit die Ladezeit verkürzt wird?

Ich habe daran gedacht, statt .jpg Bilder .gif Bilder zu nutzen, also die Bilder umzuwandeln.
Die Bilder werden nur teilweise kleiner, teilweise sind die .jpg Bilder kleiner.
Nunja, nicht schlimm eigentlich.. ich kann auch beides nutzen. (.png Grafiken sind bei mir deutlich größer)

Was ist noch möglich?
Verkleinern möchte ich die Bilder nicht.
Und die Qualität runter schrauben, z.B. auf 8 Bit kommt auch nicht in Frage.

Gibt es noch etwas?
Irgend einen Service, etc. ??

Kann mir es nicht vorstellen, da die Daten vom Browser ja ohnehin geladen werden müssen. Von wem ist da doch egal... oder etwa nicht?!

Freue mich über jede Unterstützung!

VG
 
Also ein Banner mit beispielsweise 900px × 140px und 75 kb sollte in der heuteigen Zeit keine Ladeschwierigkeit mehr darstellen.

Gruß Ronny
 
hi,

für jpeg optimierung kann ich dir www.jpegmini.com empfehlen

für png -> www.smushit.com/ysmush.it/

weitere tipps zur website optimierung gibt dir google auf http://code.google.com/intl/de-DE/speed/page-speed/

viel erfolg
smile.gif
 
Hallo zusammen!!

Danke für eure Beiträge!

@Jan Petters
650x365 - 175 kb in etwa

@Ronald Nickel
Ich habe wie gesagt, mehrere Bilder die gleichzeitig geladen werden.
Also so 5-6 mal 175 kb

Laut online Check benötigt man für meine Seite bei DSL6000 knapp 1,90 sec. Bei DSL2000 knapp 5 sec. (das ist viel zu viel!)
Man kann aber nicht davon ausgehen, dass jeder DSL hat! Ich möchte so "freundlich" wie möglich sein.

@sonchen80
Nein, habe ich nicht. Bringt aber auch nix. jQuery einzubinden, löst ja nicht das Problem mit der Größe...

@ab-web
Spezieller Dank an dich!! Genau, sowas habe ich gesucht!! SEHR GEIL!!
Statt 175 kb sind es pro Bild nur noch etwa 30-40 kb und damit kann ich leben!
Geschwindigkeit: 1,06 sec. bei DSL6000 und bei DSL2000 3sec.

(png habe ich nicht getestet)
 
Hi,

ich weiß nicht, wie unser Programmierer das gemacht hat, aber schau mal hier.

http://www.eu-asien.de/Russland-Informatio...phie-klima.html

die Bilder auf der Page sind alle ca. 20-35 kb groß und in einer "noch" in Ordnung gehaltenen Auflösung.

Wenn das Bild angeklickt wird, öffnet sich dieses in der Originalauflösung.

Vielleicht hilft das irgendwie?

EDIT:
Ist zwar von der Ladegeschwindigkeit immernoch nicht der Hit, aber besser als davor
biggrin.gif


EDIT:
hier wurde wohl mit .gif und als Endauflösung mit .jpg gearbeitet. (automatisch!!!)
 
QUOTE EDIT:
hier wurde wohl mit .gif und als Endauflösung mit .jpg gearbeitet. (automatisch!!!)


wow, das muss ein zauber sein... "automatische umwandlung" ...

schon mal was von Verlinkungen gehört?
wink.gif
 
Hallo,

bei der Ladezeiten-Optimierung wird die Größe der Datei allzu oft überschätzt. Ich kenne deine Seite leider nicht, deshalb kann ich es nicht mit Sicherheit sagen, aber ich denke Spriting wäre eine Lösung.

Browser können immer nur eine Anzahl von X (das ist vom Browser abhängig, i.d.r. aber zwischen 8 und 12) Dateien gleichzeitig vom Server abfragen. Erst wenn sie eine der X Dateien in der "Pipe" zu Ende geladen haben, fangen sie mit der x+1ten an. Dadurch ergibt sich eine Verschiebung, welche sehr gross sein kann. Es ist abhängig von der Anzahl der Elemente, die sich auf einer Website befinden. Dabei ist jede eingebettete js- oder css-Datei sowie favicon und natürlich auch jedes Bild ein Element.

Beim Spriting setzt man mehrere Grafiken in eine Datei, so dass diese auf einmal geladen werden. Das schon zudem den Server und selbst wenn es an der Summe der Dateigröße nix ändert, so spart man sich auf jeden Fall die zeit für die sonst zusätzlichen Anfragen.

U.a. YouTube macht das so, wie man zB hier erkennen kann:
http://s.ytimg.com/yt/imgbin/www-master-vflmXmkPE.png

Man bindet die Bilder dann entweder als <div> oder als <button> mit fester Größe, dem Sprite als Hintergrundbild und der richtigen Hintergrund-Positionierung ein.

Das ganze hat natürlich auch Nachteile: Man muss aufpassen, dass der Sprite nach einer Änderung neu vom Server geladen wird und nicht noch gecached wird. Hier gibt es aber verschiedene Lösungen, die alle vergleichsweise einfach zu implementieren sind. Ein zweiter Nachteil ist sicherlich, dass der Sprite fest auf dem Sever liegen sollte und die Elemente daher vorher schon feststehen müssen. Man kann Sprites natürlich auch dynamisch erstellen, aber dann verliert man an anderer Stelle wieder.



Gruss Hannes
 
Spriting wie schon angedeutet sowohl als auch Optimierung via Grafikprogramm mit Verbindung von Amazon AWS sollte da Abhilfe schaffen :)
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben