GIMP ist ein freies Bildbearbeitungsprogramm unter der GNU General Public License, verfügbar für Windows, macOS und Linux. Für Webseiten sind zwei Arbeitsschritte entscheidend, und beide werden häufig übersprungen. Erstens das Verkleinern auf die t…
Grafik im Web: Formate, Größen, Werkzeuge
Bilder machen auf den meisten Websites den größten Teil der übertragenen Datenmenge aus. Damit ist die Bildbearbeitung der Ort mit dem größten Hebel für die Ladezeit – und zugleich der am häufigsten übersprungene Arbeitsschritt.
Welches Format wofür
WebP und AVIF für Fotos: deutlich kleinere Dateien bei vergleichbarer Qualität als JPEG. SVG für Symbole, Logos und Diagramme: verlustfrei skalierbar, per CSS einfärbbar, meist winzig. PNG für Bilder, die eine durchsichtige Fläche brauchen und nicht als SVG vorliegen. JPEG bleibt als Rückfall sinnvoll, wenn ältere Geräte eine Rolle spielen.
Die zwei Arbeitsschritte, die wirklich zählen
Erstens: auf die tatsächlich benötigten Maße verkleinern. Ein Foto direkt aus der Kamera ist ein Vielfaches dessen breit, was angezeigt wird. Zweitens: im passenden Format exportieren. Beides erledigt GIMP in wenigen Minuten.
Was HTML dazu beiträgt
Die Angaben width und height reservieren den Platz, bevor die Datei geladen ist, und verhindern springendes Layout. Mit srcset lässt sich dieselbe Aufnahme in mehreren Größen anbieten, aus denen der Browser selbst wählt. Und ohne Alternativtext ist ein Bild für einen Teil der Nutzer nicht vorhanden – näheres im Eintrag alt-Attribut.
Werkzeuge in Grafik
SVG-Dateien aus Zeichenprogrammen enthalten regelmäßig ein Vielfaches dessen, was sie brauchen: Editor-Angaben, leere Gruppen, Nachkommastellen, die niemand sieht. Wer solche Dateien in HTML einbettet, schleppt das in jedem Dokument mit. Dieses Wer…
Die Frage bei Bildern lautet selten „welches Format", sondern „wie weit kann ich gehen, bevor es auffällt". Diese Anwendung beantwortet sie sichtbar: links das Original, rechts das Ergebnis, dazwischen ein Regler, dazu die Dateigröße in Echtzeit. F…
Ein Symbol im Reiter klingt nach einer Kleinigkeit und ist eine der undankbarsten Aufgaben: unterschiedliche Größen, unterschiedliche Formate, dazu Angaben für Startbildschirme und die Manifestdatei. Von Hand vergisst man immer eines. Hier lädt man…
Das Zeichenprogramm für Vektorgrafik – und für HTML-Arbeit besonders interessant, weil SVG sein natives Speicherformat ist. Was hier entsteht, kann direkt ins Dokument. Der für dieses Portal wichtigste Teil ist der eingebaute XML-Editor: Er zeigt d…