VN Bild

[Volker]

Hallo zusammen,
ein neues Tool wartet auf Euch

Eine Bildearbeitung direkt in Mobirise :

Ab sofort im Download!

https://niederastroth.de/mobirisebloeck ... t=VN+Tools

Video dazu heute Abend ....

[stobi_de]

Ah, klasse.
Und da fällt mir doch mal direkt eine Erweiterung ein.
Ein komplettes Projekt nach Bildern durchsuchen und diese mit Position, Auflösung und Größe ordnen mit der Möglichkeit, das entsprechende Bild zu ändern.
Es passiert mir gelegentlich, dass ich nicht aufpasse und mir ein 5MB Bild irgendwo reinlade statt der verkleinerten Version.
Sowas wäre toll für Pagespeed. Das frage ich bei Mobirise schon seit Jahren an ohne jegliche Reaktion.
Bei Wordpress ist "Shortpixel" ein Standard

[Tommy Herrmann]

Tolles Werkzeug

Das einzige Unklarheit für meine Begriffe ist der Schieber "Bildgüte", der per Default jetzt auf 92% steht. Wofür stehen diese 92%? Bitte frage das die KI mal.

Ich bin nun eigentlich der Meinung, dass das so ganz richtig ist. Nur warum gerade 92% die Originalgröße betreffen ist unschlüssig.

Man müsste wissen was die KI damit meint und man sollte zusätzlich zu dieser Prozentzahl auch die Dateigröße in KB angezeigt bekommen, also sobald man den Schieber bedient.


Test Bild 1920 x 1280px mit 512KB von Pixabay:

Unverändert das Bild speichern - Schieber bleibt unverändert bei 92%

512KB - Originalgröße Bilddatei bleibt erhalten - das ist gut so und so soll es sein.

Schieber auf 100%

1.3MB - Größe der Bilddatei verändert sich stark. Ich kann nicht beurteilen, ob sich die Auflösung tatsächlich verbessert. Die Bildabmessungen bleiben immer gleich - so soll es ja auch sein. Also immer 1920 x 1280px.

Schieber auf 50%

153KB - Größe der Bilddatei verändert sich stark. Ich kann nicht beurteilen, ob sich die Auflösung tatsächlich verschlechtert. Die Bildabmessungen bleiben immer gleich - so soll es ja auch sein. Also immer 1920 x 1280px.


Beim Klick im Bild-Editor von Mobirise werden diese Bilder - wenn das Arbeitsverzeichnis "images" auch gewählt war - beim Klick auf "Remove Unused Images" ("Nicht verwendete Bilder entfernen") auch direkt wieder entfernt, da diese ja auch nicht in Gebrauch sind. Auch das empfinde ich als korrekt.

[Volker]

Frank,
Du solltest das Tool mal runter laden, denn genau das macht es doch.
Alle Bilder der Projekts werden eingelesen, Du siehst die Größe sofort und kannst es verkleinern
Du musst dann nur das bearbeitete Bild mit der Bildauswahl einfügen - fertig
Beim Update werde ich unter jedes Bild die Größe klatschen, dann siesht es sofort

@Tommy: Ich bin dran, wird gleich gelöst und eine neue Version gepackt (mal wieder)
meine schönen Token

[Volker]

Ha Tommy hatte ich vergessen zu erwähnen:

Willst du doch das Original überschreiben, kannst du den Namen ändern — dann fragt es einmal nach.

Geht also auch

[Tommy Herrmann]

Ich werde das Tool gleich noch etwas überarbeiten.

[Volker]

Gute Frage von Tommy, und die Beschriftung war irreführend.

Was 92 % bedeutet: Das ist der JPEG-Kompressionsfaktor beim Neuspeichern — wie stark das Bild gestaucht wird. Mit der Originalgröße hat es nichts zu tun. 0.92 ist schlicht der Vorgabewert, den Chromium selbst verwendet, wenn man ihn nicht angibt; er gilt als guter Kompromiss zwischen Größe und sichtbaren Artefakten.

Bei PNG hat der Regler übrigens gar keine Wirkung, weil PNG verlustfrei arbeitet. Das war auch nicht ersichtlich.

Beides baue ich ein, samt Tommys Größenanzeige:

Kommt gleich das ultimative Tool das alle begeistern wird

