Web-Fotos in 1:1-Auflösung noch zeitgemäß?

[beiti]

Seit ich mich hobbymäßig mit dem Erstellen von Internetseiten beschäftige (seit ca. 1998), galt für das Einbinden von Fotos ein eiserner Grundsatz: Fotos fürs Web werden immer pixelgenau angelegt. Also wenn man ein Foto z. B. in 400 x 300 Pixel Größe zeigen will, skaliert man es vorab auf 400 x 300 Pixel Größe. Jede Abweichung von dieser Regel galt lange als Murks - zum einen, weil die Browser nur sehr schlecht skalierten, zum anderen, weil man aufgrund der lahmen Modem-Internetzugänge die Datenmengen so klein wie möglich halten musste.
Natürlich gab es in der Anfangszeit noch weitere Vorgaben, z. B. die Optimierung auf 800 x 600 Pixel Bildschirmgröße oder gar die Optimierung für Internet Explorer bzw. Netscape - also Sachen, die uns heute nur noch schmunzeln lassen.

Inzwischen hat sich viel verändert: Browser beherrschen heute eine hochwertige bikubische Skalierung, Internetzugänge werden immer schneller, Internetseiten werden auf sehr unterschiedlich großen Bildschirmen angeschaut und die Pixeldichten der Monitore nehmen stetig zu. Die Internetseiten müssen also flexibler werden.

Besonders der Punkt "Pixeldichte" hat mich in letzter Zeit zum Nachdenken gebracht: Mein Windows-10-Notebook ist von Haus aus auf eine mittlere Skalierungsstufe (ich glaube 150 %) eingestellt, damit Inhalte trotz der hohen Pixeldichte in brauchbarer Größe erscheinen. Das führt - neben einer Vergrößerung von Texten - auch zu einer standardmäßigen Hochskalierung von Bildern im Browser.
Insbesondere fällt mir das auf meinen eigenen Internetseiten auf, wo ich den HTML-Quellcode ja einigermaßen kenne: Ich habe z. B. ein Foto in 200 Pixel Breite eingebunden, aber das wird jetzt im Browser auf ca. 300 Pixel Breite hochskaliert, damit es relativ zum Rest der Seite wieder die gewohnte Größe hat.
Als Behelfslösung fürs Betrachten "älterer" Internetseiten und das ja schön und gut, aber das kann doch nicht der Weisheit letzter Schluss sein?

Jetzt frage ich mich, ob ich dazu übergehen sollte, Bilder grundsätzlich mit "Qualitätsfaktor" anzulegen - und wie groß dieser Qualitätsfaktor dann sein sollte. Linear 150 %? Oder 200 %? Letzteres würde zu einer Vervierfachung der Pixelzahl führen, und - selbst wenn man dann mit der JPEG-Kompression etwas radikaler vorgeht - noch mindestens die doppelte Dateigröße ergeben.
Für die Besitzer höher auflösender Monitore wäre das ein Gewinn. Sie würden perfekt scharfe Fotos sehen. Andererseits werden die Seiten vielleicht auch unterwegs mit mobilem Zugang angesehen - und dann wären die größeren Dateien ein echtes Ärgernis - nicht nur wegen längerer Ladezeiten abseits der LTE-Versorgung, sondern auch wegen des begrenzten Datenvolumens in mobilen Verträgen.
Eine dritte Lösung wäre, die Bilder in verschiedenen Größen bereitzustellen oder irgendwie schon im Server passend zum Ausgabegerät zu skalieren und zu komprimieren. Aber sowas würde mich als Nicht-HTML-Profi derzeit ziemlich überfordern.

Wer hat die Lösung? In welcher Auflösung sollte man heutzutage Fotos in Internetseiten bereitstellen, damit die Seite technisch zukunftssicher bleibt?

 

[Tobschmi]

Die Grundsätzliche Frage ist, ob du auch Webseiten mit Responsive Design erstellst?

Solltest du nur Statische Seiten erstellen ist in 98% der Fälle die Herangehensweise mit verschiedenen Thumbnails bzw. Bildgrößen die richtige.

Es kommt natürlich auch immer auf den Anwendungszweck an. Für eine kleine private Seite mit 20 Bildern würde ich mir nie den Stress machen, die Bilder in X Auflösungen und am besten noch Retina Optimiert zu erstellen.
Für eine riesige Seite mit hunderten oder tausenden Fotos sieht das natürlich schon wieder ganz anders aus.

