Bild-Direktlink Größe ändern in der URL?
An die Nerds :P
Wie ändert man in der URL eines Bildes die Anzeigegröße? Beispielsweise habe ich eine URL die so aussieht: www.example.com/bild.jpg
Ich glaube shconmal URLs gesehen zu haben, bei denen noch so Art "Befehle" hinten dran standen, z.B. um die Größe zu ändern
In etwa www.example.com/bild.jpg&width=100&height=100 (das ist sicher Falsch, aber so in etwa muss das gehen, denke ich?)
Grüße
3 Antworten
Einen solchen Befehl gibt es nicht. Es gibt nur manchen Systeme, die Bilder nicht direkt zurückgeben und stattdessen eine Script oder Proxy dazwischengeschaltet ist. Dort kann es dann solche Parameter geben. So wie zum Beispiel hier:
https://via.placeholder.com/300x64?text=Gutefrage
Das ist aber kein Standard und bei direkten Links zu einen Bild geht das nicht.
Okay, schade. Ich kenne mich ja nicht aus und dachte das ist "universell", aber jetzt weiß ich dass sowas von der Webseite ausgeht.
Ave!
Die jeweilige Seite auf der diese Funktionalität vorhanden ist, benutzt die URL-Parameter als Werte für die Bildgröße im "img" Tag.
Pauschal funktioniert das nicht, die Seite muss entsprechend konfiguriert sein, damit das funktioniert.
also funktioniert das nicht überall
Korrekt
und wenn, dann überall anders?
Ja, wenn eine Seite die Funktionalität besitzt, kann es sein, dass die Parameter andere Namen besitzen.
Nein wenn du so eine URL hasr, mit dem direkten Link zum Bild gehen natürlich keine Parameter
Wenn es ein Link zu einer HTML Seite wäre könnte es funktionieren wenn die Seite deine Parameter so abfragt und zum vergrößern der Bilder verwenden würde.
Was aber eine Seite mir solchen Parametern als GET Parameter macht, hängt natürlich von der Implementierung der Seite ab.
Nein wenn du so eine URL mit dem direkten Link zum Bild gehen natürlich keine Parameter
Das stimmt nicht.
www.example.com/bild.jpg?width=100&height=100
Dieser Link wäre in dieser Form exakt so möglich.
Das Backend muss nur so konfiguriert werden, dass der Pfad (bild.jpg) ebenfalls als Parameter interpretiert wird, von dem das Bild mit Breite und Höhe evaluiert und in einer simplen HTML-Struktur im "img"-Tag ausgegeben wird.
In Node.js würde das wie folgt aussehen:
app.get("*", (req, res, next) => { // Erhalten aller Anfragen auf diese IP
const imgName = req.path.split("/")[1]; // Bildname. Im Beispiel: bild.jpg
const imageBase64 = fs.readFileSync(`/src/${imgName}`, {encoding: "base64"}); // Laden des Bildes als Base64 (Wir wollen es einfach halten)
const width = req.query.width; // Width Parameter aus URL
const height = req.query.height; // Height Parameter aus URL
const imagePattern = fs.readFileSync("pattern.html", "utf-8"); // Laden der Vorlage mit dem "img"-Tag
imagePattern.replace("%imageSrc%", imageBase64); // Ersetzen der Platzhalter-Variable mit übergebener Bild
imagePattern.replace("%width%", width); // Ersetzen der Platzhalter-Variable mit übergebener Breite
imagePattern.replace("%height%", height); // Ersetzen der Platzhalter-Variable mit übergebener Höhe
res.sendFile(imagePattern); // Senden der Datei
});
Anmerkung: Ich habe das Programm nicht getestet, vertraue aber meiner Erfahrung als langjähriger Node.js Programmierer.
Auch ist zur Einfachheit keine Abfrage drin ob ein Wert leer oder Falsch ist.
Dieser Schnipsel soll auch nur das Grundkonzept verdeutlichen.
Mit PHP ginge das auswerten der Parameter natürlich auch.
Bei der Website sehe ich ja nicht das Problem
Ich verstehe nur nicht wie du auf dem Server aus Bilder Parameter machen möchtest.
Stehe da wohl auf dem Schlauch.
Im Prinzip macht das so eh keinen Sinn da der Browser ja eh schon jedes beliebige Bild vergrößern und verkleinern kann.
Wäre also nur rein aus Interesse
Ich verstehe nur nicht wie du auf dem Server aus Bilder Parameter machen möchtest.
Zwar führt der Link "www.example.com/bild.jpg" augenscheinlich zu einem Bild und würde bei einem normalen Webserver auch das Bild mit "bild.jpg" als Namen anzeigen, aber ich fange mit app.get("*") alles ab, was als Pfad angegeben wird, also: "/bild.jpg". Mit diesem Pfad gehe ich jetzt so um, dass ich das Bild aus einem anderen Ordner mit diesem Namen ziehe und es in eine HTML-Vorlage einfüge, wo ich noch die Werte für height und width aus den Parametern anpasse.
Diese Vorlage sende ich dann inklusive dem geladenen Bild an den Client.
Wäre mein Link "www.example.com/sunrise.jpg" würde die Datei "sunrise.jpg" in die HTML eingefügt werden. Bei "/bird.jpg" die Datei "bird.jpg" und so weiter.
Das heißt: Für den Nutzer sieht es so aus, als würde er das Bild direkt vom Server-Ordner aufrufen, aber der Server bearbeitet sie im Hintergrund vor der Auslieferung und fügt sie in eine HTML-Datei ein.
Ich hoffe es war halbwegs verständlich.
Achso, mein Gedankenfehler.
Ich dachte das JS wäre Teil der HTML Seite, das läuft auf dem Server.
Danke.
Aber einen brauchbaren Sinn siehst du vermutlich auch nicht wirklich sich so die Bilder in einer bestimmten Größe anzusehen anstatt im Browser zu vergrößern bzw verkleinern.
Oder?
Falls es dich / euch interessiert, es ging um genau dieses Bild:
https://www.k-side-unlimited.de/wp-content/uploads/2019/08/DSC03809-Bearbeitet-1-1024x683.jpg
Wenn man das "-1024x683" im link entfernt, erhält man das Bild mit einer Auflösung von mehr als 7000px Breite!
Obwohl es in der (originalen) Auflösung nirgends auf der Seite zu finden war, ist es wohl mit der Auflösung auf dem Server gespeichert, und ich fragte mich ob das überall so geht. Aber ich habe rausgefunden, dass das 2 verschiedene Bilder waren. Also das gleiche Bild mit anderer Auflösung 2 mal auf dem Server der Webseite (und mit anderem Dateinamen).
Naja egal...
Ach, du meinst die Auflösung. In deiner Frage ging es um Anzeigegröße.
Aber auch die Auflösung könnte man ändern und bräuchte nicht einmal zwei Bilder. Wenn man es schlau anstellt, kann man das Bild vom Server skalieren lassen und so in dem gewünschten Format ausgeben lassen.
Das hätte dann tatsächlich einen Nutzen :D
Aber ich habe rausgefunden, dass das 2 verschiedene Bilder waren. Also das gleiche Bild mit anderer Auflösung 2 mal auf dem Server der Webseite (und mit anderem Dateinamen).
Natürlich sind das 2 Bilder wenn es 2 unterschiedliche Namen sind. Es sind in der Regel 3
Das Original Bild mit über 7000px macht im Internet eigentlich keinen Sinn.
Es ist Evtl ein größeres für 4k Auflösung
Dann hättest du es aber auch nicht gemerkt da man für 1 Bild verschiedene Auflösungen angeben kann und der Browser nimmt sich automatisch das passende.
So kann es sein, dass Handy doch schnell lädt weil es nur kleines Bild anzeigt und 4K TV trotzdem hohe Auflösung bekommt.
Natürlich ist das nicht überall so und du weißt nicht welche verschiedenen Namen und Auflösungen auf dem Server sind.
Das hier war reiner Zufall
Und mit Parametern wie in der Frage hat das rein gar nichts zu tun
Nicht ganz richtig.
Es macht keinen Sinn das gleiche Bild auf dem Handy wie auch PC oder TV anzuzeigen.
Ja es funktioniert natürlich
Aber entweder lädt dann das Handy sehr langsam oder der 4K TV sieht alles pixelig.
Deshalb wird oft 3-4 Bilder unterschiedlicher Auflösung für großflächige Bilder verwendet die der Browser dann automatisch passend aussucht.
Es stimmt aber dass viele auf diese Optimierung von Ladezeit und Auflösung verzichten und mittlere Auflösung für Alles verwenden.
Warum du meinst es hätte einen Nutzen nur ein Bild zu verwenden ist mir eher ein Rätsel
Man kann übrigens das Problem auch dadurch umgehen dass man SVG Bilder verwendet
SVG wurde gerade dafür gemacht
Das Vektorbild kann quasi Verlustlos beliebig Scaliert werden.
Is dann natürlich viel einfacher und schneller
Es macht keinen Sinn das gleiche Bild auf dem Handy wie auch PC oder TV anzuzeigen.
Wieder sind wir beim gleichen Thema: Es ist nicht das Gleiche Bild, da der Server ein hochauflösendes Bild bei Anfrage herunter skaliert. Dies ist ohne Verlust von Qualität simpel möglich.
Auch ist der Speicherbedarf des Bildes danach entsprechend kleiner.
Warum du meinst es hätte einen Nutzen nur ein Bild zu verwenden ist mir eher ein Rätsel
Speichert man tausende Bilder ist es Simpler und Übersichtlicher ein einziges Hochauflösendes Exemplar zu speichern und dies der Anfrage gerecht zu skalieren.
Hochauflösendes Bild bei Anfrage herunter skaliert. Dies ist ohne Verlust von Qualität simpel möglich.
Das stimmt nicht
Zuerst wird das HTML/PHP heruntergeladen
Danach fordert der Server die Bilder und CSS an und bekommt alles
Erst danach weiß der Browser wie er die Bilder positionieren muss
Und skaliert die Bilder.
Wenn mehrere Bilder im HTML/PHP für verschiedene Auflösung angegeben werden, kann der Browser schon anhand dem HTML/PHP und deiner Display Info das richtige Bild auswählen und lädt keine so unnötig großen Bilder
Speichert man tausende Bilder ist es Simpler und Übersichtlicher ein einziges Hochauflösendes Exemplar zu speichern
Klar - deshalb gibt es viele die von der entsprechenden HTML5 Möglichkeit keinen Gebrauch machen.
Es ist halt einfacher
Übersichtlicher ist es nicht wenn man es richtig macht
Und dass die Bilder nicht vom Server skaliert werden sondern vom Browser kannst du ganz einfach testen
Einfach eine Website mit ca 10 Bilder
Diese in hoher Auflösung ablegen
Handy auf langsameren Internet umschalten oder im Browser die Symu für Handynetz aktivieren.
Dann schauen wie sich die Seite das erste Mal aufbaut.
Die kannst zusehen wie sich die Seite aufbaut.
Achtung beim weiter laden immer Cache löschen sonst ist es natürlich beim weiteren testen immer schnell da die Bilder gar nicht mehr geladen werden.
Anschließend die Bilder in viel kleinerer Auflösung (passend zur Handyauflösung)
Dann nach Cache löschen nochmal testen
Und die gleiche Seite ist quasi sofort da.
Kannst gerne auch die Performance Analyse zu den Testst im Browser machen.
Die Bilder werden mit normalem HTML5 und CSS3 nicht im Server (zumindest ohne Server Tricks) sondern vom Browser an die passende Auflösung angepasst, denn nur der kennt die Displaygröße und und die notwendige Auflösung der Bilder.
Deshalb gibt es die HTML Erweiterung um mehrere Auflösungen für ein Bild anzugeben, damit sofort da passender Bild gedownloaded werden kann, noch bevor die CSS analysiert und berechnet wurden
Offensichtlich hast du mit Backend-Entwicklung absolut keine Erfahrung und bringst immerzu dein Frontend-Wissen an, was zwar in der Hinsicht korrekt ist, aber nicht meinen Kommentaren entspricht.
Du verstehst einfach nicht, dass ich ausschließlich von einer Lösung im Backend spreche, die völlig optimal wäre.
Ich spreche von der normalen Website mit ganz normalen HTML/PHP
Und das sind nunmal die meisten Seiten.
Ich habe nicht behauptet dass man im Backend nicht auch tricksen könnte.
Geht übrigens sogar schon mit PHP ohne riesen Aufwand, aber ich bezweifle dass die allgemeinen Website Ersteller (jetzt sag bitte nicht Programmierer) dies machen oder überhaupt könnten.
Dass erfahrene Backendentwickler das können habe ich nirgends abgesprochen.
Ich mache auch so manches im Backend mit PHP was andere umständlicher im CS im Frontend machen bzw machen würden.
Ich berechne und zeichne auch manche Grafiken im Backend zur Laufzeit
Stimmt ich bin kein Backend Profi wie du bist
Dafür habe ich die Frage des Fragestellers verstanden und dafür geantwortet
Wenn du dich nicht mit HTML5 auskennst dann gibt es dafür auch Tutorials. Kann auch nicht schaden.
Aber logisch gibt es für jedes Problem immer mehrere Wege
Z.b. wurden früher erst Bilder kleinerer Auflösung oder Dummy zuerst geladen und damit die Seite erst grob dargestellt.
Danach wurden die Bilder mit besserer Auflösung geliefert und die Seite aufgehübscht.
Auch das war ein Weg zur Zeiten des langsamen Internets - ganz ohne Server Tricks.
Auch mit JS könnte man im Frontend einiges dieser Richtung machen.
JS Profis werden warscheinlich hier kreativer als andere.
Aber es ging - zumindest in der Anfangsfrage - um x-belibige Seite und Bilder per Parameter zu ändern
Die Gemeinsamkeit aller Seiten ist nunmal der HTML5 Standard
Und darauf habe ich mich bezogen!
Gerne kannst du alles anders machen nur darum ging es nicht in der Frage und hilft dem Fragesteller so nicht.
Genau
Das ist falschAber wenn du so das Bild im Browser öffnest einfach Ctrl + drücken und vergrößern
Oh, also funktioniert das nicht überall, und wenn, dann überall anders?
Schade...