[Volker]

So Tommy und Frank,

alles drin:

Bild Suche
Größe unter jedem Bild

Das wars
Neu installieren Tommy bitte

[Tommy Herrmann]

Im bestehenden Script sehe ich bereits die Ursache der Verwirrung: Die 92 % sind nur ein üblicher JPEG-Exportwert – kein Wert, der aus dem Originalbild ausgelesen wurde. Außerdem zeigt der Regler bislang lediglich die Kompressionsstufe und nicht die daraus entstehende Dateigröße.

Ich baue deshalb einen eigenen Qualitätsregler ein: 50–100 bleibt als interne Skala erhalten, sichtbar steht live die berechnete Größe; eine Markierung zeigt, an welcher Stelle die neue Datei ungefähr so groß wie das Original wäre. Die Pixelmaße ändern sich dabei nicht. Bei PNG wird klar angezeigt, dass die Qualität verlustfrei ist und der Regler dort keine Wirkung hat. Nebenbei korrigiere ich die Ausgabe von WebP, die derzeit intern fälschlich als JPEG erzeugt werden kann.

Die Kernänderung ist jetzt eingebaut und die Datei besteht die JavaScript-Syntaxprüfung. Wichtig ist die Formulierung „Original“: Die Markierung steht für die ursprüngliche Dateigröße, nicht für eine sicher auslesbare ursprüngliche JPEG-Qualitätsstufe – eine solche Prozentzahl ist in einer JPEG-Datei normalerweise nicht zuverlässig gespeichert. Ich prüfe noch die fertige Datei und stelle sie anschließend bereit.

Dauer 3 Minuten 37 Sekunden:

Die vollständig überarbeitete Datei ist fertig:

app.js herunterladen

Geändert wurde:

Unter jedem eingelesenen Bild steht sofort die Dateigröße in KB.
Der Qualitätsregler zeigt live die entstehende Dateigröße anstelle der Prozentzahl.
Eine gelbe Markierung kennzeichnet ungefähr die Größe der Originaldatei.
Die Skala bleibt intern sinnvoll von 50 bis 100 erhalten.
Die Pixelabmessungen bleiben beim Verschieben des Qualitätsreglers unverändert.
Bei PNG wird „verlustfrei“ angezeigt und der wirkungslose Qualitätsregler deaktiviert.
WebP-Dateien werden nun tatsächlich als WebP gespeichert und nicht versehentlich als JPEG.

Die bisherigen 92 % stammen vom üblichen Standardwert des JPEG-Exports im Browser. Das ist ein guter Kompromiss aus Dateigröße und sichtbarer Qualität, aber kein aus dem Originalbild ausgelesener Wert.

Zur Auflösung: Der Regler verbessert die tatsächliche Bildauflösung nicht. Ein Bild mit 1920 × 1280 Pixeln behält exakt diese Pixelzahl. Eine höhere Qualitätsstufe reduziert lediglich zusätzliche JPEG-Kompressionsverluste. Bereits verlorene Details oder Unschärfen können dadurch nicht zurückgewonnen werden. Bei 100 kann die Datei daher erheblich größer werden, ohne sichtbar besser als das Original zu sein.

app.js
Code

[Tommy Herrmann]

Alles klar - ich habe beide Versionen ausprobiert, die fast identisch aussehen. Meine funktioniert ebenso, meiner fehlt aber die Suche (weil ich die nicht beauftragt habe).

Insofern ist Deine Version prima und vorläufig final.

[Volker]

Sorry Tommy,
da hatte ich dich missverstanden
Jetzt bin ich an dem Layer Dings und baue das mal fertig heute Abend online

[Tommy Herrmann]

Ja - ist doch egal. Nun hatte ich meiner KI nicht ausreichend Info geschickt. Insofern lassen wir die Anwendung "VN-Bild" mal so wie diese bei Dir ist. Ich finde sie ohnehin besser als meine Version.

Zur Info und zum Gucken, habe ich Dir meine "app.js" mal als "PN" gesendet. Kannst diese ja einfach mal im Mobirise Verzeichnis "addons" der Erweiterungen tauschen. Zuvor aber die Software schließen.

[Tommy Herrmann]

Volker,

vielen Dank für dieses tolle Werkzeug "VN Bild" – es ist für jeden, der mit Mobirise arbeitet, ausgesprochen nützlich. Hier ist meine Tutorialseite:

https://www.mobirise-tutorials.com/VN-B ... itung.html

[stobi_de]

Volker möge mir verzeihen, wenn ich hier Blödsinn schreibe. Bin gerade am Bodensee, aber so kurz reinschauen hier muss ich ja doch.
- Wenn ich bei mir die Bilderliste einlese, dann habe ich die Liste der Bilder 3cm hoch und 15cm breit.
Dadurch kann ich ähnliche Bilder nicht unterscheiden, es ist nur ein dünner Ausschnitt zu sehen.
- Es sollte eine Möglichkeit geben, das Bild in der entsprechenden Seite zu sehen, die entsprechende Seite direkt zu öffnen. Ich habe manchmal identische Bilder in kleiner und großer Auflösung auf verschiedenen Seiten
- Auflösung direkt kann man nicht ändern?

[Tommy Herrmann]

Man kann die Auflösung von jpg Bildern nicht mit herkömmlichen Mitteln erhöhen. Das kann nur eine KI, die dann quasi Details dazu erfindet/rechnet.

Es gibt in der App eine Schieber zur Änderung der Auflösung, das funktioniert technisch aber nur beim Verrringern.

[Volker]

Es gibt eine neue Version.
Die Seite auf der das jeweilige Bild benutzt wird steht nun auch unter dem Bild.
Ein Verlinken auf die Seite selber geht (noch) nicht
Da muss ich noch tiefer in Mobirise rein und das dann der KI verklickern

[stobi_de]

Hi Volker,
habe gerade Deinen Hinweis bezüglich der mangelnden test-Bereitschaft der User hier gelsen - ja, geht vor allem in meine Richtung, den Schuh muss ich mir anziehen.
ich habe gerade die Version 3 von vb-bild geladen.
Beim Start wird nicht der assets Order des aktuellen Projekte geladen, sondern von dem Projekt, was zuletzt geladen war. Da dieses ein Riesenprojekt war, hatte ich zunächst gedacht, dass das Tool nicht funktioniert.
Das Tool-Fenster ist nicht breit genug für den Inhalt: bei mir ist der Speichern-Button rechts abgeschnitten (bedingt durch den Auflösungs-Text davor).
Den Sprung zur Seite mit dem betreffenden Bild hast Du noch nicht eingebaut?
Dann steht das "JPE-Kompression" mit Default 92%. Ist die Kompression gemeint oder die Qualitätsstufe? Bei 92% kompression würde nur Pixel-Matsch übrig bleiben.
Die Auflösung selbst kann noch nicht verändert werden? (Also nur verkleinern, sonst wird es zu aufwändig).

Frank aus Ösiland

[Volker]

Ich muss Herrn Stober leider widersprechen

1. Wenn Du ein Projekt öffnest werden auch genau diese Bilder eingeladen ( automatisch)
Ich muss cache Probleme zugeben können auftreten
2. 92% ist eigentlich die Standard Kompression bei JPG und bezieht sich nur auf neue Bilder die Du also änderst.
3. Die Bilder sind breit genug !

Schau Dir bitte dieses Video an bevor Du Unwahrheiten hier postest



Nebenbei viele nehmen auch nur 80% auch das ist noch sehr gute Web Qualtität und wird z.B. in Wordpress empfohlen.

Falls Sie mit WordPress arbeiten: Das weltweit größte Content-Management-System hat hochgeladene Bilder früher standardmäßig automatisch auf 90 % bis 92 % komprimiert. Da mobile Ladezeiten (PageSpeed) für Google aber immer wichtiger wurden, hat WordPress diesen Standard vor einiger Zeit im Core-Code auf 82 % gesenkt.

DAs zum Thema Pixel-Matsch Blödsinn !!!

Wo es natürlich Probleme geben würde, wenn man da auf 50 oder noch mehr % rein zoomt, dann wirds matschig - logisch !
Allgemeiner Hinweis : Wer mit diesem Tool nicht arbeiten kann wegen Mängel, muss weiterhin mit einem Grafikprogramm seiner Wahl seine Bilder bearbeiten und mein Tool bitte löschen - geht ganz einfach

[Volker]

Nur mal am Rande erwähnt,

wer natürlich an seinem Monitor nicht die max Auflösung eingestellt hat, sondern Klötzchen Grafik, der darf sich nicht wundern wenn Buttons abgeschnitten oder Bilder nicht so groß erscheinen wie sie tatsächlich sind.

Ich gehe immer davon aus das ein User die max Auflösung für seinen Monitor / Display nutzt :


Laptop-Displays (14 bis 17 Zoll)

Code: Alles auswählen

Größe      | Typische Auflösung | Bezeichnung       | Format | Pixeldichte | Eignung für Bildbearbeitung
-----------|-------------------|-------------------|--------|-------------|--------------------------------------------------
14 Zoll    | 1920 x 1200       | WUXGA / FHD+      | 16:10  | ca. 161 ppi | Standard für Office, für Foto-Details etwas grob
14 Zoll    | 2880 x 1800       | 2.8K              | 16:10  | ca. 242 ppi | Hervorragend (z.B. bei vielen OLED-Laptops)
14 Zoll    | 3024 x 1964       | Liquid Retina     | ~14:9  | ca. 254 ppi | Optimal (Standard beim MacBook Pro 14")
15,6 Zoll  | 1920 x 1080       | Full HD           | 16:9   | ca. 141 ppi | Günstiger Standard, für Bildbearbeitung zu pixelig
15,6 Zoll  | 3840 x 2160       | 4K UHD            | 16:9   | ca. 282 ppi | Extrem scharf, verbraucht aber viel Akku
16 Zoll    | 2560 x 1600       | WQXGA / 2.5K      | 16:10  | ca. 188 ppi | Sehr guter moderner Standard für Creator-Laptops
16 Zoll    | 3456 x 2234       | Liquid Retina     | ~14:9  | ca. 254 ppi | Optimal (Standard beim MacBook Pro 16")
17,3 Zoll  | 1920 x 1080       | Full HD           | 16:9   | ca. 127 ppi | Nicht empfohlen für Grafik/Foto
17,3 Zoll  | 2560 x 1440       | WQHD              | 16:9   | ca. 170 ppi | Solide Arbeitsfläche auf großen Laptops
17,3 Zoll  | 3840 x 2160       | 4K UHD            | 16:9   | ca. 255 ppi | Maximaler Platz und Schärfe auf einem Desktop

Desktop-Monitore (24 bis 34 Zoll)

Code: Alles auswählen

Größe      | Typische Auflösung | Bezeichnung       | Format | Pixeldichte | Eignung für Bildbearbeitung
-----------|-------------------|-------------------|--------|-------------|--------------------------------------------------
24 Zoll    | 1920 x 1080       | Full HD           | 16:9   | ca. 92 ppi  | Nur für Einsteiger mit geringem Budget
24 Zoll    | 1920 x 1200       | WUXGA             | 16:10  | ca. 94 ppi  | Beliebt im Budget-Bereich (extra vertikale Höhe)
27 Zoll    | 2560 x 1440       | WQHD              | 16:9   | ca. 109 ppi | Der solide, preiswerte Allround-Standard
27 Zoll    | 3840 x 2160       | 4K UHD            | 16:9   | ca. 163 ppi | Der aktuelle "Sweet Spot" für Fotografen
27 Zoll    | 5120 x 2880       | 5K                | 16:9   | ca. 218 ppi | Perfekt für Mac-User (z. B. Apple Studio Display)
32 Zoll    | 2560 x 1440       | WQHD              | 16:9   | ca. 92 ppi  | Nicht empfohlen (Pixel sind deutlich sichtbar)
32 Zoll    | 3840 x 2160       | 4K UHD            | 16:9   | ca. 140 ppi | Hervorragend für große Schreibtische / Übersicht
34 Zoll    | 3440 x 1440       | UWQHD             | 21:9   | ca. 110 ppi | Extrem breit (Breitbild), ideal für Video-Timelines

Nur mal zur Info

[Volker]

So, ich habe die VN-Bild nun nochmal geändert.
Man kann das Arbeitsfenster nun verschieben und vergößern. Die Pfade wurden nun nochmal geschärft und gegen cache Inhalte resistenter gemacht, so das es nicht passieren kann das alte Bilder aus anderen Projekten anstatt das aktuelle auftaucht.

Bitte neu runter laden - ist auch V3 also nicht wundern