Ein weiterer Punkt ist natürlich ob du ein CMS/System einsetzt oder die Seiten in HTML selber schreibst. Denn eigentlich bieten alle Namenhaften Anbieter verschiedener CMS oder Shopsysteme Möglichkeiten an, verschiedene Bilder für die jeweiligen Viewports anzulegen.
Solltest du auch mit Responsive Designs arbeiten, empfehle ich dir dich in Thematik einzulesen.

Hier findest du eine sehr gute Dokumentation in Deutsch: http://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/

 

[schakal]

Bei Webseiten, die nach RWD (responsive web design) entwickelt wurde, würde ich nur noch Bilder in Retina-Auflösung (also 2-facher Auflösung bzw. 200%) ausliefern. Damit sind sie sowohl auf "normalen" Displays, als auch auf Retina Displays scharf. Dabei kann man die Bilder auch stärker komprimieren, da durch die erhöhte Pixeldichte bei Retina Kompressionsartefakte einfach nicht so stark auffallen (1 Pixel ist ja im Prinzip nur 1/4 so groß wie auf einem normalen Display bei gleicher Ausgabegröße).

 

[ASretouch]

Bei Webseiten, die nach RWD (responsive web design) entwickelt wurde, würde ich nur noch Bilder in Retina-Auflösung (also 2-facher Auflösung bzw. 200%) ausliefern.

200% in Breite und Höhe entspricht der 4-fachen Datenmenge.
Sollten 100% der User, wovon bei weitem nicht jeder über DSL verfügt, 4 mal länger warten weil ein paar Prozent ein Retinadisplay haben?
Bestimmt nicht. Also wenn muss die Displayart ausgelesen werden und nur denen mit Retina die größeren Bilder geladen werden.
Das auch die mit Retina nicht alle high-speet-internet haben, bspw. Notebooks die über den Äther surven, steht dann auf einem weiteren Blatt.

 

[beiti]

Hier findest du eine sehr gute Dokumentation in Deutsch: http://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/

Danke für den informativen Link. Da wird eine Menge Aspekte abgehandelt - auch solche, auf die ich von mir aus gar nicht gekommen wäre, z. B. die Möglichkeit, auf geringer aufgelösten Displays nur noch einen definierten Ausschnitt des ursprünglichen Bildes zu zeigen.

Wie ich das künftig umsetzen werde, steht noch nicht fest.
Im Augenblick habe ich herkömmliche HTML-Seiten, die nur bedingt responsiv sind (die Textbreite passt sich in gewissem Umfang an kleinere Bildschirme an, aber für wirklich kleine Smartphone-Screens etc. habe ich keine Lösung, und auch Fotos gibt es nur in 1:1-Auflösung).
Vorstellen könnte ich mir mittelfristig eine Migration auf Wordpress. Aber da muss ich mich erst einarbeiten. Und was den Umgang mit Fotos angeht, interessiere ich mich erst mal für allgemeine Ansätze - unabhängig von der späteren Umsetzung.

Bei Webseiten, die nach RWD (responsive web design) entwickelt wurde, würde ich nur noch Bilder in Retina-Auflösung (also 2-facher Auflösung bzw. 200%) ausliefern.

Bedeutet Retina immer 200 %? Bei Windows 8/10 gibt es meines Wissens genormte Zoom-Stufen von 140 und 180 % (was nicht heißt, dass nicht auch andere und höhere möglich wären).

Dabei kann man die Bilder auch stärker komprimieren, da durch die erhöhte Pixeldichte bei Retina Kompressionsartefakte einfach nicht so stark auffallen

Trotzdem wird man noch eine Lösung für kleine Bildschirme und langsame bzw. volumengebegrenzte Internetzugänge brauchen. Entweder müssen die Bilder dann in mehreren Auflösungen vorliegen, oder man hat ein Server-Script, das die Bilder in solchen Fällen live unterrechnet und nachkomprimiert.
Und dann stellt sich noch die Frage, woran man unterscheidet, wann welche Variante verwendet wird. Denkbar wäre, nach der Displayauflösung zu gehen und auf kleinen Bildschirmen zuerst nur Thumbnails zu zeigen und die voll aufgelösten Bilder erst beim Drauftippen. Alle nur erdenklichen Szenarien deckt man damit jedoch noch nicht ab.

Ich sollte vielleicht dazusagen, dass es bei mir nicht um klassische Galerien geht, sondern um informative Texte, die mit erklärenden Bildern illustriert sind. Also im Normalfall sollte man die Bilder schon von Anfang an komplett sehen - und das halt in der jeweils bestmöglichen Auflösung.

 

[Frosty]

Geht es um die in deiner Signatur verlinkte Website, spielt die Bildqualität bei den meisten Fotos keine Rolle, weil ihr Inhalt entscheidend ist und nicht das letzte Fitzelchen Detailauflösung. Zumindest war das mein Eindruck nach dem wahllosen Aufruf einiger Unterseiten. Möglicherweise gibts Ausnahmen.

