• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hochauflösendes Bild ein kleineres DIV packen für iPad Zoom via Multitask

T

tuningflex

Neues Mitglied
Erstmal hallo, ein interessantes Forum hier und ich hoffe Ihr könnt mir weiterhelfen ;)

worum gehts?

Das iPad, iPhone und viele andere Smartphones und Pads haben die Möglichkeit, durch Multitasking die aktuelle Seite im Browserfenster vergrößert darzustellen.
Also man wählt beispielsweise auf einer ganz normalen html Internetseite ein Bild oder Text aus und vergrößert den gewählten Bereich mit Daumen und Zeigefinger.

Das klappt natürlich super aber die Bilder werden pixelig, da sie eine feste Größe haben.

Jetzt suche ich nach einer Methode diese Bilder bis zu einer bestimmten Größe vergrößern zu können ohne, dass diese pixelig werden.

Es würde mich nicht wundern wenn es dafür eh schon für andere Anwendungen Lösungen gibt.
Mir sind leider keine bekannt.
frown.gif


Ein Beispiel:

Also ich füge in einen DIV Tag in einer html Seite ein .jpg Bild ein. Dieses Bild hat eine Originalauflösung von 500 x 500 Pixeln!

Wenn diese Seite im Browser geöffnet wird, soll das Bild allerdings nur mit 150 x 150 Pixeln angezeigt werden. Man kann dann erst via Zoom oder Multitasking auf die max. 500 x 500 Pixel ranzoomen. So lange bleibt das Bild dann scharf.

Ich meine damit eine Art Skalierung ohne Qualitätsverlust.

Was ich gar nicht brauche ist die Lightbox, Flash oder etwas Ähnliches. Es soll sich kein Extra Fenster öffnen, dass das Bild in einer größeren Ansicht darstellt.

Hat jemand eine Idee???

Vielen Dank
smile.gif
 
Willkommen im Forum!

Tut es vielleicht einfach:

Code: 
<img width="150" height="150" src="das-bild.jpg" />
 
Danke, aber das habe ich schon versucht.
Das klappt leider gar nicht!

Wenn ich die Angaben der Auflösung im Editor verändere, dann verschwindet das Bild einfach.

Bei DW wird es zwar kleiner, sieht aber schrecklich aus und wird verkleinert sogar im Ordner des Bildpfads abgespeichert :sad:
 
Das hat dann aber im Zweifel nichts mit HTML zu tun, sondern liegt an deinem Editor.

Hier eine Demo mit demselben Bild in drei Größen. Kannst ja mal versuchen, dort mit deinem Browser oder einem iPad oder ähnlichem zu zoomen. (Habe keinen Zugriff auf letzteres, kann auch sein, dass es auf die Art dort generell nicht geht.)

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
    </head>

    <body>

        <img src="http://upload.wikimedia.org/wikipedia/commons/6/64/Landschaft_2_Zug.jpg"
             width="50" />

        <img src="http://upload.wikimedia.org/wikipedia/commons/6/64/Landschaft_2_Zug.jpg"
             width="200" />

        <img src="http://upload.wikimedia.org/wikipedia/commons/6/64/Landschaft_2_Zug.jpg"
             width="500" />
        
        <p><a href="http://de.wikipedia.org/">Wikipedia</a></p>

    </body>

</html>
 
Das ist jetzt aber doch Interessant!

Erstmal danke für deine Mühe ;)


Ich habe den Code genommen und die HTML Seite auf einen Server geladen und dann die Seite zum testen mit einem Sony-Smartphone geöffnet.
Ist zwar kein iPad aber du scheinst doch recht zu haben. Ich werde deine Bilder jetzt zur Sicherheit mal durch meine ersetzen und dann noch ein Feedback geben.

Wäre ja irre wenn das so einfach geht, kann ich irgendwie noch nicht ganz dran glauben.

Aber wenn dann ist so als wenn man den halben Tag lang den Pfefferstreuer sucht weil man nicht dort nachgesehen hat wo sein rechter Platz ist!
 
ok MERMSHAUS du hattest natürlich vollkommen recht.

