Bilder verkleinern im Webbrowser

[Rasplutin]

Oft wird beklagt, dass das Verkleinern von Bildern für das Hochladen im Forum Probleme macht.
Dann gibt es meist Diskussionen, wie man die Verkleinerung mit diesem oder jenem Programm machen könne.

Mit neueren Webbrowsern kann eine Bildbearbeitung per Javascript gemacht werden, ohne dass das Bild zum Bearbeiten irgendwo hochgeladen werden muss.

Ich habe ein Script zusammengebastelt, damit könnt ihr Bilder
- auf eine gewünschte Breite bringen
- beschneiden
- drehen
- "Forumgerecht" sichern (= Dateigröße begrenzen auf 150 kB)

Die Bearbeitung geschieht komplett im Webbrowser eures Rechners.
Ihr könnt das html-File (bildbearbeitung.htm) auch auf eurem Rechner sichern und dann ohne Internetverbindung damit arbeiten.

Hier: Bildbearbeitung - nicht "schön", aber hoffentlich leicht zu bedienen:

1) zum Laden eines Bildes auf den Button oben links klicken ODER das Bild auf den Button ziehen (das ist einfacher!)
2) wie gewünscht bearbeiten (verkleinern, beschneiden, drehen).
3) das fertige Bild mit Rechtsclick auf dem Rechner sichern.

1 verlinktes Bild gefunden, 1 konnte gesichert werden.
https://schnecken-forum.de/bb/screenshot.jpg

[Rasplutin]

Vorhin habe ich getestet, ob die Bildbearbeitung auch auf einem (Android-)Tablet funktioniert.
Also, das Interface muss noch überarbeitet werden - die Eingabe von Bildbreite etc. ist sehr frikkelig und nichts für meine ungeübten Wurstfinger. Und "Bild mit Rechtsclick sichern" macht auf einem Tablet wenig Sinn.
Aber im Prinzip geht's. Hier ist das Bild eines Turmschneckenbabies, beschnitten, gedreht und verkleinert.
Das Camerabild war über 4000 Pixel breit und 4 MB gross.

Leider habe ich kein Smartphone um die Bedienung darauf zu testen.

[Eisblume]

Hallo!
Ich wollte gerade dein Bildbearbeitungsprogramm nutzen, aber als ich die bearbeitete Datei einfügen wollte, stand dort nur, das die Dateiweiterung nicht erlaubt ist, woran liegt das??
im Voraus. (Ich hoffe, ich habe das mit den Bildern irgendwann begriffen )
Oh, ich hatte etwas übersehen. Habe es jetzt geschafft!
LG, Eisblume

[Susi]

Ich kann mit meinem iPad die Fotos prima verkleinern. Aber da ich keinen Rechtsklick machen kann, kann ich das Foto leider auch nicht abspeichern. Damit habe ich dann wieder keinen Zugriff um es in meinen Thread einzubauen.

Wie machen das denn andere mit IPad etc?

Ich kriege das einfach nicht hin!!

Vielen Dank für jeden Tipp!

LG, susi

[Rasplutin]

Hallo,
Wenn Du den Finger auf dem Bild gedrückt hältst, dann müsste ein Menü aufpoppen, mit dem Du das Bild speichern kannst!

Danke für Dein Feedback!

[Susi]

Hallo Rasplutin!

Vielen herzlichen Dank!!!
Jetzt bin ich schon so lange im Forum unterwegs und habe es jetzt endlich geschafft ein Bild einzustellen!!

Ganz herzlichen Dank, auch für deine schnelle Antwort!

LG, Susi

[Stellini]

Vielen Dank auch von mir.
Habe mir den Link gleich als Lesezeichen
im Handy gesetzt. Klappt einfach Super.

und liebe Grüße

Stella

[Miesmuschel]

Hallo Rasplutin.

Erstmal ein Dankeschön, dass Du dir die Mühe machst, ein solches Script zu erstellen.
Allerdings komme ich mit diesem nicht ganz klar. Bisher habe ich Paint zum Verkleinern der Bilder genutzt, indem ich eine geschätzte Prozentzahl eingegeben habe. Jetzt wollte ich deinen nutzen, da man dort auch die maximale Dateigröße angeben konnte, die ich im Paint auch mal knapp verfehle.