Wärs nicht einfacher, in solchen Fällen Links unter die Fotos zu höher aufgelösten Versionen zu legen, die dann jeder betrachten kann, wer will, ganz unabhängig von Internetverbindung und Bildschirm- oder Viewportauflösung?

Ich bin aber auch kein Freund von skalierten oder sonstwie "passend" ausgelieferten Fotos. Am Ende ist man bei interessanten Fotos gezwungen doch nachzusehen, ob das Bild grad skaliert wird und in welcher Auflösung es geladen wurde. Und gerade dann kann es ausgesprochen unschön sein, wenn einem nur die halbe Bildqualität zur Verfügung gestellt wird, nur weil der gerade genutzte Bildschirm/-bereich über keine besonders hohe Auflösung verfügt. Und man bemerkt die ungleiche Behandlung noch nicht einmal sondern geht davon aus, daß keine höheren Bildauflösungen bereitstehen. Ich persönlich erwarte bei großen Fotos grundsätzlich die maximale Bildqualität unabhängig davon, welche Bildschirmauflösung ich gerade nutze.

 

[scope]

200% in Breite und Höhe entspricht der 4-fachen Datenmenge.

Das muss nicht sein. Man kann diese vierfache Menge an Pixeln durchaus deutlich stärker (verglichen mit klassischen Bildern) komprimieren, ohne dass es auffällt. Die Bilder wirken dennoch deutlich schärfer. Gibt einen Haufen interessanter Artikel zu dem Thema.

 

[beiti]

Geht es um die in deiner Signatur verlinkte Website

Um diese, und auch um satellitenempfang.info. Die Letztgenannte enthält bisher nur ganz wenige Bilder (und manche davon sind uralt und winzig klein), aber das soll sich im Zuge der nächsten Überarbeitung ändern.

spielt die Bildqualität bei den meisten Fotos keine Rolle, weil ihr Inhalt entscheidend ist und nicht das letzte Fitzelchen Detailauflösung.

Das ist richtig. Es besteht hier noch kein akuter Handlungsbedarf. Aber wenn ich schon einige Sachen neu mache, dann diesmal gleich für die nächsten Jahre gerüstet, hab ich mir gedacht.

Ich persönlich erwarte bei großen Fotos grundsätzlich die maximale Bildqualität unabhängig davon, welche Bildschirmauflösung ich gerade nutze.

Im Extremfall würde das aber bedeuten, dass man scrollen muss und keinen Überblick mehr über das Bild hat. Betrachter, die nicht so technisch orientiert sind, werden das nicht mögen.

 

[Gast_451888]

Bedenke, dass das was du jetzt machst in ein paar Jahren anders ausschaut. 1998 war 800x600 oder 1024x768 vielleicht Standard, vielleicht auch schon 1280x1024. FullHD ist heute Standard, aber 4K Monitore sind immer mehr im Kommen und selbst die Mobiltelefone lassen (warum auch immer) FullHD schon hinter sich. Und es gibt auch schon mehr als 4K, das wird irgendwann auch kommen.

Ich persönlich arbeite u.a. viel mit Wordpress und nur "responsive". Die Bilder werden mehr oder weniger im Originalformat hochgeladen und bei mir in 6 (!) Größen vorgehalten. Und bei den meisten CMS gibt es Plugins, die automatisch die Bilder komprimieren beim Hochladen. Davon abgesehen gibt es Plugins um die Seite zu cachen, d.h. man kann da recht leicht kontrollieren was beim Betrachter ankommt und in welcher Qualität und Größe. Aber dennoch gibt es auch immer das Original.

Da du anscheinend kein CMS benutzt noch eine Bemerkung: Ich hätte für einen Bekannten eine Seite eines größeren Sportvereins übernehmen können als Administrator. Die Seite ist ca. 3,5 Jahre alt und die Firma, die die gemacht hat, völlig zurecht pleite. Abgesehen von mangelnder Sicherheit und Unverständis eines CMS haben die den Autoren beigebracht, die Bilder in exakt XxY Pixeln hochzuladen - passend von der Breite in den Artikel. Und jetzt muss die Seite mindestens generalüberholt oder gleich auf ein anderes System migriert werden. Geht aber nicht weil es ******e ausschaut weil die Bilder alle viel zu klein sind. Die haben 100GB Webspace (lol) und die Seite mit den Microbildern belegt nicht mal 1GB. Dafür ist jetzt jegliches Redesign unmöglich weil nur noch ein Pixelbrei entstehen würde. Aus 400 oder 500 Pixeln kann man keine 1000 machen und schon gar keine 2000. Habe es dann dankend abgelehnt mich um sowas zu kümmern weil das Ergebnis egal wie immer unbefriedigend wäre. Wurden halt knapp 3000 Euro in den Sand gesetzt und beschweren kann man sich auch nirgendwo mehr. That's life!

