Die richtige Bildgröße auf Webseiten – Teil 2
Bei der Gestaltung von Webseiten spielen Bilder eine Schlüsselrolle für das gesamte Benutzererlebnis. Hochwertige Bilder können eine Website optisch aufwerten und dabei helfen, die Geschichte Ihrer Marke zu erzählen.
Große oder schlecht optimierte Bilder wirken sich negativ auf die Seiten-Ladezeiten und das Benutzererlebnis auswirken.
In diesem Artikel besprechen wir Best Practices zur Optimierung von Bildern für die Webbereitstellung. Um Qualität und Leistung in Einklang zu bringen.
Bildauflösung optimieren
Die Bildauflösung, gemessen in Pixel pro Zoll (ppi) oder Punkten pro Zoll (dpi), hat einen großen Einfluss auf die Dateigröße. Höhere Auflösungen bedeuten mehr Pixel und einen größeren digitalen Fußabdruck. Im Internet angezeigte Bilder werden jedoch im Allgemeinen mit viel geringeren Auflösungen angezeigt als High-End-Drucke.
Bestimmen Sie die angestrebte Bildschirmauflösung: Die meisten Desktop-Bildschirme haben eine Auflösung von 72–96 ppi, während Telefone und Tablets eine noch niedrigere Auflösung haben. Kennen Sie die Zielgeräte und die Größe, auf denen Bilder angezeigt werden.
Ändern Sie die Größe von Bildern mit Photoshop/Illustrator – Öffnen Sie Bilder und ändern Sie ihre Größe auf optimale Abmessungen für die Zielauflösung. Für das Web sind im Allgemeinen 72–96 ppi ausreichend. Die Größenänderung verhindert überschüssige Pixeldaten.
Verwenden Sie Tools zur Größenänderung von Bildern – Apps wie TinyPNG und ImageAlpha erkennen automatisch die optimale Auflösung und ändern die Größe von Bildern ohne Qualitätsverlust. Ideal für die Massenoptimierung.
Vermeiden Sie das Hochskalieren von Bildern mit niedriger Auflösung – Erhöhen Sie nicht die Auflösung von Bildern, nur um sie in einen größeren Layoutraum einzupassen. Durch die Hochskalierung werden interpolierte Pixel hinzugefügt, ohne die Qualität zu verbessern.Durch die Verkleinerung von Bildern, um sie an typische Web-Anzeigeauflösungen anzupassen, kann die Dateigröße oft um die Hälfte oder mehr reduziert werden, ohne dass ein Qualitätsunterschied sichtbar ist. Dies ist eine der effektivsten Techniken zur Bildoptimierung.
Für progressive Anzeige optimieren
Progressive JPEG ist eine Anzeigeoption, die es ermöglicht, Bilder schrittweise von oben nach unten zu laden und anzuzeigen, wenn mehr Bilddaten verfügbar werden. Dies ermöglicht ein schnelleres anfängliches Rendern, sodass Seiten scheinbar schneller geladen werden.
Progressive Anzeige in Photoshop aktivieren: Aktivieren Sie beim Speichern von JPEGs das Kontrollkästchen „Progressiv“ unter „JPEG-Optionen“. Dadurch wird die Datei in das progressive Anzeigeformat konvertiert.
Verwenden Sie Tools, die automatisch optimieren: Apps wie TinyPNG und ImageAlpha konvertieren JPEGs während der Optimierung in eine progressive Anzeige, um das erste Rendern zu beschleunigen.
Erwägen Sie PNGs für das teilweise Rendern: PNGs mit Transparenz ermöglichen die Anzeige von Teilen des Bildes, während die vollständige Datei geladen wird. Besser als ein leeres Feld für Platzhalterinhalte.Die progressive Anzeige verbessert die wahrgenommene Leistung, indem einige Bildinhalte schneller auf dem Bildschirm angezeigt werden, selbst wenn die vollständige Datei im Hintergrund weiter heruntergeladen wird. Es handelt sich um eine einfache kostenlose Optimierung, die die meisten JPEGs verwenden sollten.
Bildabmessungen strategisch reduzieren
Ebenso wie die Auflösung wirken sich auch die Bildabmessungen erheblich auf die Dateigröße aus. Größere Bilder beanspruchen selbst bei niedrigen Auflösungen mehr digitalen Speicherplatz. Die strategische Größenänderung von Dimensionen ist eine wichtige Optimierungstechnik.
Bestimmen Sie die erforderlichen Abmessungen: Informieren Sie sich über die genauen Abmessungen, in denen Bilder auf der Website angezeigt werden. Passen Sie die Größe an Layout-Container an, anstatt übermäßig große Platzhalterbilder zu verwenden.
Proportionale Größenänderung in Photoshop – Behalten Sie die Seitenverhältnisse bei, um Verzerrungen zu vermeiden. Verwenden Sie nach Möglichkeit prozentuale Schieberegler anstelle fester Pixelbreiten und -höhen, um die Reaktionsflexibilität zu gewährleisten.
Berücksichtigen Sie die Art Direction – bestimmte Bilder erfordern möglicherweise unterschiedliche Zuschnitte oder Seitenverhältnisse für unterschiedliche Kontexte, z. B. Desktop oder Mobilgerät. Generieren Sie optimierte Versionen für jeden Anwendungsfall.
Seien Sie konservativ mit Platzhaltergrößen – Platzhalter- oder Hintergrundbilder müssen oft keine Vollbild-Hero-Bilder sein. Passen Sie die Größe an den beabsichtigten visuellen Zweck an.Durch die Reduzierung der Bildabmessungen auf das für das Layout tatsächlich erforderliche Maß werden unnötige Pixeldaten entfernt und die Dateigröße erheblich reduziert, oft ohne sichtbaren Unterschied für Benutzer. Berücksichtigen Sie dies im Optimierungsworkflow.
Komprimierung optimieren
Verlustbehaftete Komprimierungsformate wie JPEG verwenden Algorithmen, die selektiv Bilddaten entfernen, die für die menschliche Wahrnehmung als unnötig erachtet werden. Dadurch verringert sich die Dateigröße deutlich, allerdings geht dies mit einem gewissen Qualitätsverlust einher. Der Schlüssel liegt darin, die richtige Balance zu finden.
Verwenden Sie hohe Qualitätseinstellungen von 60–80 % – Bei den meisten Bildern behalten hochwertige JPEG-Einstellungen praktisch die gesamte sichtbare Qualität bei und reduzieren gleichzeitig die Größe um bis zu 30–50 %. Betrachten Sie 80 % als Standard.
Erwägen Sie 95–100 % für große Bilder. Größere Fotos mit mehr als 1.500 Pixeln sehen möglicherweise am besten mit einer Qualität von 95–100 % aus, um auffällige Artefakte zu vermeiden. Größenvorteile sind weniger dramatisch.
Seien Sie vorsichtig bei niedriger Qualität <50 % – Überkomprimierung kann zu sichtbaren Streifen und Rauschen führen und feine Details beschädigen. Verwenden Sie nur in seltenen Fällen sehr niedrige Qualitätseinstellungen, wenn Qualitätsverluste akzeptabel sind.
Progressiv komprimieren – Experimentieren Sie, indem Sie jeweils 5–10 % komprimieren und sorgfältig vergleichen. Finden Sie die höchste Qualitätseinstellung, bevor eine Verschlechterung sichtbar wird. Vermeiden Sie Vermutungen.
Die Komprimierung ist leistungsstark, erfordert jedoch sorgfältige Tests, um Qualitätsprobleme zu vermeiden. Zielen Sie auf kleine Größenreduzierungen durch inkrementelle Optimierung statt drastischer Neukomprimierung ab.
Optimierte Bilder zwischenspeichern und bereitstellen
Optimierung ist nur die halbe Miete – Server müssen auch minimierte Bilddateien schnell über HTTP bereitstellen. Das Zwischenspeichern optimierter Bilder in der Nähe des Endbenutzers kann die Lieferzeiten enorm verkürzen.
Verwenden Sie ein CDN – Content-Delivery-Netzwerke speichern optimierte Bilder an POPs weltweit in der Nähe der Benutzer. Beschleunigt das Laden von Seiten im Vergleich zu Ursprungsservern erheblich.
Nutzen Sie Browser-Caching – Fügen Sie Cache-Control-Header zu Bildern mit langen Maximalalterswerten wie Monaten/Jahren hinzu. Browser speichern optimierte Kopien lokal zwischen, anstatt sie erneut abzurufen.
Skalierte Bilder bereitstellen – Mehrere optimierte Versionen generieren und zwischenspeichern, die gemeinsamen Haltepunkten und Dichten entsprechen. Browser fordern das nächstgelegene, vorskalierte, größenentsprechende Ansichtsfenster an.
Lazy Load Images – Inhalte über dem Fold zuerst über JavaScript laden. Verschieben Sie das Laden des Rests unterhalb der Bildlaufzonen, um der Darstellung sichtbarer Inhalte Vorrang einzuräumen.Die Priorisierung des Cachings und der schnellen Bereitstellung optimierter Bilder ist entscheidend, um deren volle Leistungsvorteile auf Websites weltweit auszuschöpfen. Integrieren Sie CDNs, Caching und Lazy Loading.
Fazit
Bei sorgfältiger Beachtung technischer Details und ausgewogenen Tests kann die Optimierung von Bildern erhebliche Leistungsvorteile für Websites und Anwendungen ohne Qualitätseinbußen bieten. Moderne Formate, Tools und Techniken machen die Optimierung für das Web einfacher als je zuvor.Mit Sorgfalt wird die Optimierung zu einem routinemäßigen Bestandteil der Entwicklungsabläufe und ermöglicht weltweit schnellere und umfassendere digitale Erlebnisse.
Lesen Sie auch >>>Teil 1<<< dieses Blogs
Wir begleiten Sie bereits ab der Erstellung Ihrer Fotos. Professionelle Ausrüstung in allen Varianten ist bei uns vorhanden. Wir können auch Fotos mit 42mio Pixel ganz leicht in der Nachbearbeitung angepassen – wenn… ja wenn die richtige Bildgestaltung bereits beim Fotoshooting eingehalten wurde.
Wir freuen uns, Sie >>> kennenzulernen <<< !