Responsive Bilder
0 0 
Felix Riesterer
0 0 0 0 
MudGuard
0 0 
JürgenB
0 
Gunnar Bittersmann
0 0 0 0 JürgenB
Responsive Bilder
TabellenkalkGuten Tag,
Wie kann ich responsive Bilder erstellen?
-
Guten Tag,
Hallo!
Wie kann ich responsive Bilder erstellen?
Das Beste wird sein, Du beginnst mit einem Kreis. Wenn Du den Viewport dann verkleinerst oder vergrößerst und der Kreis wird kleiner/größer (und bleibt ein Kreis), dann bist Du am Ziel!
-
@@Mitleser
Wie kann ich responsive Bilder erstellen?
Das Beste wird sein, Du beginnst mit einem Kreis. Wenn Du den Viewport dann verkleinerst oder vergrößerst und der Kreis wird kleiner/größer (und bleibt ein Kreis), dann bist Du am Ziel!
Früher nannte man das Testbild.
(Rotkaeppchen68, CC-BY-SA 3.0)
Wenn der Kreis beim Vergrößern/Verkleinern des Viewports zu einer Ellipse verzerrt, dann hat man was falsch gemacht. Vermutlich
widthundheightunpassend angegeben.Die einfachste Antwort auf die Frage, wie man Bilder responsiv macht, ist wohl: nicht
widthundheightangeben, sondern:
img { max-width: 100% }.LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
Liebe(r) skyfin,
vielleicht hilft Dir dieses Tutorial weiter: responsive Bilder
Liebe Grüße,
Felix Riesterer.
-
hallo
Liebe(r) skyfin,
vielleicht hilft Dir dieses Tutorial weiter: responsive Bilder
Liebe Grüße,
Felix Riesterer.
Eigentlich beginnt das Herstellen von Bildmaterial, das für responsives Webdesign geeignet ist, schon früher, nämlich beim Bild selber.
Dazu gehört
- Die Wahl des besten Formats
- gute Beschneidung
- bei png optimierte Kompression
- svg wenn möglich.
Sobald Pixelgrafiken > 50kB sind, sollte man auf jeden Fall kleinere Varianten aufbereiten.
-
- svg wenn möglich.
Möglich ist das immer. Aber sinnvoll?
Sobald Pixelgrafiken > 50kB sind, sollte man auf jeden Fall kleinere Varianten aufbereiten.
Wie kommst Du auf diese pauschale Einschätzung?
-
hallo
- svg wenn möglich.
Möglich ist das immer.
Das möchte ich mal sehen
Aber sinnvoll?
Fragwürdig sind SVGs mit eingebetteten Pixelgrafiken und SVGs die grösser als die Pixelequivalente sind.
Sobald Pixelgrafiken > 50kB sind, sollte man auf jeden Fall kleinere Varianten aufbereiten.
Wie kommst Du auf diese pauschale Einschätzung?
Aufgrund des Themas: responsive Bilder. Sie ist also nicht so pauschal.
-
Hi,
- svg wenn möglich.
Möglich ist das immer.
Das möchte ich mal sehen
z.B. aus einem Photo Pixel für Pixel die Farbe auslesen, ein rect der Größe 1px * 1px pro Pixel (oder ein circle mit Radius 1/2 px oder ...) mit genau dieser Füllfarbe, x und y des rect-Elements entsprechend der Position des Photo-Pixels.
cu,
Andreas a/k/a MudGuard-
hallo
Hi,
- svg wenn möglich.
Möglich ist das immer.
Das möchte ich mal sehen
z.B. aus einem Photo Pixel für Pixel die Farbe auslesen, ein rect der Größe 1px * 1px pro Pixel (oder ein circle mit Radius 1/2 px oder ...) mit genau dieser Füllfarbe, x und y des rect-Elements entsprechend der Position des Photo-Pixels.
seufz
-
Hallo Andreas,
z.B. aus einem Photo Pixel für Pixel die Farbe auslesen, ein rect der Größe 1px * 1px pro Pixel (oder ein circle mit Radius 1/2 px oder ...) mit genau dieser Füllfarbe, x und y des rect-Elements entsprechend der Position des Photo-Pixels.
wegen der besseren Skalierbarkeit würde ich das Bild vorher noch auf eine deutlich höhere Auflösung resamplen. Auch weiß man ja nie, wie groß und wie hochauflösend die Monitore noch werden. Unsere Kinder werden über 4k reden, wie wir über ASCII-Art. 😎
Gruß
Jürgen -
@@MudGuard
z.B. aus einem Photo Pixel für Pixel die Farbe auslesen, ein rect der Größe 1px * 1px pro Pixel (oder ein circle mit Radius 1/2 px oder ...) mit genau dieser Füllfarbe, x und y des rect-Elements entsprechend der Position des Photo-Pixels.
Das Gute daran ist: Da SVG ja XML ist, kann man das mit XSLT in andere Formate transformieren — bspw. in JPEG. 😏
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Hallo,
Das Gute daran ist: Da SVG ja XML ist, kann man das mit XSLT in andere Formate transformieren — bspw. in JPEG. 😏
Muss man dafür vorher den screenshot eingescannt haben?
Gruß
Kalk
-
-
Fragwürdig sind SVGs mit eingebetteten Pixelgrafiken und SVGs die grösser als die Pixelequivalente sind.
Falls die Vektorbestandteile des SVG es "wert" sind: warum nicht?
Sobald Pixelgrafiken > 50kB sind, sollte man auf jeden Fall kleinere Varianten aufbereiten. Wie kommst Du auf diese pauschale Einschätzung? Aufgrund des Themas: responsive Bilder. Sie ist also nicht so pauschal.
Häh? Die Dateigröße sollte im Verhältnis zur Zielgruppe / zum Inhalt passen, klar. Aber was soll das mit responsive zu tun haben?
Pauschal 50kb rauszuhauen, ist IMHO Unfug. Für ein Produktbild in einer Übersicht eines Shops wäre das schon deutlich zu viel. Für ein Vollbild einer Fotografie-Community vermutlich zu wenig.
-
hallo
Pauschal 50kb rauszuhauen, ist IMHO Unfug. Für ein Produktbild in einer Übersicht eines Shops wäre das schon deutlich zu viel. Für ein Vollbild einer Fotografie-Community vermutlich zu wenig.
Dann bitte ich dich, erst zu überprüfen, ob ich zur Zielgruppe gehören will und nicht einfach ein Ziel für Download-Spam.
-
Dann bitte ich dich, erst zu überprüfen, ob ich zur Zielgruppe gehören will und nicht einfach ein Ziel für Download-Spam.
Vor oder nach dem Aufruf meiner Seite? 😉
-
Hallo,
[riesiges Bild, das ein Fragezeichen zeigt]
- Ein schönes Beispiel für ein nicht responsives Bild.
- Ein schönes Beispiel dafür, besser SVG gewählt zu haben.
Gruß
JürgenPS SVGs sollten natürlich komprimiert ausgeliefert werden.
-
- Ein schönes Beispiel für ein nicht responsives Bild.
- Ein schönes Beispiel dafür, besser SVG gewählt zu haben.
Mein Held. Schönes Wochenende 😉
-
-
-
-