Vielleicht das im Hinterkopf behalten wenn du neue Projekte startest. Webspace bekommt man mittlerweile hinterhergeschmissen, bei 1und1 gibt es z.B. unendlich Webspace (max. ~240000 Dateien) für unter 10 Euro und selbst 100GB bei anderen Anbietern kostet nicht die Welt. Aber das braucht man i.d.R. nicht oder erst bei größeren Projekten...

 

[10dency]

Q&D: 2048 Pixel auf der langen Kante, komprimiert mit JPEGmini; responsive eingebunden. Sieht derzeit auf allen Geräten sehr gut aus und bietet gute Bildqualität ohne den Gucker bei LTE/3G-Kontingenten zu stark zu belasten.

 

[beiti]

Da du anscheinend kein CMS benutzt

Ist durchaus geplant, aber das geht nicht von heute auf morgen.

Meine Seiten sind im Kern schon sehr lange online. Ursprünglich waren sie ganz simpel mit HTML auf Tabellen-Layout-Basis geschrieben. Vor etlichen Jahren (als jedoch CMS noch kein Thema war) habe ich sie dann völlig neu gemacht, und zwar weitgehend auf Basis von CSS; seither sind sie schon nicht mehr ganz so starr, aber die Flexibilitäts-Anforderungen sind weiter gestiegen.
Jetzt überlege ich eben die nächste Neuauflage. Die Frage nach Skalierung der Bilder ist dabei nur ein Punkt von vielen.

Andererseits soll es erfolgreiche Webseiten-Betreiber geben, die HTML-technisch immer noch auf dem Stand von 1998 sind - und das geht offenbar auch.

Aus 400 oder 500 Pixeln kann man keine 1000 machen und schon gar keine 2000.

Meine Bilder habe ich fast alle noch in Originalauflösung im Archiv. Also zumindest dieses Problem droht mir nicht.

Webspace bekommt man mittlerweile hinterhergeschmissen, bei 1und1 gibt es z.B. unendlich Webspace (max. ~240000 Dateien) für unter 10 Euro und selbst 100GB bei anderen Anbietern kostet nicht die Welt.

Am Webspace scheitert es auch nicht. Ich habe 250 GB zur Verfügung - und davon im Augenblick gerade mal 10 GB belegt.

 

[GymfanDE]

Trotzdem wird man noch eine Lösung für kleine Bildschirme und langsame bzw. volumengebegrenzte Internetzugänge brauchen.

Das ist typisch deutsch gedacht (bitte nicht persönlich nehmen und mag durchaus Deinem Zeilpublikum entsprechen).

Man muss sich nur mal Instagram ansehen, das nur zum Teil auf dem Desktop-Rechner funktionsfähig ist und damt überwiegend mobil genutzt wird. Dort wurde vor ein paar Monaten von 640x640 auf 1080x1080 umgestellt, obwohl die "normale" Anzeige noch auf max. 640x640 skaliert wird.

Das scheint die deutschen User wenig zu stören (falls sie es überhaupt wissen), Leute aus Ländern mit vernünftiger mobiler Infrastuktur (also entweder brauchbaren Mobilangeboten oder öffentlichem WLan) sowieso nicht.

Entweder müssen die Bilder dann in mehreren Auflösungen vorliegen, oder man hat ein Server-Script, das die Bilder in solchen Fällen live unterrechnet und nachkomprimiert.

Und schon geht die Frage nach dem eigenen Qualitätsanspruch los (und auch nach dem Nutzen der Bilder für die Besucher der Seite):

Präsentiere ich Bilder, dann will ich deren Qualität bestimmen. Damit kommt für mich ein automatisches Skalieren vor der Auslieferung der Bilder nicht in Frage.

Will ich z.B. auf Flickr mehr wie nur einen extrem kurzen Eindruck von einem Bild erhalten, dann geht das für mich nur in der dort vom Fotografen hinterlegten Maximalauflösung. Mobil komme ich nie auf die Idee, dort vorbei zu schauen und zu Hause würde ich zur Not lieber länger warten bis das Bild angezeigt wird.

