Responsive Grafiken mit HTML

Grafiken optimieren über die Bildgröße

Testen Sie unsere 1957 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Reduzierung der in Pixel gemessenen Bildgröße lohnt sich immer. Die Beispieldatei wird in den drei Varianten small, medium und large bereitgestellt.

Transkript

Neben der Optimierung der Dateigröße in Kilobyte oder Megabyte, je nachdem, gibt es noch die Optimierung der Bildgröße, die in Pixeln gemessen wird. Hier ist das Beispielbild, und das hat im Original 4.272 Pixel Breite, das sind 6.040 Kilobyte. Nach der Optimierung durch JPEGmini bleiben davon noch 1.718 kB übrig. Wenn man jetzt die Bildgröße optimiert und sagt: Im Web brauche ich nicht mehr als 800 Pixel in der Breite, dann geht das noch weiter runter, und dann bleiben noch so ca. 100 kB übrig. Wenn man das vergleicht mit dem Original, ist das eine ganz schöne Reduzierung. Ich habe für dieses Videotraining drei verschiedene Versionen erstellt von dieser Beispielgrafik: einmal eine kleine Version, 400 Pixel breit, die 35 kB "wiegt". Dann eine mittlere Variante von 800 Pixel, die 99 kB hat, und eine etwas größere, mit 1.600 Pixel. Damit man die besser unterscheiden kann, steht links oben in dem Bild small, medium und large. Und das sind auch die Dateinamen für diese Grafiken. Sie sehen hier large, medium und small, das sind die drei Dateien. Small hat hier 36, 35,4. Medium hat 99, wenn ich das etwas größer mache. Large hat 323, hier unten, da gibt es dann kleine Rundungsfehler. So genau kommt's aber auch nicht drauf an. small.jpg, medium.jpg und large.jpg in verschiedenen Größen mit 400, 800 und 1.600 Pixeln.

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!