Damit sich möglichst viele Interessanten relativ lange in deinem Online-Shop aufhalten ist eine schnelle Ladezeit der Produktseiten extrem wichtig.
Hier sollte das Augenmerk besonders auf die Bilder gelegt werden, da hier oftmals noch sehr viel Potential drin steckt, um die Ladezeiten drastisch zu erhöhen.
Wie groß die Bilder maximal sein sollten und wie du die Bilder relativ einfach verkleinerst, das erläutere ich dir in diesem Artikel.
In diesem Artikel werde ich nur auf 2 Dateitypen eingehen.
- jpg
- png
Wenn Du Bilder mit einem transparenten Hintergrund hast, dann benötigst Du png-Bilder, da jpg keine Transparenz unterstützt.
Wenn ich keine Transparenz in einem Bild brauche, dann nutze ich standardmäßig jpg-Bilder.
Es gibt mehrere Wege, wie du ein Bild komprimieren kannst.
Ich zeige Dir den Weg, den ich standardmäßig gehe.
Als erstes solltest Du dir über die Größe der Datei Gedanken machen die du auf der Seite maximal brauchst.
Wenn du weisst, das auf der Seite eine Größe von maximal 800 x 800 Pixel benötigt werden, dann macht es keinen Sinn dort eine Grafik mit den Abmessungen 2000 x 2000px einzubinden.
Von der Ansicht her, wird es zwar keinen Unterschied geben, aber die Datei mit den 2000 x 2000 Pixeln ist von der Kapazität deutlich größer und je größer eine Datei ist, desto länger ist auch die Ladezeit der Seite und das wollen wir nach Möglichkeit verhindern.
Eine Datei die Du auf der Seite einbindest sollte eine Größe von 300 Kb nicht überschreiten, je kleiner die Datei, desto besser ist das natürlich.
Da ich mich nicht sonderlich gut mit Grafikprogrammen auskenne, nutze ich i.d.R. IrfanView. IrfanView ist ein kostenloses und einfaches Grafikprogramm, was nicht so viele Funktionen hat, dafür aber vollkommen ausreichend ist.
In diesem Beispiel möchte ich eine Bannergrafik über die volle Breite auf die Startseite meines Shopware 5 Shops einbinden.
In diesem Fall nutze ich eine Bildbreite von 1920px. Die Breite hat bei mir immer sehr gut gepasst.
Ich habe mir ein Bild von Freepik heruntergeladen.
Dieses Bild hat eine Dateigröße von 22,24 MB und hat eine Auflösung von 6000 x 4000 Pixel.
Dieses Bild ist für unseren Shop natürlich viel zu groß.
Mein Ziel ist es, das Bild auf eine Bildgröße von 1920 x 600px zu bekommen und auf eine Dateigröße von maximal 300 Kb.
Bevor ich das Bild komprimiere bringe ich es erst mal auf die richtige Größe.
Um das Bild jetzt auf die richtige Größe zu bringen, öffne ich das Bild erst mal mit IrfanView.
Danach klicke ich im Menü auf “Bild->Größe ändern…“
Jetzt gebe ich bei “Breite” 1920 ein. Dadurch ändert sich die Höhe automatisch, da der Haken bei “Proportional” gesetzt ist, dadurch bleiben die Proportionen des Bildes, bei Änderung der Breite oder der Höhe, erhalten.
Nach der Größenänderung hat das Bild jetzt eine Größe von 1920 x 1320px.
Die Breite habe ich jetzt schon mal passend, aber die Höhe möchte ich noch auf 600px verkleinern.
Dazu ziehe ich jetzt ein Quadrat mit gedrückter linker Maustaste in die Grafik rein, um so einen Teilbereich aus der Grafik “herauszuschneiden”.
Das Quadrat geht über die gesamte Breite, da wir die Breite von 1920px beibehalten wollen.
Wenn wir mit der Maus in den Randbereich des Quadrates fahren, dann erscheint ein Doppelpfeil. Hierüber können wir das Quadrat dann vergrößern oder verkleinern.
Wenn du das Quadrat vergrößerst, dann siehst Du oben in der Titelzeile wie sich die Höhenangabe verändert und wenn Du die entsprechende Höhe erreicht hast, dann kannst Du die Maustaste wieder loslassen.
Danach klickst Du in der Menüleiste auf das Kopierensymbol oder du benutzt auf der Tastatur die Tastenkombination STRG + C.
Und anschliessend klickst du im Menü auf “Bild->Neues (leeres) Bild erstellen…” und bestätigst den erscheinenden Dialog noch mit “OK“
Danach klickst Du oben in der Menüleiste auf das Einfügensymbol oder du benutzt auf der Tastatur die Tastenkombination STRG + V.
Jetzt habe ich genau die Bildgröße die ich wollte, nämlich 1920px x 600px.
Zum Schluss klickst du noch auf “Datei->Speichern unter…“, damit die Datei auf deiner Festplatte gespeichert wird.
Nachdem Speichervorgang hat die Datei nur noch eine Größe von 1,09 MB.
Für die Webseite oder den Shop ist das noch zu viel, deshalb komprimieren wir die Datei zusätzlich noch.
Dazu öffnen wir jetzt die Webseite compressor.io oder du kannst auch auf die unten stehende Grafik klicken.
Du kannst aber auch die Seite https://tinypng.com/ nutzen.
Ich nutze in diesem Beispiel compressor.io.
Klick jetzt einfach auf den Button “Select files” und wähle die Datei aus, die du gerade von der Größe her angepasst hast, aus.
Nachdem die Datei ausgewählt wurde, wird die Datei sofort komprimiert.
Die Datei wurde jetzt auf 190 KB komprimiert.
Jetzt musst Du nur noch auf den Button “Download” klicken, um die komprimierte Datei herunterzuladen.
Die Datei wurde jetzt insgesamt von 22,24 MB auf 190 KB verkleinert und das in fast gleichbleibender Qualität
Ergebnis