Dienen die Bilder einer Informationsvermittlung, dann ist automatisches Skalieren meist auch keine Lösung. Was nützt mir ein Sat-Anschlussplan, der auf Grund meines kleinen Handy-Displays schon von der Webseite so herunter skaliert wurde, dass ich nichts mehr erkenne? Mit Glück kann ich dann das Original nachladen (nutzlose Zeit- und Volumennverschwendung) oder der Anbieter hat noch nicht einaml dies vorgesehen.

Wenn man Volumen sparen will, dann mit passend gewählten Indexbildern. Die kann man aber auch gleich jedem Besucher anzeigen, da sich auch der Besucher mit der 50 MBit-Leitung freut, wenn die Seite bei ihm schneller aufgebaut wird.

Und dann stellt sich noch die Frage, woran man unterscheidet, wann welche Variante verwendet wird. Denkbar wäre, nach der Displayauflösung zu gehen...

Viel Spaß, wenn Du das als Hobbyprogrammierer ohne genügend Wissen/Erfahrung selber vernünftig umsetzen willst. Ich habe es vor kurzem aufgegeben und werte nur an einigen Stellen die Browsergröße aus.

Entweder verlässt man sich auf irgendein gut getestetes und alle paar Wochen aktualisiertes CMS oder die Seite läuft nur mit den die 3-5 Browsern, die man gerade zur Hand hat. Spätestens zwei Monate danach gibt es garantiert Probleme, weil ausgerchnet die Funktion, die einem so schön die Arbeit erleichtert hat, plötzlich auf einem Gerät andere Ergebnisse liefert.

Aus 400 oder 500 Pixeln kann man keine 1000 machen und schon gar keine 2000.

Wozu auch immer man für Bilder zur Illustration einer Berichterstattung so riesige Auflösungen benötigt. Wenn man sie hat und der Fotograf sie verschenkt, warum nicht. Ob das aber einen Besucher zusätzlich auf die Seite lockt?

Andererseits soll es erfolgreiche Webseiten-Betreiber geben, die HTML-technisch immer noch auf dem Stand von 1998 sind - und das geht offenbar auch.

Da muss man doch garnicht so weit weg gehen und sich nur hier das Forum ansehen. Das ist auch einzig und alleine für die Nutzung im Webbrowser auf dem Computer mit Mausbedienung ausgelegt.

Und genau dort liegt für mich auch der Punkt im Bezug auf die Bilder:
wozu dient die Seite, was und wen will man damit erreichen und was muss (oder will) man den Besuchern bieten.

Ich habe mich vor kurzem z.B. mit Absicht gegen ein Design für Mobilgeräte entschieden und meine galerie nur soweit angepasst, dass sie auf den kleinen Handydisplays noch (für mich) ansatzweise brauchbar zu bedienen ist. Ich wollte keine zwei Designs (eines für den Streichelzoo und eines für den klassischen Browser mit Mausbedienung) und ich habe kein einziges (kostenloses) Galleriescript gefunden, das auch nur ansatzweise in der Lage gewesen wäre, meine Ansprüch auf den 6 bei mir verfügbaren Browser zu erfüllen.

Und genauso werde ich auch auf längere Sicht bei der kleinen Auflösung meiner Bilder (768x512) bleiben. Mir genügt die Qualität auch auf 10"-Tablets und zusätzlich will ich schlicht meine Bilder nicht in höherer Auflösung verschenken. Wem die Bildgröße nicht ausreicht, muss meine Seite nicht besuchen. Für das, was ich mit den Bildern zeigen möchte, genügt mir die Auflösung.

 

[Gast_451888]

Meine Bilder habe ich fast alle noch in Originalauflösung im Archiv. Also zumindest dieses Problem droht mir nicht.

Ja das ist in meinem Fall eben das Problem gewesen. Originalbilder waren offline vorhanden, aber man hätte praktisch per Hand locker 1000 Bilder einzeln aktualisieren müssen.

Man muss sich nur mal Instagram ansehen, das nur zum Teil auf dem Desktop-Rechner funktionsfähig ist und damt überwiegend mobil genutzt wird. Dort wurde vor ein paar Monaten von 640x640 auf 1080x1080 umgestellt, obwohl die "normale" Anzeige noch auf max. 640x640 skaliert wird.

Wozu auch immer man für Bilder zur Illustration einer Berichterstattung so riesige Auflösungen benötigt. Wenn man sie hat und der Fotograf sie verschenkt, warum nicht. Ob das aber einen Besucher zusätzlich auf die Seite lockt?

Da muss man doch garnicht so weit weg gehen und sich nur hier das Forum ansehen. Das ist auch einzig und alleine für die Nutzung im Webbrowser auf dem Computer mit Mausbedienung ausgelegt.

