Mini-Shettys beim Rennen

Optimiere die Ladezeit deiner Website – Dank kleiner Bildgrössen

  • vor 3 Jahren

Die Zeit, vom Klick auf einen Link bis zur vollständigen Anzeige der Homepage nennt man Ladezeit. Diese Ladezeit wird nun (unter anderem) von den Bildern die darauf zu sehen sind beeinflusst – oft übrigens ganz gewaltig!

Das fällt Laien, die ihre Website selbst pflegen, gar nicht auf und leider manchem Profi auch nicht. Besonders, weil wir nicht ständig auf unsere eigenen Seiten klicken. Doch es ist ein ganz wesentlicher Erfolgsfaktor im Netz. Denn Internetnutzer sind äußerst ungeduldig und klicken schnell wieder weg. Erschwerend hinzu kommen die vielen mobilen Endgeräte, bei denen oft die Internetverbindung nicht die Schnellste ist.

Es ist also extrem wichtig, dass Sie Ihre Bilder für die Netzdarstellung optimieren.

Bilder beeinflussen die Ladezeit vor allem durch:

  • die Abmessung, also wie lang und wie breit ein Bild ist. Länge und Breite wird für eine Website immer in Pixeln angegeben. Ein Pixel ist allerdings keine fixe Grösse, sondern der kleinste Bildbaustein. Ein Foto setzt sich aus Millionen solcher Pixel zusammen.
  • die Auflösung: Je enger die Pixel auf der gleichen Fläche aneinandergedrängt werden, je genauer und klarer ist das Foto. Die Auflösung wird in dpi (dots per inch )* angegeben.

Dots per inch bedeutet: wie viele Punkte pro Inch. 1 Inch oder Zoll entspricht 2,54cm. Eine Kamera macht hochauflösende Fotos, da diese oft ausgedruckt werden. Und dafür braucht man mindestens 300dpi. Computerbildschirme können aber nicht mehr als 72dpi anzeigen. Das heisst Ihre Fotos auf der Website werden qualitativ nicht besser angezeigt, wenn Sie sie direkt aus dem Fotoapparat auf Ihrer Homepage verwenden. Der Bildschirm kann ja nicht mehr dpi als 72 anzeigen. Sie erhöhen nur die Ladezeit beträchtlich und strapazieren die Geduld Ihrer Besucher.

  • den Grad der Komprimierung: Ihnen ist sicher schon aufgefallen, dass Ihre Fotos mit den Buchstaben jpg, png, gif oder tif enden. Das sind die gängigen Dateiendungen für Bilder. Sie bezeichnen in welchem Dateiformat Ihr Foto abgespeichert ist. Am häufigsten sehen Sie .jpg oder .jpeg. Das ist sehr die beste Wahl für Fotos auf einer Website.
    Hinter diesem Format verbirgt sich ein Komprimierungsprogramm. Es entfernt Bildpunkte die das menschliche Auge sowieso nicht wahrnimmt. Dadurch behält das Bild zwar seine Abmessung und hat trotzdem weniger Kilobyte.

Byte, Kilobyte (KB) oder auch Megabyte (MB) ist die Masseinheit für Dateien. Beim .jpg können Sie ganz einfach verschiedene Komprimierungsgrade einstellen. Meist sehen Sie schon die Vorschau des Bildes und können so sehen ab wann das Bild etwas unscharf wird. Besonders gut sieht man das an Farbübergängen. Sie wählen hier also die kleinstmöglich Grösse bei doch noch klarem, gutem Foto.

  • die Anzahl der Fotos: Jedes Bild, dass Sie in Ihre Website einbinden hat eine bestimmte Grösse. Je mehr Bilder Sie einbinden je länger dauert es bis die Seite geladen wird. Deshalb empfehle ich Ihnen sich gut zu überlegen welche und wie viele Bilder Sie verwenden wollen. Hier gilt wieder einmal: Weniger ist mehr!
    Die Besucher Ihrer Website werden es Ihnen danken.

Auflösung, Format und Grösse – Alles, was Sie beim Verkleinern von Bildern beachten müssen

Wer kennt den Ausspruch nicht: Ein Bild sagt mehr als tausend Worte. Damit das aber so ist, muss das Bild auch eine Aussage haben und ansprechend sein. Das Internet ist schnelllebig, und wenn der erste Eindruck nicht überzeugend ist, ist Ihr Besucher ruck zuck wieder weg. Ein oder mehrere gut gewählte und korrekt verkleinerte Bilder animieren zum Bleiben und weiterklicken.

Die richtige Auflösung einstellen

Bilder, die Sie von der Kamera auf den PC laden, haben meist eine Auflösung von 300dpi. Diese ist für den Ausdruck bestimmt und nicht für das Web. Für den PC reicht eine Auflösung von 72dpi.