Jetzt habe ich es im Webbrowser ausprobiert. Die verkleinerten Bilder wurden unten mit den fertigen Maßen und der Dateigröße angezeigt. Letztere lag immer zwischen 130-150 KB. Ich ging davon aus, dass dieser Webbrowser selbst optimale Maße findet, um die max. Dateigröße nicht zu überschreiten (Geht sowas? ) und war zufrieden.

Nun habe ich mich geärgert, da ich viele Bilder so bearbeitet - also die 150 KB als max. Dateigröße angegeben - hatte. Worauf ich nicht achtete war, dass als voreingestellte Bildbreite 510px angegeben war. Nun sind alle Bilder 510px breit und weit über 150 KB groß, weshalb ich sie nicht im Forum hochladen könnte.
Natürlich lässt sich die Bildbreite ändern, aber die weiß ich ja vorher nicht. Wenn ich "0" eintrage, in der Hoffnung, der Browser macht (s.o.) was eigenes daraus, funktioniert es logischerweise nicht. (Die Hoffnung stirbt zuletzt.)

Hier mal mein Screenshot dazu. Das abgespeicherte Bild hatte wie angegeben diese Maße, war jedoch 383,1 KB groß anstatt 130 KB. Im Paint bekomme ich es (nach ein bisschen Probieren) mit 548 x 411px auf 147px (als JPG). Liegt's daran, dass das Bild aus dem Webbrowser PNG ist (was im Forum ja auch ginge)? Aber irgendwie muss ich doch trotzdem unter 150 KB kommen?

Kannst Du mir da helfen? Oder stehe ich total auf dem Schlauch?

Vielen Dank im Voraus.

Gruß
Miesmuschel

[Rasplutin]

Liebe Miesmuschel,

Vielen Dank für deinen Test und den ausführlichen Testbericht!

Du hast Recht, Sinn des Ganzen ist, die maximal angegebene Dateigröße nicht zu überschreiten, egal, was man für eine Bildbreite angibt.
Bei .jpg könnte z.B. bei jeder Bildbreite eine maximale Dateigröße von 2kB eingeben werden, das fertige Bild hat dann zwar merkwürdige, manchmal interessante Artefakte, aber die Begrenzung arbeitet korrekt.

Bei Problemen werden Fehlermeldungen ausgegeben, wenn z.B. die Bildgröße die Maße überschreitet, die im Forum erlaubt sind. Ich habe das recht ausführlich getestet, bei allen als .jpg ausgegebenen Bildern funktioniert das anscheinend auch fehlerlos.

Ein Problem sind aber manche Webbrowser, die kein .jpg, sondern nur ein .png ausgeben - ganz vorne bei diesen "Problembrowsern" ist leider der Internet Explorer.

.png ist ein sog. "verlustlos" komprimierendes Format, die Bildqualität ist besser als bei .jpg, aber die Dateigröße lässt sich nicht beliebig reduzieren. Sie lässt sich sogar für ein gegebenes Bild ÜBERHAUPT nicht reduzieren.
Ein .png mit einer Dateigröße von weniger 150kB wird deshalb kaum größer sein können als ca. 320 * 200 Pixel.
Das "kaum größer" hängt vom Bildinhalt ab - wenn das Motiv eine homogene Fläche ist, dann kann es natürlich sehr viel größer sein.

Weil sich die Komprimierung eines .png nicht einstellen lässt, gibt es auch kein Programm, das .png's stärker kompimieren könnte.

Der Fehler in meinem Script ist nun anscheinend, dass es im Internet Explorer keine saubere Fehlermeldung dafür gibt.
Ich habe das mit einer älteren Explorer-Version getestet, da hat die Fehlermeldung funktioniert.
Neuere Versionen (welche, werde ich nachher testen) erzeugen anscheinend intern ein .jpg (Das ist die Größe "130kB" in deinem Screenshot), aber diese Browser sichern trotzdem ein .png, was dann natürlich zu groß wird.

Es tut mir leid, dass du soviel Ärger damit hattest - und danke Dir nochmal für deinen Bugreport! Ohne deine Rückmeldung hätte ich den Fehler nicht bemerkt.

[Miesmuschel]

Hallo Rasplutin.

Meine Ausgangsbilder sind alle JPG-Dateien von fast 4000px Breite bzw. wenige MB an Größe, also direkt die Originale von meiner Kamera. Nur, falls das auch etwas ausmachen sollte.

Eigentlich nutze ich Opera als Browser, aber da zeigt es mir keinen passenden Dateityp an (auch kein PNG), mit dem ich das Bild abspeichern könnte. Da steht nur folgendes zur Verfügung:
• Serif PhotoPlus Verknüpftes Bild
• Alle Dateitypen

