Wie weit Bild für webseite komprimieren?

Hallo, habe eine menge user generiertem content zu verarbeiten bei dem auch eine menge Bilder sind, screenshots von text, bilder von computerbildschirmen, diagramme, fotos von dingen etc. keine dinge wie landschaftsbilder die hohe qualität erfordern, also konvertiere ich jedes Bildformat erstmal in webp woduch es schon deutlich kleiner wird, danach kann ich noch prozentual verlustbehaftet weiter runtergehen, wie weit sollte man gehen, gibt es da empfehlungen?

hier mal beispielbilder in verschiedenen einstellungen:
https://cloud.mchost.fun/index.php/s/5EwXtPsYZoEatak

(orginal jpg 1.3Mb, orginal webp 207kb, bis bei 2% 23KB)

Das Ergebnis basiert auf 1 Abstimmungen

andere 100%

40% 0%

10% 0%

5% 0%

2% 0%

antiaes

07.12.2023, 01:41

Hast du Photoshop?

Mensch4

Fragesteller

07.12.2023, 01:43

nein, ich mache das automatisch mit der nodejs library "sharp"
https://www.npmjs.com/package/sharp?activeTab=readme

3 Antworten

jort93

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik

07.12.2023, 02:13

Das kommt zum einen drauf an wie groß es auf der Website zu sehen ist. Wenn es Vollbild angezeigt wird sollte es wenig komprimiert sein, wenn es nur klein angezeigt wird, dann eher mehr.

Gibt ja auch immer die Möglichkeit es erstmal komprimiert anzuzeigen, und dann durch draufklicken die volle Qualität zu bekommen.

Oder sogar dass man erst die kleine Version läd, wartet bis die komplette Seite geladen hat, und dann die Originalauflösung läd und damit dann die Vorschau ersetzt.

Weil du musst ja zum einen bedenken dass Nutzer mit Langsamen Internet nicht mehrere Sekunden Warten wollen, und andererseits Nutzer mit schnellem Internet ein gutes Bild wollen.

Franky12345678

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik

07.12.2023, 04:51

Plan B: Bei deinem Hoster ein großes Storage anmieten und das in den Pfad reinmounten, wo der Usercontent liegt (vorher Backup machen und den bestehenden Content vorab rüberkopieren, da er sonst durch das Mounten weg ist).

Ansonsten:

Ich würde png und webp (50%) parallel komprimieren und dann immer das kleinere von beiden speichern.

Diagramme und sonstige Abbildungen mit viel weiß und einfarbigen Flächen, die keine Fotos sind, komprimieren in png oftmals besser.

Bilder, die größer sind als wirklich nötig, würde ich gleichzeitig runterskalieren.

Ein Bild, das eine hohe Auflösung besitzt und stark komprimiert ist, kommt unter dem Strich schlechter weg als ein verkleinertes, das dafür weniger stark komprimiert ist und auf die gleiche Dateigröße kommt.

Ansonsten würde ich dafür sorgen, dass deine User dir nicht den Speicherplatz mit jedem Mist vollmüllen (z.B. Dateigröße pro Beitrag/User stark limitieren, übergroße Bilder mit starker Kompression abstrafen, Beiträge nach einiger Zeit löschen, ein Abo mit weniger Limitierungen anbieten etc.)

Woher ich das weiß:Berufserfahrung

Mensch4

Fragesteller

07.12.2023, 04:57

das ist eine gute Idee, ich sollte es auf jeden Fall noch runterskalieren

es wundert mich dass weiße Flächen in png besser komprimieren sollen, man sagt doch webp die beste Komprimierung nach 🤔

CoSci

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

07.12.2023, 01:44

andere

Also grade bei Diagrammen oder Screenshots würde ich da nicht zu weit runtergehen sonst kann man nachher nichts mehr vom Text erkennen, auch bei deinen Beispielbildern würde ich das Original vorziehen.

Ähnliche Fragen

Bilder in Access komprimieren?

Moinsen,

Ich erstelle gerade eine Datenbank zur Inventur. Mein Arbeitgeber hat sich gewünscht, dass jeder eingetragene Artikel ein Foto im Formular angezeigt bekommt. Dies funktioniert soweit auch ganz gut. Die Bilder werden als Typ Anlage abgespeichert. Ich habe jetzt allerdings das Problem, dass die Datenbank nach nicht einmal 180 Bildern schon auf 422 MB angewachsen sind. Die Bilder sind unkomprimiert und die Qualität massiv zu hoch.

