Automatische Verkleinerung von Bildern auf Landing Pages / Websites

Angi · ‎Jul 30, 2024

Hallo Community,

wir haben auf verschiedenen Landing Pages / Websites / im Newsletter Bilder integriert und haben festgestellt, dass der Browser oft recht lang lädt, bis alle Bilder erscheinen.

Ich dachte bisher, dass HubSpot automatisch hochgeladene Bilder verkleinert, aber scheinbar gibt es doch Unterschiede zwischen den verschiedenen Medien.

Daher folgende Fragen:

- Verkleinert HubSpot grundsätzlich automatisch alle Bilder? Muss man diese Funktion bewußt aktivieren?

- Gibt es Unterschiede im Verkleinern wenn man ein Theme benutzt bzw. gibt es hier Abhängigkeiten?

- Gibt es Unterschiede im Ladeverhalten zwischen Landing Pages und Websites (Theme!)

- sollten wir alle Bilder sicherheitshalber im Format webp abspeichern, oder gibts es auch hier einen Automatismus?

Freue mich über Erfahrungswerte und Tipps.

Viele Grüße und Danke!

Angi

mii · ‎Jul 31, 2024

Hallo Mia, Hallo Angi,

für die Nutzung des HubSpot-Bildprozessors, welcher die Bilder automatisch verkleinert, muss das Bild unter 1 MB groß sein. Das hat den Hintergrund, dass die Bilder in Echtzeit vom Server bereitgestellt werden. Und Bilder über 1 MB brauchen länger für die Neuberechnung, als stattdessen das Original auszuliefern.

Bilder mit einer Höhe oder Breite über 4096 Pixel werden ebenfalls nicht berechnet. Der beste Weg, ein Bild zu verkleinern, ist zunächst die Auflösung zu verringern. Um möglichst die Verringerung der Qualität zu vermeiden.

Das Ausgangsformat kann ein JPG oder PNG sein. HubSpot erstellt daraus ein WebP, auch wenn die Dateiendung in der Bild-URL auf das Ursprungsformat lautet, so ist der vom Server übertragene MIME-Type und die Komprimierung im WebP Format.

Der MIME-Type wird von den Metriken der SEO-Tools wie Google-Lighthouse nicht korrekt erkannt, wenn dass in der URL angegebene Format vom MIME-Type abweicht. Das führt zu falsch-positiven Fehlermeldungen für das Einsparungspotenzial bei der Bildgröße!

Ist das Ausgangsformat bereits als WebP in den Datei-Manager hochgeladen worden, findet keine erneute Berechnung durch den HubSpot Bildprozessor statt.

Für die automatisierte Bildkomprimierung muss das <img/> Bild-Tag auf der Webseite die Attribute mit Ausgangs-Wert für Höhe und Breite aufweisen. HubSpot errechnet dazu dann ein Source-Set für die niedrigeren Auflösungen.

Der Browser des Endgerätes lädt dann die für ihn passende Bilddatei aus dem errechneten Source-Set. Ist ein Bild vom Browser in einer höheren Auflösung bereits im Browser-Cache gespeichert, entfällt das Laden geringerer Auflösung durch den Browser.

Die Auflösung kann in HubSpot über den Datei-Manager manuell für ein Bild bearbeitet werden:
https://knowledge.hubspot.com/files/automatic-image-resizing-on-hubspot-content

Der HubSpot Bildprozessor kann ebenfalls manuell über die Template-Sprache HubL genutzt werden:
https://developers.hubspot.de/beta-docs/reference/cms/hubl/functions?uuid=2e1663d3-356f-4c81-bcc0-3e...

Generell zu beachten ist, dass auch das Seitenverhältnis des Bildes eine Rolle spielt. Zum Beispiel ein Hero-Banner Bild: Das wird auf mobilen Geräten in einem Hochformat entsprechend dem Display-Seitenverhältnis angezeigt. Während auf einem Desktop-PC ein Querformat erscheint. Das stark abweichende Seitenverhältnis bei Verwendung einer Bildquelle führt zu erheblichem Anschnitt. Das bedeutet, viel von dem Bild, welches geladen werden muss, liegt im nicht sichtbaren Bereich für den Betrachter. Sind also unnötige Datenmengen. Die Optimierung hier besteht darin, zwei Bildquellen zu verwenden, eine für Mobile und eine für Desktop. Und das Bild entsprechend im Seitenverhältnis zu seiner tatsächlichen Anwendung zuzuschneiden. Im Fall des Beispiels also als mobile Hero-Banner im Hochformat und als Desktop Hero-Banner im Querformat.

