Online-Größenänderung und -optimierung

Wenn Sie eine Ansammlung erstaunlicher Bilder haben, würden Sie diese sicherlich 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. Unabhängig davon, welche Option Sie auswählen, gibt es eine einzige Schwierigkeit, auf die Sie mit einem nicht spezialisierten Inhaltseditor gestoßen sind: die Größenänderung des Bildes.

Im Folgenden finden Sie einige Empfehlungen zur Größenänderung von Bildern, die für Sie hilfreich sind.

Passen Sie die Größe an Ihre Inhalte 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 dem ImageRecycle -Bildoptimierungsalgorithmus ist der Prozess jetzt ganz anders. ImageRecycle erkennt das aktuelle Bildkomprimierungsverhältnis und optimiert ImageRecycle das Bild. Da die Komprimierung nicht auf das gesamte Bild angewendet wird, werden Sie vom Testbalg wirklich begeistert sein.

Beachten Sie: Wenn das Originalbild weniger komprimiert wird, ist die Optimierung und Größe besser.

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 , um den Ordner auszuwählen, in dem Ihre endgültigen Bilder gespeichert sind. Führen Sie dann eine automatische Optimierung aus.
• Verwenden Sie unseren Resizer für Originalbilder. Sie können Serverspeicher speichern, Ihre Bilder schneller bearbeiten und benötigen normalerweise kein Bild mit einer Breite von mehr als 1600 Pixel bei der endgültigen Anzeige

Was kommt als nächstes: HTML5 & the Element

Responsive Design-Techniken, einschließlich Medienabfragen, bieten Webdesignern die Möglichkeit, ein Site-Layout an eine Vielzahl von Geräten anzupassen, von Desktops bis hin zu Smartphones, und es stets scharf aussehen zu lassen. Das Problem hierbei ist nicht die Anzeige, sondern die Leistung. Dies ist das Desktop-Image, das auf dem 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 Grenze im Moment ist, dass dies eine sehr aktuelle Chrome-Version (39) und einige JS erfordert, um richtig zu funktionieren. In naher Zukunft können wir mit dieser Technologie, die mit einem Bildoptimierer verbunden ist, das Beste für die Ladezeit der Website erwarten.