Und genau dort liegt für mich auch der Punkt im Bezug auf die Bilder:
wozu dient die Seite, was und wen will man damit erreichen und was muss (oder will) man den Besuchern bieten.

Instagram hält die Bilder in höherer Auflösung vor, man liest unterschiedliche Auflösungen aber 3120x3120 wird z.B. genannt. Was ausgegeben wird ist dann ja was anderes, das ist in der Tat recht niedrig.

Wozu man die Bilder verwenden will? Schlichtweg ist es bei meinem Beispiel ein großer Sportverein mit vielen Spielberichten. Ein aktuelles Design laut den Verantwortlichen sollte mit Artikelbildern funktionieren. Daneben gibt es viele Teambilder oder Bilder der einzelnen Spieler. Alle zu klein für ein zeitgemäßes Format, alle müssten per Hand neu hochgeladen und ersetzt werden. Und wer sich die Seite dann anschaut bekommt Augenkrebs.
Aber ansonsten stimme ich dir größtenteils zu, Zielgruppe ist wichtig. Wobei selbst das Forum hier auf dem Tablet, das man womöglich gerne daheim benutzt, nicht optimal läuft (aber benutzbar ist). Und Inhalt ist wichtig. Und natürlich Größe und Kosten. Hier im Forum macht es schon einen Unterschied wie groß die Bilder so sind was Traffic und Webspace angeht. Aber auch hier hätte man vielleicht in ein paar Monaten oder Jahren das Problem, dass mit einer neuer Forensoftware, die für alle Geräte gleichermaßen gut geeignet ist, bei den vorhandenen Fotos und höheren Auflösungen es etwas unhübsch werden könnte.
Und gerade in der Webentwicklung muss man flexibel sein. Flash war auch mal ein Trend

 

[usaletsgo]

Für meine im Bau befindliche Website gehe ich wie folgt vor:

Die gesamte Seite ist 1000 px breit. Für den Content sind 750 px vorgesehen. Der Rest ist Navigationsbereich, margin etc.

Meine Bilder für den Content-Bereich haben exakt 750 px Kantenlänge. Zu jedem Bild gibt es aber eine *@2x.jpg-Version mit 1500 px Kantenlänge. Über ein PHP-Skript i.V.m. .htaccess wird jeweils das doppelt so große Bild geladen, aber auf 750 px runterskaliert, wenn ein Display mit Retina-Auflösung im Spiel ist (es wird ausgelesen, wie hoch der systemweit eingestellte "Vergrößerungsfaktor" ist).

Hier der Link zum Skript: https://github.com/Retina-Images/Retina-Images

Funktioniert sowohl auf meinem Dell als auch dem iPad problemlos.

Jetzt der zweite Teil:

Zu jeder Webseite gehört eine Image-Gallery. Ich habe mich nach langem Suchen für Juicebox entschieden. Ist zwar nicht kostenlos, aber die Investition lohnt sich m.E.

 

[beiti]

würde ich nur noch Bilder in Retina-Auflösung (also 2-facher Auflösung bzw. 200%) ausliefern.

200% in Breite und Höhe entspricht der 4-fachen Datenmenge.

Das muss nicht sein. Man kann diese vierfache Menge an Pixeln durchaus deutlich stärker (verglichen mit klassischen Bildern) komprimieren, ohne dass es auffällt.

Jetzt habe ich mir gedacht "Praxis schlägt Theorie" - und es einfach mal an einem typischen Bild ausprobiert.

Ich muss vorausschicken: Die Fotos auf "satellitenempfang.info" sollen, zumindest in normaler Desktop-Darstellung, nahtlos in den Text eingebettet sein. Sie müssen daher nicht riesengroß sein; 600 Pixel Breite bei 100-%-Darstellung würde ausreichen - je nach Inhalt (z. B. wenn nur ein kleiner Stecker gezeigt wird) auch noch weniger.
Aber auch wenn die Bilder "nur" informativen Charakter haben und die fotografische Qualität nicht im Vordergrund steht, wünsche ich mir eine Darstellung ohne sichtbare Artefakte. An kontrastreichen Kanten (z. B. wo eine Satellitenschüssel sich gegen den Himmel absetzt) kommt es recht schnell zu JPEG-typischen Unsauberkeiten.

