Homepage Bilder und allgemeine Umsetzung?

... komplette Frage anzeigen

5 Antworten

Kompression und Image-Replacement sind das Zauberwort. Egal ob Bilder oder Grafiken, diese sollten fürs Web optimiert gespeichert werden. Sowohl was deren Format, Größe und Kompression angeht. In "Must-have" Tool das ich nicht mehr missen möchte, ist vor allem TinyPNG. 

https://tinypng.com/

Egal ob PNG oder JPG. Damit kannst du nochmal einiges an Speicherplatz einsparen. Der Hersteller bietet auch ein passendes WordPress Plugin an. Bis zu einem gewissen Kontingent an Bildern auch kostenlos nutzbar. Auf jeden Fall ein Blick wert.Nun zum Image-Replacement. Vereinfacht herunter gebrochen werden mit Hilfe unterschiedlicher Techniken Bilder und Grafiken Device-abhängig geladen. Auf deinem Server oder Webspace hältst du unterschiedliche Versionen bereit. Je nach dem mit welchen Gerät deine Website aufgerufen wird, wird dann die dafür hinterlegte Version geladen. 

Eine großflächiges Bild für den Desktop liegt dann beispielsweise in einer kleineren Version für mobile Endgeräte (Tablet und/oder Smartphone) vor. Je nach Technik der mobile User also eine deutlich kleinere Datei auf/abruft bzw. dargestellt bekommt. Was jetzt Layout-relevante Grafiken wie Buttons u.d.G. angeht, sollte man diese als Sprite (hat nichts mit Coca Cola zutun ;-) ) zusammenfassen. So vermeidest du weitere und vor allem unnötige HTTP Requests. Was wiederum der Performance deiner Website zu Gute kommt. 

Es gibt aber noch viel mehr Möglichkeiten. Beschäftige dich einfach intensiv mit Responsive Webdesign und nutze die von mir genannten Schlägwörter. Unter anderem Kompression, Image-Replacement und CSS-Sprites. Zu guter Letzt mal schauen, ob du dein Markup inkl. CSS schlanker gestalten bzw. besser Strukturieren kannst (BEM, SMACSS > HTML, CSS & JS Preprocessing).  

LG medmonk 

Antwort bewerten Vielen Dank für Deine Bewertung

Danke an alle Antworten. Das hilft mir schon mal sehr! Danke

Antwort bewerten Vielen Dank für Deine Bewertung

Für jpegs benutze ich gerne den "jpgcompressor". Kriegst sogar nach optimaler Bearbeitung mit Photoshop nochmal bis zu 80 Prozent weg.

Antwort bewerten Vielen Dank für Deine Bewertung

Die Bilder, vor allem oben der Slider, sind teils schon sehr groß, ich hab mir eben nur mal das erste davon genauer angesehen und das hat ja schon 1,9MB, dass das Laden der Seite da etwas dauert ist nicht verwunderlich.

Imho ist .png für solche Bilder aber auch eher ungeeignet, versuchs lieber mal mit .jpg, das eine 1,9 MB Bild hab ich mal testweise als 80% jpeg gespeichert und so hats nur noch 214KB, ohne dass die Qualität sichtbar leiden würde.

Wenn du das bei allen Bildern so machst könnte das die Ladezeit schon deutlich verbessern.

Antwort bewerten Vielen Dank für Deine Bewertung

Versuch's doch mal hiermit:

https://de.wordpress.org/plugins/wp-smushit/

Eine andere Möglichkeit wäre auch:

http://wp-rocket.me/de

Gehört nicht zum Thema, aber aus SEO-Sicht solltest Du Deine Permalinks ändern in "Beitragsnahme".

Sowas wie ?page_id=48 können Suchmaschinen nicht lesen bzw. es sagt ihnen gar nichts.


Antwort bewerten Vielen Dank für Deine Bewertung

Was möchtest Du wissen?