Gruß, mii

View solution in original post

mii · ‎Jul 31, 2024

Hallo Mia, Hallo Angi,

für die Nutzung des HubSpot-Bildprozessors, welcher die Bilder automatisch verkleinert, muss das Bild unter 1 MB groß sein. Das hat den Hintergrund, dass die Bilder in Echtzeit vom Server bereitgestellt werden. Und Bilder über 1 MB brauchen länger für die Neuberechnung, als stattdessen das Original auszuliefern.

Bilder mit einer Höhe oder Breite über 4096 Pixel werden ebenfalls nicht berechnet. Der beste Weg, ein Bild zu verkleinern, ist zunächst die Auflösung zu verringern. Um möglichst die Verringerung der Qualität zu vermeiden.

Das Ausgangsformat kann ein JPG oder PNG sein. HubSpot erstellt daraus ein WebP, auch wenn die Dateiendung in der Bild-URL auf das Ursprungsformat lautet, so ist der vom Server übertragene MIME-Type und die Komprimierung im WebP Format.

Der MIME-Type wird von den Metriken der SEO-Tools wie Google-Lighthouse nicht korrekt erkannt, wenn dass in der URL angegebene Format vom MIME-Type abweicht. Das führt zu falsch-positiven Fehlermeldungen für das Einsparungspotenzial bei der Bildgröße!

Ist das Ausgangsformat bereits als WebP in den Datei-Manager hochgeladen worden, findet keine erneute Berechnung durch den HubSpot Bildprozessor statt.

Für die automatisierte Bildkomprimierung muss das <img/> Bild-Tag auf der Webseite die Attribute mit Ausgangs-Wert für Höhe und Breite aufweisen. HubSpot errechnet dazu dann ein Source-Set für die niedrigeren Auflösungen.

Der Browser des Endgerätes lädt dann die für ihn passende Bilddatei aus dem errechneten Source-Set. Ist ein Bild vom Browser in einer höheren Auflösung bereits im Browser-Cache gespeichert, entfällt das Laden geringerer Auflösung durch den Browser.

Die Auflösung kann in HubSpot über den Datei-Manager manuell für ein Bild bearbeitet werden:
https://knowledge.hubspot.com/files/automatic-image-resizing-on-hubspot-content

Der HubSpot Bildprozessor kann ebenfalls manuell über die Template-Sprache HubL genutzt werden:
https://developers.hubspot.de/beta-docs/reference/cms/hubl/functions?uuid=2e1663d3-356f-4c81-bcc0-3e...

Generell zu beachten ist, dass auch das Seitenverhältnis des Bildes eine Rolle spielt. Zum Beispiel ein Hero-Banner Bild: Das wird auf mobilen Geräten in einem Hochformat entsprechend dem Display-Seitenverhältnis angezeigt. Während auf einem Desktop-PC ein Querformat erscheint. Das stark abweichende Seitenverhältnis bei Verwendung einer Bildquelle führt zu erheblichem Anschnitt. Das bedeutet, viel von dem Bild, welches geladen werden muss, liegt im nicht sichtbaren Bereich für den Betrachter. Sind also unnötige Datenmengen. Die Optimierung hier besteht darin, zwei Bildquellen zu verwenden, eine für Mobile und eine für Desktop. Und das Bild entsprechend im Seitenverhältnis zu seiner tatsächlichen Anwendung zuzuschneiden. Im Fall des Beispiels also als mobile Hero-Banner im Hochformat und als Desktop Hero-Banner im Querformat.

Gruß, mii

Angi · ‎Jul 31, 2024

Hallo Mii,

besten Dank für die auführlichen Informationen. Da habe ich einiges dazu gelernt, dass ich nicht wusste! Hoher Mehrwert! Danke!

MiaSrebrnjak · ‎Jul 30, 2024

Hi @Angi,

danke für deine Frage!

Ich wollte ein paar Experten um Hilfe bitten:

Hi @Anton & @mii, habt ihr vielleicht Tipps für @Angi wie man Bilder für Web optimieren kann?

Vielen Dank!

Beste Grüße

Mia, Community Team

Wusstest du, dass es auch eine DACH-Community gibt?
Nimm an regionalen Unterhaltungen teil, indem du deine Spracheinstellungen änderst

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings

Marketing & Content Hub | Fragen, Tipps & bewährte Methoden