Online-Bildgröße und -optimierung

Wenn Sie über eine Reihe fantastischer Bilder verfügen, würden Sie diese sicher gerne mit Ihren Kunden auf Ihrer Website teilen. Sie können eine schöne Diashow erstellen, Galerien erstellen oder einfach Bilder in eine einzelne Seite oder ein Blog einfügen. Welche Option Sie auch wählen, es wird eine einzige Schwierigkeit geben, auf die Sie bei einem nicht spezialisierten Inhaltseditor gestoßen sind: die Größenänderung von Bildern.

Unten finden Sie einige Empfehlungen zur Größenänderung von Bildern, die für Sie hilfreich sein werden.

Passen Sie die Größe an Ihren Inhalt an

Ändern Sie die Größe Ihrer Bilder immer entsprechend der Größe des Inhalts oder der Breite des Inhalts. Wenn Ihr Inhaltsbereich beispielsweise auf eine Breite von 650 Pixel begrenzt ist, muss Ihr Bild nicht größer als 650 Pixel sein, da auf Ihrer Seite nur bis zu 650 Pixel angezeigt werden. Wenn die Bildgrößeneigenschaft kleiner oder größer als der Container ist, wird die Anzeigequalität verschlechtert.

Passen Sie die Bildauflösung für das Web an

Es wird in keiner Website-Gliederung den Eindruck von „pro Zoll“ geben. PPI, d. h. Pixel pro Zoll, und DPI, d. h. Punkte pro Zoll, sind nicht relevant, wenn Sie Ihr Bild für irgendeinen Zweck wie E-Mail, Bloggen oder Teilen über soziale Medien bearbeiten oder skalieren. Mit Ausnahme von Druck, Bildschirmanzeige, können Sie keine Unterschiede in Bildeigenschaften oder -qualität machen.

Dies ist insbesondere bei PDF- Dateien der Fall . Vermeiden Sie es, PDF-Dateien zum Lesen im Internet verfügbar zu machen, die Bilder mit einer Auflösung von mehr als 72 dpi enthalten. In diesem Fall kann der ImageRecycle PDF-Optimierer helfen, ein PDF mit 300 dpi-Bildern zu optimieren und 98% der PDF-Größe mit einer perfekten Qualität für das Lesen im Web zu speichern.

Die beste JPG-Exportqualität mit ImageRecycle

In Photoshop wird für das Web empfohlen, Ihre JPEG-Bilder mit max. 20% der Kompression. Sie können auch einige Tests mit verschiedenen JPEG-Funktionen durchführen, die für Sie am besten geeignet sind. Das Anwenden einer globalen Komprimierung ist eine Frage des Gleichgewichts zwischen Größe und Qualität.

Mit ImageRecycle Bildoptimierungsalgorithmus ist der Prozess nun ganz anders. ImageRecycle erkennt das aktuelle Bildkomprimierungsverhältnis und optimiert das Bild entsprechend. Da die Komprimierung nicht auf das gesamte Bild angewendet wird, werden Sie vom folgenden Test wirklich begeistert sein.

Bedenken Sie: Je weniger das Originalbild komprimiert wird, desto besser sind Optimierung und Größe.

Im folgenden Beispiel habe ich 4 JPG-Bilder mit Photoshop in der Qualitätsstufe 60% | exportiert
80% | 90% | 100% Dann habe ich Bilder mit ImageRecycle optimiert . Hier ist das ImageRecycle . Über die Qualität sind die 90/100% etwas besser als die 2 anderen. Die Lektion hier lautet: Exportieren Sie Ihre JPG-Bilder so wenig komprimiert wie möglich, ImageRecycle den Rest!

Optimieren Sie die endgültigen Bilder

Abhängig von der von Ihnen betriebenen Website können dieselben Bilder auf verschiedenen Seiten mit unterschiedlichen Größen angezeigt werden. Dies ist normalerweise etwas, das Sie in einem E-Commerce mit Slider, Produktliste, Produktdetails usw. finden.
Der Größenänderungsprozess wird normalerweise von einer Online-PHP-Bibliothek wie GD durchgeführt. Stellen Sie die Qualität und das Gewicht Ihrer ORIGINAL vs. FINAL Benutzerbilder sicher. Vertrauen Sie Online-Bibliotheken und Cache-Generatoren nicht, sonst können Sie Qualitäts- und Größenprobleme haben. Wenn Ihr Originalbild bereits auf Ihrer Seite optimiert ist (indem Sie eine Feinabstimmung zwischen Qualität, Farben und Komprimierung vornehmen), um Bandbreite und Seitenladevorgänge zu sparen, können Sie mit einigen Bibliotheken zur Größenänderung von Weberweiterungen all das verlieren!

Die Lösung:

• Wenden Sie die Optimierung auf das Bild an, das in Ihrem endgültigen Client-Browser angezeigt wird. Sie können dies manuell für jedes Bild und für jede Größe tun oder unsere API oder CMS-Erweiterung von ImageRecycle verwenden, um den Ordner auszuwählen, in dem Ihre endgültigen Bilder gespeichert werden. Führen Sie dann eine automatische Optimierung durch.
• Nutzen Sie unseren Resizer für Originalbilder. Sie können Serverspeicher sparen, Ihre Bilder schneller bearbeiten und benötigen bei der endgültigen Anzeige normalerweise keine Bilder mit einer Breite von mehr als 1600 Pixel

Was kommt als nächstes: HTML5 und das Element

Responsive Design-Techniken, die Medienabfragen umfassen, bieten Webdesignern die Möglichkeit, das Layout einer Website an eine Vielzahl von Geräten anzupassen, von Desktops bis hin zu Smartphones, und dafür zu sorgen, dass sie stets gut aussieht. Das Problem ist hier nicht die Darstellung, sondern die Leistung, das ist das Desktop-Bild, das auf Smartphone und Tablet angezeigt und geladen wird.

Das Das HTML5-Element versucht, dieses Problem zu lösen. Der Vorteil einer nativ optimierten Bildressource ist die Ladezeit - besonders wichtig für Benutzer mit langsameren mobilen Internetverbindungen. Das element ermöglicht eine echte dynamische Größenänderung, indem dem Browser nur eine HTML-Anweisung gegeben wird.

Code-Auszug:

Die Einschränkung besteht derzeit darin, dass hierfür eine sehr aktuelle Chrome-Version (39) und etwas JS erforderlich sind, um ordnungsgemäß zu funktionieren. In naher Zukunft können wir mit dieser Technologie in Verbindung mit einem Bildoptimierer das Beste für die Ladezeit der Website erwarten.