Ersteres wohl, da mein Bearbeitungsprogramm so heißt, also kann ich es nur mit dem Programm öffnen und nirgends hochladen. Unter dem zweiten kann ich Bilder zwar abspeichern, sie werden jedoch im Windows-Explorer nur als weißes Blatt angezeigt und ich kann diese mit nichts öffnen oder irgendwo hochladen. Selbst wenn ich die Endung selbst auf .png oder .jpg ändere, ändert das daran nichts.
Daher habe ich deinen Webbrowser also im IE geöffnet und dachte, mit PNG bin ich auch zufrieden.

Aber es ist schon okay. Es war ärgerlich für den Moment, da ich einfach vom abgespeicherten Bild die Eigenschaften nicht noch einmal angeschaut habe, da ich mich auf die Anzeige im Webbrowser verlassen hatte. Sonst hätte ich das gleich nach dem ersten Bild bemerkt und hätte hier fragen können. Ich kenne mich mit diesen Dateitypen jetzt auch nicht so gut aus.

Muss ich wohl doch weiterhin im Paint schätzen.

Ach ja, und danke für deine Erklärung zum Vergleich der Breite und Dateigröße zwischen PNG und JPG, das klingt logisch.

[Rasplutin]

Hallo Miesmuschel,

Die Eingangsgröße und das Format des Bildes ist nicht wichtig solange es geöffnet werden kann.

Leider kann der Internet Explorer wirklich keine .jpg Bilder erzeugen (answers.microsoft.com).
Dieser "Bug" wird anscheinend als "Feature" angesehen, selbst die Thumbnails in der Google Bildersuche werden vom Explorer als .png gesichert.

Besonders ärgerlich ist, dass der Explorer intern sehr wohl mit .jpg arbeitet (wenn du die maximale Dateigröße extrem reduzierst -auf 1kB oder so-, siehst du die typischen jpg-Artefakte), aber er sichert das Ergebnis trotzdem als .png.
So, als würde er intern einen Screenshot von dem .jpg machen.

Da kann ich leider nichts machen, ich werde aber den Hinweis in meinem Script ändern (= verschärfen).

Als nächstes prüfe ich die von dir geschilderten Probleme mit "Opera"...

Es wäre schade, wenn es nur mit "Chrome" oder "Firefox" funktionieren würde.

[Miesmuschel]

Wieder etwas dazu gelernt beim Internet Explorer. Aber danke für deine Bemühungen!

Gruß und schönen Abend
Miesmuschel

[Rasplutin]

Wieder etwas dazu gelernt beim Internet Explorer.

Na, und ich erst

Inzwischen habe ich es so geändert, dass die .png Größe korrekt angezeigt wird.
Das ist allerdings nur ein schwacher Trost, denn dieses Format ist als Forum-Upload wenig geeignet.

[Miesmuschel]

Wieder etwas dazu gelernt beim Internet Explorer.

Na, und ich erst

Inzwischen habe ich es so geändert, dass die .png Größe korrekt angezeigt wird.
Das ist allerdings nur ein schwacher Trost, denn dieses Format ist als Forum-Upload wenig geeignet.

Das habe ich als Schlussfolgerung vorhin auch überlegt. Naja. Schade, dass JPG nicht möglich ist, da ich beim PNG die Bildbreite jetzt wirklich unter 300px einstellen müsste. Für schöne Fotos ist das zu schade.

Hab's mal eben über den IE ausprobiert, jetzt sehe ich die Meldungen wegen der Bildbreite.

[Rasplutin]

Hallo Miesmuschel,

Wenn sich schon mal jemand die Mühe macht und mir so ein ausführliches Feedback gibt, wie du es getan hast, dann will ich die Gelegenheit nutzen:

Eigentlich nutze ich Opera als Browser, aber da zeigt es mir keinen passenden Dateityp an (auch kein PNG), mit dem ich das Bild abspeichern könnte.

Jetzt habe ich mir Opera installiert und getestet... Siehe da, funktioniert einfandfrei.
Er erzeugt .jpg und sichert als "untitled.jpg". Dateigrösse und Bildgrösse stimmen, Drehen und Beschneiden geht auch.
Das gesicherte Bild hat eine korrekte Endung und ist makellos. So soll es sein.
Und bei deinem Opera geht es nicht?