Wenn ich das kleine Bild sogar bis zur maximalen Zoomstufe anzoome, dann bleibt alles schön scharf. Kein Wunder, das Bild ist ja auch riesig.
Erstmal toll!

Erstmal, denn wenn man genau hinsieht leidet die Bildqualität leider enorm an der "künstlichen Verkleinerung"!

Ich habe dazu mal von deinem Beispiel zwei Screenshots erstellt. Das eine zeigt die Bilder so wie in deinem Code.
Bei dem anderen Bild habe ich mal das größere Bild tatsächlich mit einem Grafikprogramm auf die angegebene Pixelgröße verkleinert. Es lässt sich jetzt zwar nicht mehr ranzoomen aber man sieht einen deutlichen Qualitätsunterschied!

Genau das liegt mein Problem! Wie bekomme ich diesen Qualitätsverlust weg? Wie schaffe ich es, dass quasi das "Vorschaubild" so aussieht, als hätte es ttsächlich die kleinere Auflösung wie in meinem Beispiel? :(

Danke für alle Ideen...


nice.jpg

notnice.jpg
 
Sorry für meine vielen Posts, aber jetzt habe ich es denke ich!

Es liegt an Firefox! Ich meine die schlechte Darstellung der großen Bilder die verkleinert angezigt werden.
Ich habe den Code von Mermshaus mit Google Chrome, Safari und dem IE getestet. Hier sehen die verkleinerten Darstellungen prächtig aus!

Ich bin da nicht sofort drauf gekommen, das Firefox sonst sehr gute Arbeit leistet!

Jemand eine Idee wie man das beheben kann? :)

EDIT: Opera ist leider auch davon betroffen!

Das gleiche Problem ohne Lösung gabs auch schonmal hier:

http://de.answers.yahoo.com/question/index?qid=20091028140222AAa3Vwf
 
Zuletzt bearbeitet:
Das Interpolationsverfahren beim Verändern der Größe wirst du der Clientanwendung (Browser, Handy, ...) überlassen müssen. Es mag dabei für manche Clients begrenzte Möglichkeiten zur Optimierung geben (geschickte Wahl der Originalgröße, um "Rundungsfehler" zu minimieren -- mehr oder weniger spekulativ), aber sicher keine allgemeingültigen Lösungen.

Das Vorrendern von Versionen in -- sagen wir -- 25-%-Schritten von Zoomfaktor 25-250 % ist auch keine Option für Clients, die stufenlos oder nicht in den angegeben Stufen zoomen. Die müssten selbst dann von der nächstliegenden Grafikversion interpolieren. Völlig abgesehen von der technischen Schwierigkeit, die Grafiken bei Veränderung der Zoomstufe entsprechend an den Client zu senden.

Andererseits lässt sich sicherlich davon ausgehen, dass Clients, die stufenlosen Zoom anbieten, entsprechend starke Interpolationsalgorithmen zur Verfügung haben.

PS: Die einzige echte Alternative wären meiner Meinung nach Vektorgrafiken. Aber die bieten sich natürlich nicht unbedingt für die Darstellung von Fotos an und der Umfang der Unterstützung ist bei vielen Clients auch fraglich.
 
Zuletzt bearbeitet:
Naja ist schon was dran an den Vektoren, denn bei meinen Bildern handelt es sich um 3D Grafikobjekte die ich gerendert habe.

Aber das klingt trotzdem etwas "unkompatibel".

Die Seite die ich erstellen möchte soll möglichst alle Browser bedienen können. Bei meinem Test mit dem Handy nutzte ich auch einen auf Opera-basierenden Browser. Deshalb sah das verkleinerte Startbild nicht sehr hübsch aus.

Mhmmm... vielleicht muss ich meine Seite eben für verschiedene Browser anbieten. Schade schade....meine gerenderten Bilder zeichnen sich eigentlich gerade durch Ihren "metallischen Look" aus. Ich vermute der würde bei Vektoren verschwinden. Ich werde es mal probieren eins meiner Bild mit Flash umzuwandeln, vielleicht sieht es ja doch passabel aus.

Fragt sich nur ob dann wiederum die Browser damit dann klarkommen!?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben