Ich habe ein Foto mit meinem iPhone aufgenommen, das ich gerne als Hintergrund meiner Website mit jQuery verwenden würde, um es dynamisch zu dehnen. Allerdings ist es offensichtlich eine ziemlich niedrige Auflösung. Kann ich irgendetwas in Photoshop oder so tun, um die Auflösung überhaupt zu erhöhen?
Es gibt eine Reihe von Plugins zur Größenänderung für Photoshop, die das fehlende Detail viel besser erraten können als Photoshop ( OnOne Perfect Resize und Alien Skin Blowup sind zwei Beispiele), aber obwohl sie Ihnen ein etwas größeres Bild geben können, das glatt ist, sie kann Daten, die nicht vorhanden sind, nicht wirklich ausgleichen. So erstaunlich sie auch sind, sie eignen sich am besten für bereits wirklich gute Bilder, die sehr groß gedruckt werden müssen, aber aus der Ferne betrachtet werden – sie machen das Bild bei der Zielgröße nur etwas glatter.
Ich bestreite irgendwie alle Antworten und Kommentare zu diesem Thema, nicht nur hier, sondern in den meisten Forumsdiskussionen, die dieses Thema behandeln. Ich habe in letzter Zeit einige ziemlich umfangreiche Arbeiten zur digitalen Hochskalierung durchgeführt, und wenn Sie richtig vorgehen, können Sie eine beträchtliche Hochskalierung ohne zu viel Unschärfe erzielen, manchmal um das 20-fache oder mehr. In meiner Arbeit an „Iterative Bicubic Scaling“ konnte ich 12-MP-Bilder von meiner Canon Rebel XSi (450D) auf bis zu 200 MP oder mehr und Druckgrößen von 55 x 44 bei 300 PPI oder mehr aufnehmen. In extremeren Experimenten habe ich auf 96 x 72 Zoll bei 600 PPI skaliert und abgebildet, gottlose 2,4 Gigapixel (nicht für den Heimgebrauch empfohlen). Wenn Sie nur mit Bildinformationen im Wert von 3 MP beginnen, gewinnen Sie wahrscheinlich.
Der Schlüsselfaktor beim Hochskalieren ist die Qualität der zu skalierenden Informationen und die Menge, um die sie skaliert werden. Sie können natürlich ein einzelnes 3-Megapixel-Bild nehmen und es direkt auf ein 100-Megapixel-Bild skalieren, aber unabhängig vom verwendeten Algorithmus erhalten Sie am Ende ein ziemlich verschwommenes Ergebnis. Dies liegt daran, dass Sie etwa 90 % des resultierenden Bildinhalts fabrizieren und den ursprünglichen Inhalt verwischen, wenn er in das endgültige Bild integriert wird. Anstatt in einem einzigen Schritt zu skalieren, tun Sie es in vielen, viel kleineren Schritten. Skalieren Sie mit einem bikubischen Filter jeweils um 3–5 %, bis Sie Ihre Zielgröße erreichen oder wahrscheinlich sogar übertreffen. Wenn Sie Ihre Zielgröße überschreiten, skalieren Sie einmal zurück. In jeder Iteration stellen Sie weniger als 20 % der endgültigen Bilddaten her und erhalten bei jedem Schritt genauere Bildinformationen. was letztendlich ein genaueres endgültiges Bild erzeugt. Ich habe hier eine detaillierte Beschreibung mit visuellen Beispielen:
Ich glaube, die Kamera auf einem iPhone hat etwa 3 MP, vielleicht 5 MP. Sie werden wahrscheinlich nicht in der Lage sein, auf eine Druckgröße von 55 Zoll zu skalieren, aber Sie sollten in der Lage sein, auf eine Größe von 8 x 10, 11 x 14 oder 13 x 19 zu skalieren, ohne zu viele Details zu verlieren. Wenn das endgültige skalierte Bild nicht genügend Details enthält Klarheit können Sie jederzeit eine leichte Unschärfemaske anwenden , um diese feinen Details zu verbessern.
Hier ist ein Beispiel, das die Details zeigt, die bei der iterativen bikubischen Hochskalierung im Vergleich zur direkten bikubischen Hochskalierung erhalten bleiben, wenn ein 12,2-MP-Originalbild (14 x 9 Zoll native Druckgröße bei 300 ppi) auf ein 77,7-MP-Bild (36 x 24 Zoll Druckgröße bei 300 ppi) vergrößert wird:
Warten Sie zum Vergleich zwei Sekunden, bis das animierte GIF oben von direkt bikubisch zu iterativ bikubisch wechselt. Die verbesserte Detailgenauigkeit und Schärfe mit dem iterativen Ansatz sollte taghell sein. Es sei darauf hingewiesen, dass bei beiden Versionen keinerlei Schärfen verwendet wurde.
Ein Hintergrundbild auf einer Website muss nicht unbedingt größer als 1024 x 768 sein. Sie entwerfen auf dem kleinsten gemeinsamen Nenner.
Und vergessen Sie nicht, dass der Webbrowser jedes Byte schlucken muss, das Sie dort ablegen.
Als Referenz suchte ich nach "Webdesign-Empfehlungen Bildschirmgröße" (ohne die doppelten Anführungszeichen).
Also ... wenn das aufgenommene Bild bereits 1024 x 768 groß ist, brauchen Sie es wahrscheinlich nicht zu ändern ...
Wie Sie in einem Kommentar an Mike erwähnt haben, betrachten Sie die In-Browser-Skalierung.
Das Jquery Backstretch-Plugin wurde entwickelt, um genau das zu tun, wonach Sie suchen.
Von der Backstretch-Seite:
Backstretch ist ein einfaches jQuery-Plug-in, mit dem Sie jeder Seite ein Hintergrundbild mit dynamisch angepasster Größe hinzufügen können. Das Bild wird gestreckt, um es an die Seite anzupassen, und seine Größe wird automatisch angepasst, wenn sich die Fenstergröße ändert.
Jay-Lance-Fotografie