Abmessung verkleinern

Sie haben Ihre Fotos vom Fotoapparat auf Ihren PC geladen und sich das passende für Ihre Website ausgesucht. Als nächsten Schritt überlegen Sie sich, wie gross das Bild denn sein muss, das heisst wie breit und wie hoch es sein soll.
Sobald Sie das wissen, verkleinern Sie das Bild in einem Programm Ihrer Wahl. Damit Ihr Bild später nicht verzerrt ist, müssen Sie es proportional verkleinern. Wenn Ihr Bild also 3600×2400 Pixel (px) gross ist und sie es auf eine Breite von 600px verkleinern möchten, müssen Sie auch die Länge auf 400px einstellen. Ansonsten wird das Bild verzerrt/gestaucht. Keine Angst Sie müssen das nicht ausrechnen. Die meisten Programme bieten die Möglichkeit entweder Breite oder Höhe einzugeben und dann “proportional” zu wählen. Dann rechnet das Programm für Sie.

Verzerrtes Foto von einem Shetty

So sollte ein Foto nicht aussehen. Durch falsche Einstellungen wird das Pony gequetscht.

Korrekt verkleinertes Foto eines Shettys

Das richtige Dateiformat auswählen

Nachdem Sie Ihr Bild korrekt verkleinert haben, stellt sich nun die Frage nach dem richtigen Dateiformat.

  • Handelt es sich um ein farbiges Foto, ist die richtige Wahl ein .jpg. Denn dieses Dateiformat kann 16,7 Millionen Farben darstellen, aber keine transparenten Bereiche.
  • Handelt es sich um ein Logo oder ein anderes Bild mit wenig Farben, ist das .gif meistens die richtige Wahl. Dieses Dateiformat kann nur 256 Farben darstellen, dafür aber auch transparente Bereiche. Bei wenigen Farben bleibt die Dateigrösse unter der eines .jpg
  • Handelt es sich um ein vielfarbiges Logo oder ein ähnliches Bild mit transparenten Anteilen, bietet sich das .png an. Sicher wird die Dateigrösse grösser als bei einem .jpg oder .gif, dafür werden transparente Bereiche übernommen und optimal dargestellt.

Am häufigsten werden Sie sicher .jpg benutzen. Wenn Ihr Bild keine transparenten Bereiche hat, ist es immer eine gute Wahl.

Richtig abspeichern

JPG

Beim .jpg müssen Sie, bevor Sie Ihr Foto abspeichern können, auswählen wie stark Sie ihr Bild komprimieren wollen. Sie müssen bestimmen, wie viele Bildinformationen beim Abspeichern verloren gehen sollen. In der Regel reicht es für das Web, wenn sie das Bild um 50% komprimieren. Wenn Ihr Programm eine Vorschau bietet, können Sie mit dem Regler spielen. Sie sehen dann, ab welchem Komprimierungsgrad sich das Bild verschlechtert. Gleichzeitig sehen Sie auch, wie gross die Datei ist.

Gute Qualität JPG
Schlechte .jpg Qualität

GIF

Beim .gif sind die Wahlmöglichkeiten begrenzter. Sie können lediglich einstellen, wie viele Farben dargestellt werden sollen. Wenn Sie ein Bild mit lediglich 2 Farben (bsp. schwarz und weiss) haben, können Sie es mit 2 Farben abspeichern. Dadurch wird die Dateigrösse viel kleiner. Für die meisten Bilder werden Sie 256 Farben einstellen.

Dateiformat .gif
Dateiformat mit 256 .gif

PNG

Hier haben Sie keine Wahlmöglichkeiten. Ihr Bild wird automatisch verkleinert.

Einen korrekten Namen vergeben

Fast geschafft. Sie müssen das Bild nur noch unter einem Namen abspeichern. Speichern Sie es nicht einfach unter der Nummer ab, die Ihr Fotoapparat vergeben hat, sondern geben Sie ihm einen aussagekräftigen Namen. Wenn Sie ein Porträt von sich selbst abspeichern, nennen Sie es auch so: portraet_claudia_barfuss.jpg. Dieser Name hilft Ihnen und nicht zuletzt auch den Suchmaschinen das Bild richtig einzuordnen.

Beachten Sie bitte die Schreibweise:

  • Alles in Kleinbuchstaben
  • Ohne Sonderzeichen wie – / + und ähnliche
  • Verbindung zwischen zwei Wörtern mit Unterstrich

Die korrekte Schreibweise ist entscheidend, damit Ihr Bild problemlos auf jedem Server angezeigt werden kann.

Damit du es dir ausdrucken kannst, habe ich ein Übersichtsblatt über das korrekte benennen von Bildern erstellt.

7 Programme, mit denen Sie Ihre Bilder verkleinern können