Jetzt wollte ich also herausfinden, welche Nachteile ich mir einhandeln würde, wenn ich Bilder künftig in 200 % Auflösung erstelle - aber die Kompression so weit hochschraube, dass ich am Ende keine höhere Datenmenge bekomme.
Also habe ich ein typisches Motiv genommen und zuerst auf 600 Pixel Breite runterskaliert und scharfgezeichnet (so, wie ich das seit Jahren mit meinen Web-Bildern mache). Dann habe ich ein wenig mit den JPEG-Einstellungen experimentiert, um die gewünschte Qualität zu bekommen (so, dass nur noch marginale Artefakte an kritischen Stellen übrig waren). Das Bild hatte danach 84 kB Dateigröße.
Dann habe ich Scharfzeichnung und Skalierung rückgängig gemacht, das Bild in einem neuen Anlauf auf 1200 Pixel Breite skaliert, wieder scharfgezeichnet und dann die JPEG-Kompression so weit hochgeschraubt, dass die Dateigröße am Ende wieder 84 kB betrug. (Die Werte beziehen sich auf JPEGs ohne EXIF-Daten, aber jeweils mit eingebettetem sRGB-Profil.)
Dann habe ich testweise beide Versionen in eine HTML-Seite eingebaut: die 600-px-Version in Originalgröße, die 1200-px-Version auf 50 % skaliert. Und diese Testseite habe ich dann in vier gängigen Browsern begutachtet.

Hier sind entsprechende Screenshots: ZIP-Datei
EDIT: Hier ist auch noch die Testseite im Original.

Kurzes Fazit: Ich bin angenehm überrascht, wie gut die in den Browsern skalierten Ergebnisse aussehen. Einen signifikanten Nachteil gegenüber den 1:1-Versionen kann ich nicht ausmachen. So gesehen, spricht eigentlich nichts gegen die Vorhaltung von "Retina-Bildern". Ganz ohne Script.
Zeigt man die stark komprimierte Version am normalen Monitor in 1:1 an, hat sie natürlich sichtbare Artefakte. Wie sie auf einem Retina-Display aussieht, kann ich in Ermangelung eines solchen leider nicht beurteilen.

 

[GymfanDE]

Wie die stark komprimierte Version auf einem Retina-Display aussieht, kann ich in Ermangelung eines solchen leider nicht beurteilen.

Solche Voraussetzungen sind für mich das größte Problem (neben meinen Augen). Du versuchst hier irgendwas zu optiieren ohne ein Zielgerät zur Beurteilung zu haben.

Die "Demo" auf der von SssnakeDoc verlinkten Seite ist schlicht schwachsinn, obwohl das Script durchaus brauchbar sein mag. Wobei, was zeigt dann Google als Bildgröße in seiner Suche an?

