Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Responsive Grafiken mit HTML

Grafiken optimieren über die Dateigröße

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Zur Optimierung der Dateigröße gibt es Spezialtools wie jpegmini.com, das in diesem Film kurz vorgestellt wird. Die Beispielgrafik wird dabei von 6 MByte auf 1,7 MByte reduziert.

Transkript

In diesem Film möchte ich Ihnen kurz zeigen, wie Sie Grafiken optimieren können, denn, wie der Untertitel hier besagt, jedes Kilobyte zählt. Die Optimierung von Grafiken beginnt im Grunde genommen mit der Überlegung, ob die Grafik dem Besucher wirklich einen Mehrwert bringt. Besonders auf mobilen Geräten zählt buchstäblich jedes Kilobyte, da oft nicht nach Zeit, sondern nach übertragener Datenmenge abgerechnet wird. Wenn man also sagt, die Grafik ist erwünscht, dann legt man los und guckt zunächst einmal, was von dieser Grafik wird wirklich gebraucht. Man kann einen Bildausschnitt definieren, und wirklich nur das nehmen, was man wirklich braucht. Bei Panoramabildern ist das natürlich ein bisschen schwieriger, aber oft ist das möglich, dass man nicht das ganze Bild nimmt, sondern sagt, das Detail in der Mitte da, das brauche ich am meisten. Dann kann man die Bildgröße optimieren. Also statt fünf Megapixel, 5000 mal sonst wie viele Pixel, reduziert man das auf eine für das Web angemessene Größe, wie zum Beispiel 800 Pixel Breite oder auch 1200, je nachdem, was man so braucht. Aber man nimmt nicht das Original, und man kann anschließend noch die Dateigröße optimieren. Also mit Spezialtools wie "JPEGmini", was ich Ihnen gleich noch zeige, kann man das so weit wie möglich reduzieren. Diese drei Schritte sind angesagt. Als Beispieldatei dient eine Grafik, die heißt hier "porto-altstadt-original". Porto in Portugal, und hier unten ist die Grafik auch schon. Ich ziehe das mal etwas größer, dann können Sie das besser sehen. Das ist die Grafik, Porto in der Dämmerung. Das Original ist 6043KB groß, und das ist ein bisschen sehr viel für die Einbindung im Web. Deswegen gibt es ein Tool, wie zum Beispiel mit "JPEGmini". Das gibt es browserbasiert, hier in Firefox. Ich lade die Seite einfach nochmal neu, dann sieht man diese Animation von Beginn. Hier unten sehen Sie da schön diese Grafik; ist nach der Optimierung 2872, und vor der Optimierung war es 18MB. Das hat sich also richtig gelohnt. Hier kann man die Qualität vergleichen, mit dem Mauszeiger einfach rüber. Das ist bei "jpegmini.com". Wem das gefällt, der kann das auch herunterladen, und dann offline benutzen. Ich klicke hier jetzt einfach einmal auf "Try it now", und hole nochmal eben die Grafik. So, die ziehen wir hier einfach rüber, und jetzt wird das hochgeladen und komprimiert. "Upload complete", hier sehen Sie das Bild, links das Original, rechts die komprimierte Version. Komprimiert 1720, das Original war 6043, also dreieinhalb mal Unterschied. Das hat sich durchaus gelohnt. Es gibt für andere Grafikformate andere Tools, oder auch überhaupt, insgesamt andere Onlinetools. Hier ist zum Beispiel "tinyPNG", "tiny ping" gesprochen, meistens. Hier kann man auch JPEGs hochladen, trotz des Namens, bis zu 20 Grafiken, 5MB Maximum. Da hätte unseres nicht ganz gepasst. "Kraken.io" gibt es auch in einer kostenlosen Version zum Ausprobieren. Hier ist es ganz ähnlich, da unten steht, wie viele Bilder sie schon optimiert haben. Für den Mac gibt es noch "ImageOptim", eine Kombination von verschiedenen Tools, die unter einer Benutzeroberfläche zusammen bedienbar sind. Also, hier noch einmal in der Übersicht: Die Dateigrößenoptimierung, Sie sehen, das hat sich durchaus gelohnt. "JPEGmini.com", für JPEGs ein wirklich brauchbares Tool, andere Tools sind "tinypng.com" und "kraken.io".

Responsive Grafiken mit HTML

In diesem Video-Training lernen Sie, wie Sie mit Attributen und Elementen wie srcset, sizes und responsive Grafiken per HTML einbinden können.

1 Std. 39 min (25 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!