In den beiden vorangegangenen Artikeln haben Sie sich die Grundlagen erarbeitet um Bilder verkleinern zu können. Nun benötigen Sie dafür noch das richtige Werkzeug.

Das ist gar nicht so einfach zu finden und hängt natürlich auch mit Ihren Vorlieben zusammen. Denn jeder von uns arbeitet anders und sucht sich danach “sein” Programm aus. Damit Sie im Programmdschungel nicht verloren gehen, stelle ich Ihnen 7 Programme vor.

Eine gute Nachricht – fast auf jedem PC ist ein Bildbearbeitungsprogramm vorhanden!

Nicht jedem liegt dieses Programm. Deshalb finden sich in Netz noch sehr viele weitere Programme zur Bildverkleinerung. Einige müssen auf den eigenen PC heruntergeladen andere können online verwendet werden.

Online-Programme

https://www.bildverkleinern.com/ – hier hat man ein paar Möglichkeiten mehr. Man kann das Bild noch schärfen, einen Ausschnitt erstellen oder einen Text dazuschreiben. Es ist einfach zu bedienen und verkleinert hervorragend.

https://www.fotosverkleinern.de/ – das letzte Tool bietet etliche Auswahlmöglichkeiten. Dazu auch noch die Möglichkeit einen Ausschnitt zu erstellen. Auch dieses Programm ist einfach zu bedienen. Es liefert gute Ergebnisse und eine kleine Dateigrösse.

Update 27.11.2017 
https://www.fotobearbeitung-online.de/ – ich empfehle dir dieses Programm, dass ich entdeckt habe und das mir am Besten gefällt. Zu diesem Tool habe ich dir folgendes Video erstellt:

UPDATE am 10.06.2016

https://compressor.io/ – Neues und sehr ansprechendes Tool um Bilder zu komprimieren. Die Dateigrösse wird stark reduziert, die Abmessung bleibt.

https://tinypng.com/ – Noch ausgereifter und sogar mit einem Plugin für WordPress und Magento. Es können bis zu 5 Bilder gleichzeitig hochgeladen werden. Die Dateigrösse wird stark reduziert, die Abmessung bleibt.

Offline-Programme

PaintNET –https://www.getpaint.net/ mit PaintNET laden Sie ein Bildbearbeitungsprogramm mit vielen Funktionen herunter. Bilder verkleinern ist damit sehr einfach und die Dateigrössen klein. Es bietet natürlich viel mehr Möglichkeiten für weitere Bildbearbeitung als die Online-Programme.

Dieses Video erklärt Ihnen genau wie Sie Bilder mit PaintNET verkleinern.

Picasa – https://www.google.com/intl/de/picasa/ – Picasa ist sicher eines der bekanntesten, kostenlosen Programmen im Netz. Es gehört zu Google. Man kann damit nicht nur Bilder verkleinern es ist ein richtiges Bildbearbeitungsprogramm mit vielen Funktionen. Ein grosser Vorteil ist sicher, dass man mehrere Bilder gleichzeitig verkleinern kann. Man hat auch die Möglichkeit die Fotos in Alben zu veröffentlichen.

Eine genaue Anleitung, wie Sie vorgehen müssen um Bilder zu verkleinern, liefert folgender Artikel:

https://support.google.com/picasa/answer/13821?hl=de

Für alle diejenigen, die, wie ich selbst, plötzlich von den Möglichkeiten der Bildbearbeitung fasziniert sind, möchte ich noch das Programm Gimp erwähnen. https://www.gimp.org/ Es bietet enorm viele Möglichkeiten. Es ist dadurch allerdings auch relativ komplex und benötigt einige Einarbeitungszeit.

6 Fragen zum Verkleinern von Bildern und die Antworten darauf

Sie haben sich in den letzten Artikeln informiert und gelernt, was wichtig ist, wenn Sie Bilder verkleinern. Sie haben sich auch für ein Programm entschieden und voller Freude mit der Arbeit begonnen. Ich hoffe, alles hat geklappt und Sie haben nun auf Ihrer Website optimierte Bilder. Wenn nicht lesen Sie hier weiter. Sie finden hier 6 der häufigsten Fragen aufgelistet und beantwortet. Wenn Sie weitere Fragen haben mailen Sie mir, ich helfe Ihnen gerne weiter.

Warum kann ich mein Bild in dem Programm meiner Wahl nicht öffnen?

Kontrollieren Sie die Dateiendung Ihres Bildes. Wenn dort zum Beispiel.raw steht oder .tif können gewisse Programme nicht damit umgehen. Es kann sein, dass das von Ihnen gewählte Programm nur mit .jpg, .gif oder .png umgehen kann. Meist reicht das auch aus. Um Bilder mit anderen Dateiformaten zu verkleinern, müssen Sie allenfalls ein anderes Programm wählen.
Wenn Sie die Fotos selbst gemacht haben und solche Probleme in Zukunft vermeiden möchten, ist es am einfachsten die Kamera auf .jpg Bilder einzustellen. Denn ohne ein ausgereiftes Bildbearbeitungsprogramm können Sie von den .raw-Dateien ohnehin nicht profitieren.

