COS-General

Was ist automatische Bildgrößenanpassung?

Zuletzt aktualisiert am: April 29, 2016

Die automatische Bildgrößenanpassung ist eine Funktion, die auf allen HubSpot-Portalen standardmäßig aktiviert ist. Sie wird verwendet, um Bilder zu optimieren, die Browserladezeiten zu verkürzen und den Google PageSpeed-Score zu erhöhen.

Die automatische Bildgrößenanpassung nimmt ein ursprünglich großformatiges Bild und optimiert es im Hinblick auf die Größe, in der Sie es auf Ihrer Website anzeigen. Dies führt zu einer deutlichen Verkürzung der Zeit, in der der Browser das Bild auf der Seite lädt. Wenn ein Benutzer beispielsweise ein Bild im Format 5000 Pixel x 5000 Pixel hochlädt, dieses auf der Website aber nur im Format 500 Pixel x 500 Pixel angezeigt wird, muss der Browser zuerst zusätzliche Arbeit leisten, weil er erst das ganze Bild herunterladen und dann auf die Anzeigegröße reduzieren muss. Ein Blick auf die Attribute für Höhe und Breite im HTML-Code einer Webseite zeigt, dass die Größe der Bilder bei der automatischen Bildgrößenanpassung automatisch beim ersten Laden der Seite angepasst wird und die Version mit der geänderten Größe dann anschließend in unserem CDN im Cache gespeichert wird. Nach dem ersten Laden der Seite ersparen wir dem Endbenutzer das Herunterladen unnötiger Inhalte, die sich nicht auf die Darstellung des Bildes auf der Seite auswirken.

Sehen wir uns dies in der Praxis an:

Vorher:

Vom Benutzer hinzugefügte Abbildung
Vom Benutzer hinzugefügte Abbildung

Nachher:

Vom Benutzer hinzugefügte Abbildung
Vom Benutzer hinzugefügte Abbildung

Sollte ich die Größe meiner Bilder immer noch offline ändern?

Ja. Eine Größenanpassung auf die genaue Anzeigegröße der Bilder ergibt immer noch eine höhere Qualität, als wenn die Größe bei der Zustellung angepasst wird. Photoshop und sogar die Vorschau-App von OS X haben wirklich gute Algorithmen für die Anpassung der Bildgröße, so dass die Bilder auch bei sehr starker Verkleinerung noch gut aussehen. Dies gilt auch für die Bildgrößenanpassung mit dem integrierten Editor des Datei-Managers.

Was bedeutet dies für die Retina-Unterstützung?

Bilder auf Geräten mit hoher Bildschirmauflösung (in der Regel über 200 Pixel pro Zoll, je nach dem typischen Betrachtungsabstand) würden sehr klein aussehen, wenn sie in ihrer nativen Auflösung angezeigt würden. Safari und andere Browser, die Retina-Displays unterstützen, vergrößern die Bilder, um ihre Proportionen anzupassen. Dadurch können die Bilder etwas unscharf werden. Eine mögliche Lösung für dieses Problem wäre das Hochladen von Bildern in einer doppelt so großen Auflösung, wie auf Nicht-Retina-Displays angezeigt, und die Größe der Bilder im Browser anzupassen. Dies ist jedoch nicht optimal, weil es die meisten Benutzer dazu zwingt, Bilder herunterzuladen, die wesentlich größer sind (doppelte Größe, also vierfache Bytemenge). Das Hinzufügen von noresize (Größe nicht anpassen) ist eine Lösung für Bilder, deren Größe absichtlich für die Retina-Anzeige verdoppelt wurde, aber es gibt bessere Lösungen. Retina.js ist eine kleine JavaScript-Datei, die Bilder nur auf Retina-Displays durch ihr Retina-Gegenstück ersetzt. Sie können dies auch mit CSS umsetzen. Apple bietet einen recht gründlichen Artikel für Entwickler zu diesem Thema an.

Kann ich die automatische Bildgrößenanpassung deaktivieren?

In einzelnen Fällen kann es vorkommen, dass Sie diese Funktion deaktivieren möchten. Dies können Sie durch Hinzufügen des Abfrageparameters „noresize“ zur Bild-URL erreichen.