Gibt es eine Möglichkeit die Bilder automatisiert zu verkleinern? Wenn ich jedes einzelne Bild manuell komprimieren und neu einbinden muss, würde mich das eine Menge Zeit kosten... Die Funktion Datenbank komprimieren hat leider keinerlei Einfluss auf die Bilder.

Danke

...zur Frage

Node.js deaktivieren in vs code?

Hallo, ich bin ziemlich neu in der ganzen Programmierszene. Ich habe mir vor kurzem vs code installiert um mit javascript zu programmieren und weil ich keine Ahnung hatte wie das ding funktioniert habe ich irgendwie so ein Node.js ding aktiviert. Wenn ich jetzt mit der extension code runner versuche meinen code zu aktivieren steht da nur, dass Der Befehl node falsch geschrieben ist. Ich habe aber gar kein node in meinem code. Was kann ich jetzt machen, damit es funktioniert???

...zur Frage

Discord Bot für Google Forms?

Ich möchte einen Discord Bot coden der Bei eintrag und abschließung eines google forms dokumentes einen kanal für den umfragten + seiine ergebnisse erstellt. jedoch kriege ich bloß einen fehler code. bin für jede hilfe dankbar:
CODE:
https://paste.pythondiscord.com/akasocoweg
Und hier der Fehlercode:

Die placeholder sind gewollt entfernt für den code wegen privatsphäre gründen

...zur Frage

Return ergibt undefined?

Moin

ich habe mit einem projekt gestartet und in diesem projekt hole ich mir von einer Github page die version nd vergleiche sie bzw. ich wollte das. Ich habe es mit Fetch() probiert. In node.js

fetch(adress).then(r => {
    return r.json()
})

und so

fetch(adress).then(r => {
    console.log(r.json());
}).then(data => {
    return data
})

Ich kriege aber wenn ich es console immer

undefined

zurück

...zur Frage

Einzelne Buchstaben in Javascript zählen?

Moin,

ich habe eine kleine funktion gebaut, wo man im Eingabefeld seinen Namen einträgt & daneben ist ein Diagramm, der anzeigt, wie oft der Name schon eingegeben wurde.

Jetzt soll ausgewertet und angezeigt werden, wie oft die Buchstaben a bis z in allen angemeldeten Namen vorkommen. Hat jemand eine Idee?

...zur Frage

Ist es möglich einen Bot zu programmieren, welcher Umfragen automatisch ausfüllt, beended und eine neue startet?

...zur Frage

DiscordJS Ticket-Bot | Bis das Ticket geschlossen wird, darf der User kein weiteres erstellen - wie geht das?

Hallo zusammen,

ich habe mir einen Ticket-Bot mit DiscordJS erstellt. Nun ist meine Frage, ob es möglich ist, dass ein User nur 1 geöffnetes Ticket haben darf.

Hier das Script: https://paste.guafter.de/D436daLAs7

Danke im Voraus

...zur Frage

Wie führt man z.B. .exe oder .bat Dateien mit nodejs aus und schliesst sie danach wieder?

Ich suche nach etwas wie:

execute(./mein/path.exe)

und um es wieder zu schliessen:

stopProcess(./mein/path.exe)

Etwas in dieser Richting

Ich will dann wirklich auch, dass ein Window geöffnet wird, z.B. eine zweite Console oder so und will sie dann mit einem Event wieder schliessen können.

...zur Frage

Zweitsprachige Webseite mit JS?

Ist es besser eine extra Seite für die zweite Sprache meiner Website zu machen also seite.com und seite.com/de, oder wäre es besser, die Texte direkt mit Js zu machen. Also wenn einer mit der Browsersprache Deutsch die Webseite betritt, soll Js es ermitteln und dementsprechend den Text einblenden ohne eine zweite Seite. Was wäre besser

...zur Frage

WEBSTORM erkennt .send Funktion nicht?

Bei folgendem Code sind die Methoden .send und .awaitReaction unterstrichen.

"Unresolved function or method send()"

Ich habe discord.js und so schon installiert. Muss man da sonst noch etwas importieren, damit .send usw. funktionieren?

const { Client, MessageEmbed, Intents } = require('discord.js');
const client = new Client({ intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MESSAGES] });

const TOKEN = 'Mein Token';
const channelId = 'ChannelID'; // Die ID des Textkanals, in dem die Nachrichten erstellt werden sollen

const userGroup = []; // Die Liste der Benutzer, die aufgelistet werden sollen
const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5']; // Die Auswahlmöglichkeiten

let currentIndex = 0; // Aktueller Index der Benutzergruppe

client.on('ready', () => {
    console.log(`Eingeloggt als ${client.user.tag}`);
});