Warum muss ich die Grössenangaben für mein Bild in Pixeln machen?

Ich weiss, die Angabe in Pixel ist gewöhnungsbedürftig. Manche Programme bieten deshalb auch die Möglichkeit die Grösse in Zentimetern anzugeben. Trotzdem empfehle ich Ihnen sich an die Pixel zu gewöhnen. Denn die Auflösung eines Bildschirms oder einer Kamera wird immer in Pixel angegeben. Nie in Zentimeter. Mit ein wenig Übung finden Sie sich da bald zu Recht. Und am Anfang hilft Ihnen sonst der “Pixelumrechner” weiter: https://www.pixelrechner.ch/

Mein Bild, dass ich als .png abgespeichert habe, hat noch zu viele Kilobytes. Wieso kann ich es nicht nochmals als .jpg abspeichern und so die Dateigrösse verkleinern?

Das Format .jpg kann keine Transparenzen darstellen. Das bedeutet, sobald Ihr Bild transparente (durchsichtige) Anteile enthält muss es zwingend als .gif oder .png abgespeichert werden. Denn nur diese beiden Dateiformate sind in der Lage damit umzugehen. Das gilt dann, wenn Sie Ihre Bilder für Ihre Homepage verwenden, in Sozialen Netzwerken teilen oder per Mail verschicken. Wenn Sie die Bilder ausdrucken gelten andere Bedingungen. Aber nie kann das .jpg transparente Bildteile auch transparent anzeigen. Sie werden einfach weiss eingefärbt.

Warum verschlechtert sich die Qualität wenn ich das gleiche Bild mehrmals öffne und wieder als .jpg abspeichere?

Jedes Mal, wenn Sie ein Bild als .jpg abspeichern wird es neu komprimiert. Das heisst Ihr Bild verliert einen Teil seiner Bildinformationen. Das ist ja auch so gewollt, damit die Dateigrösse kleiner wird. Wenn man ein Bild mehrmals abspeichert verliert es jedes Mal einen weiteren Teil dieser Informationen. Ähnlich wie wenn Sie ein Bild fotokopieren und dann die Kopie wieder fotokopieren. Irgendwann können Sie kaum mehr sehen was da mal abgebildet war.

Bei meinem Kollegen hat das Foto auf meiner Homepage andere Farben. Warum?

Weil jeder Bildschirm Farben anders anzeigt. Er ist etwas anders kalibriert wie die Fachleute sagen. In der Systemsteuerung auf Ihrem Computer, haben Sie die Möglichkeit die Helligkeit Ihres Bildschirms und die Farben anzupassen. Je nach Einstellungen die Sie vorgenommen haben oder die vom Werk eingestellt waren, sehen die Farben ein wenig anders aus. Das ist leider nicht zu ändern.

Soll ich lieber ein Programm auf meinen PC herunterladen oder eines der Online-Programme verwenden?

Letztlich ist das eine persönliche Entscheidung. Solange Sie nur einige Bilder verkleinern möchten, würde ich Ihnen zu einem Online-Programm raten. Sobald Sie aber Ihre Bilder auch bearbeiten wollen kommen Sie um ein Offline-Programm nicht herum. Damit Sie sich leichter entscheiden können, habe ich Ihnen die Vor- und Nachteile eines Programms, dass Sie auf den PC herunterladen aufgeschrieben:

Vorteile:

  • Man bearbeitet die Bilder auf dem eigenen PC und hat die Kontrolle.
  • Der Funktionsumfang ist meist viel grösser als bei einem Online-Programm.
  • Ich brauche nicht online zu sein um die Bilder zu bearbeiten.

Nachteile:

  • Man muss das Programm herunterladen und installieren.
  • Es braucht Platz auf dem eigenen System.
  • Wenn man das Programm nicht von einer seriösen Quelle herunterlädt, kann man sich Viren einfangen.
Mini-Shettys

Hoi, ich bin Claudia Barfuss

Ich arbeite mit Menschen zusammen, bei denen die Tiere im Mittelpunkt stehen und die sich eine Homepage wünschen, die sie bei der Kundengewinnung unterstützt.

Ich begleite sie durch den Dschungel von Technik, Inhalten und Design. Wir arbeiten gemeinsam an ihrer neuen Website, damit sie sich mit ihr rundum wohl fühlen und neue Kunden anziehen.

Mehr von mir findest du auf:

Claudia Barfuss mit Hund und Katzen

Kommentar hinterlassen:

Twitter Facebook