Und da es Dir auf die Dateigrösse ankommt:
- warum muss da ein sRGB-Profil eingebettet sein?
- Du kannst u.U. noch an viel mehr Parametern drehen:
--Scharfzeichnung (ein paar Prozen5t weniger fallen dem Betrachter u.U. nicht, bringen aber bei der Kompression einges.
-- eine (nur im Vergleich zum Original sichtbaren) Entrauschung
-- der genutzte JPG-Compressor. Photoshop war da früher besser wie fast alle Freeware oder die Microsoft-Libs.
-- Warum die aktuellen Bilder mit "subsampling off" gespeichert wurden, weisst vermutlich noch nicht einmal Du (sondern nur Olympus).
-- am Ende kannst Du auch noch solche Tools wie das erwähnte jpegmini testen.

Originalbilder waren offline vorhanden, aber man hätte praktisch per Hand locker 1000 Bilder einzeln aktualisieren müssen.

Dann müssen in dem Budget halt noch ein paar Euro für einen Studenten drin sein, der die Bilder manuell hochlädt und zuordnet. Unter den Fans des Vereins sollten sich doch jemand finden lassen, der machen möchte.

 

[ASretouch]

Dann habe ich Scharfzeichnung und Skalierung rückgängig gemacht, das Bild in einem neuen Anlauf auf 1200 Pixel Breite skaliert, wieder scharfgezeichnet und dann die JPEG-Kompression so weit hochgeschraubt, dass die Dateigröße am Ende wieder 84 kB betrug.

Klingt als hättest du jetzt das 600px wieder hochskaliert?
Oder meinst du "mit neuem Anlauf" das du das Original von der Ausgangsgröße auf 1200px runterscaliert hast?

Ich habe eben mal die verlinkte Darstellung im Chrome bei 200% betrachtet. Da wird dann das Retina-Bild (auch ohne ein Script) 1:1 angezeigt.
Ich frage mich jedoch ob ohne Script bei 100% Browseransicht auf dem Retinadisplay das Retina-Bild nicht erst einmal vom Browser runter gerechnet
und dann von der GraKa wieder hoch gerechnet wird? Das währe ja sicher nicht Sinn der Übung.

@ GymfanDE - ein sRGB-Profil sollte eingebettet sein damit ältere Macs dies richtig interpretieren können.
Diese Info nimmt aber auch nicht wirklich Datenmengen in Anspruch.

 

[beiti]

Du versuchst hier irgendwas zu optiieren ohne ein Zielgerät zur Beurteilung zu haben.

Ganz so ist es nicht. Ein "echtes" Retina-Display von Apple habe ich zwar nicht, aber mein 8"-Tablet kommt immerhin auf 255 ppi, was durchaus in Retina-Größenordnung liegt.
Leider kann ich im Tablet-Browser den Zoomfaktor nicht genau bestimmen. Mein Notebook skaliert entsprechend seiner Pixeldichte auf 150 %, und auch da ist schon der Vorteil der höheren Auflösung klar zu sehen.
Wenn man den Vergleich hat, merkt man erst, wie unscharf die "normalen" Bilder auf Webseiten sind.
Ein iPhone 6+ hat ja schon um die 400 ppi und dürfte im Augenblick die Referenz in Sachen Pixeldichte sein. Wobei ich mir aber vorstellen kann, dass da auch ein Sättigungseffekt eintritt (ähnlich wie beim Ausbelichten von Vorlagen) und daher ein 200-ppi-Foto auch auf dem 400-ppi-Display noch super scharf aussieht.

- warum muss da ein sRGB-Profil eingebettet sein?

Wenn man schon ein Zugeständnis an Besitzer von Retina-Displays macht, sollte man auch die Besitzer von Wide-Gamut-Displays nicht vernachlässigen. Und da die meisten Browser ohne eingebettetes Profil kein Farbmanagement machen, wären die Bilder dann zu bunt. Klar, da kann man wieder streiten, ob das bei reinen Info-Bildern so schlimm wäre. Aber dasselbe gilt auch für die Auflösung, und dann kann ich gleich bei 1:1 bleiben.
Übrigens macht das sRGB-Profil nur 3 kB aus, fällt also selbst bei kleinen Bildern nicht wirklich ins Gewicht.

-- Warum die aktuellen Bilder mit "subsampling off" gespeichert wurden, weisst vermutlich noch nicht einmal Du (sondern nur Olympus).

Um welche Bilder geht es hier?

Klingt als hättest du jetzt das 600px hochskaliert?
Oder meinst du mit neuem Anlauf das du es von der Ausgangsgröße auf 1200px runterscaliert hast?

Natürlich Letzteres.

 

[beiti]

Jetzt habe ich die Testseite noch um eine dritte Variante erweitert, nämlich eine nur schwach JPEG-komprimierte Version des 1200-Pixel-Bildes.

Meine Erkenntnisse bis jetzt:
- Solange man das 1200-px-Bild in der auf 600 px herunterskalierten Fassung betrachtet, spielt die höhere Kompression quasi keine Rolle. Also man kann ohne Erhöhung der Datenmenge eine Retina-taugliche Auflösung in Reserve halten, ohne die normale Darstellung zu verschlechtern.
- Auf hochauflösenden Displays ist die 1200-px-Version sichtbar schärfer und daher ein echter Gewinn gegenüber der 600-px-Version. In Standardgröße spielt die Kompression keine Rolle. Allerdings kann man ja am Tablet die Bilder jederzeit mit den Fingern aufzoomen - und dann werden die Artefakte der höher auflösenden Fassung doch noch sichtbar.

Also vielleicht müsste man einen Kompromiss für die Kompression finden. Zum Beispiel die anderthalbfache Datenmenge wäre ja auch noch vertretbar.

 

[beiti]

Das empfohlene Tool "JPEGmini" habe ich inzwischen auch noch probiert: Ich habe mein Testbild mit JPEGmini komprimiert, und das kam auf 168 kB (und man sieht den Unterschied zum Original durchaus, wenn man kritisch ist). Dann habe ich mich mit dem Web-Export von PhotoLine so nah wie möglich an diese 168 kB rangetastet; schließlich kam das Bild aus PhotoLine auf 160 kB und hatte immer noch ein bisschen weniger Artefakte als das aus JPEGmini.
Also für mich bringt das nichts. Ich denke, JPEGmini ist was für Leute, die möglichst bequem und ohne lange Versuche größere Bildermengen nachkomprimieren wollen. Wunder in Sachen Qualität-Speicher-Verhältnis bewirkt das Programm keine.

Inzwischen ist mir noch ein weiterer Gedanke gekommen: Die meisten mobilen Zugänge (Edge, UMTS, LTE) komprimieren JPEGs ohnehin noch stark nach. Von daher muss man vielleicht gar nicht so stark auf die Dateigrößen achten (oder gar spezielle Versionen für langsamere Zugänge bereithalten).