client.on('messageCreate', async (message) => {
    console.log("P - Start des Event-Handlers");
    if (message.author.bot) return;

    if (message.content.startsWith('!start')) {
        console.log("P - !start erkannt");
        if (currentIndex < userGroup.length) {
            const user = await client.users.fetch(userGroup[currentIndex]);

            // Erstelle eine Nachricht mit den Auswahlmöglichkeiten
            const embed = new MessageEmbed() // Hier MessageEmbed verwenden
                .setTitle('Wähle eine Option:')
                .setDescription(options.join('\n'));
            const sentMessage = message.guild.channels.cache.get(channelId);
            await sentMessage.send(embed);
            console.log("P - Nachricht gesendet");
            // Füge Reaktionen hinzu
            for (let i = 0; i < options.length; i++) {
                await sentMessage.react(String(i + 1) + '\u20E3'); // Emoji-Reaktionen (1️⃣, 2️⃣, usw.)
            }

            // Warte auf eine Reaktion des aktuellen Benutzers
            const filter = (reaction, user) => user.id === userGroup[currentIndex];
            const collected = await sentMessage.awaitReactions(filter, { max: 1, time: 60000 }); // 60 Sekunden Zeit zum Reagieren

            if (collected.size === 0) {
                message.guild.channels.cache.get(channelId).send(`${user.tag} hat keine Option ausgewählt.`);
            } else {
                const chosenOption = options[parseInt(collected.first().emoji.name) - 1];

                message.guild.channels.cache.get(channelId).send(`${user.tag} hat "${chosenOption}" ausgewählt.`);
                // Hier kannst du die gewünschte Aktion ausführen, basierend auf der ausgewählten Option
            }

            // Lösche die ursprüngliche Nachricht und die Auswahl-Nachricht
            await message.delete();
            sentMessage.delete();

            currentIndex++; // Zum nächsten Benutzer in der Gruppe wechseln
        } else {
            message.channel.send('Alle Benutzer aus der Gruppe wurden aufgelistet.');
        }
    }
});
console.log('Bot starting');

client.login(TOKEN);

...zur Frage

Javascript ES Modules benutzen für Mongoose?

Kann ich mittlerweile in Node.js ES modules benutzen (export, import) anstatt CommonJS (module.exports, require)?

...zur Frage

Mit Node.js prüfen von welcher Webseite man weitergeleitet worden ist möglich?

Ich will eine kleine Funktion in meinem Webserver einbauen, der prüft ob man jetzt z.B. von localhost:3000 zu localhost:3000/test weitergeleitet wurde. Ich will halt eine Page machen, aufder man nur kommen kann, wenn man vorher auf der Hauptpage ein Passwort korrekt eingegeben hat.

...zur Frage

Wie benutzt man Javascript mit Node.js Dateien?

Wenn man eine Webseite mit Node.js Webserver betreit werden ja die HTML Dateien ueber den Node.js Webserver aus gegeben. Man kann ja einerseits Node.js Dateien mit Javascript erstellen und auch normale Javascript Dateien welche man in HTML Dateien importiert. Wenn ich jetzt in der index.html eine Javascript Datei importiere, dann wird der Browser das Javascript ausfuehren, wenn man das Javascript aber in einer Node.js Datei speichert wird Node.js das Javascript ausfuehren, ich wuerde mal gerne wissen, ob es irgend ein Vorteil bringt wenn man entweder Javascript nur von Node.js oder groesenteils ueber den Webbrowser ausfuehren laest; beziehungsweise ist es ueberhaupt moeglich das man das Javascript welches man in der index.html importiert auch ueber Node.js laufen laest. Programmiertechnisch mueste man dann denke ich aufjedenfall einiges wieder aendern an der Javascript Datei welche in der index.html importiert wird, weil ich denke mal auch das Javascript in Node.js auch bisjen anders aufgebaut ist.

Aber wie auch immer ich bin da noch bisjen neu und versuche etwas besseren Ueberblick zu bekommen, wenn kann mir den bisjen was dazu erzaehlen?

...zur Frage

Zwei verschiedene javascript Dateien mit Node.js laufen lassen?

Kann man zwei verschiedene Dateien mit node.js laufen lassen, ich habe zum Beispiel zwei Ordner die auf verschiedenen Adressen liegen und normalerweise gehe ich mit power shell command "cd" in ein Ordner und starte dann mit "node index.js" die gewuenschte Javascript Datei. Sobald aber eine Javascript Datei gestartet wurde kann ich keine zweite neu starten ohne die aktuelle zu beenden.

Deswegen frage ich mich gerade ob das irgendwie funktioniert zwei Dateien aus verschiedenen Ordnern gleichzeitig mit node.js laufen zu lassen?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen