Gimp* skaliert sehr schön in der Standardeinstellung (Interpolation: Kubisch). ImageMagick's
1 | convert input.jpg -resize 10% ./output.jpg |
liefert scheinbar die gleiche Qualität. Gefällt mir noch besser weil ich daraus ein Skript basteln kann. Ich bin aber kein Webdesigner. Falls Ihr wisst wie breit die Grafiken für Smartphone, Tablet etc. idealerweise sein sollen (vielleicht haben sich da ja bestimmte Standardgrößen etabliert) bzw. noch bessere Tools kennt, bin ich ganz Ohr.
Off-Topic:
Hier die HTML-Datei falls Ihr auch mal rumspielen wollt mit vom Browser ausgetauschten Bildern (ihr könnt dazu das Browserfenster einfach kleiner/größer ziehen):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Dem Browser überlassen welches Bild er herunterläd</title> </head> <body> <img src="bild-200pxBreit.jpg" <!-- Fallback-Lösung sozusagen --> <!-- Erklärung: --> <!-- 800w teilt dem Browser mit dass das Bild 800px breit ist: --> <!-- Ist das Browserfenster >= 800px, läd der Browser dann (bei normaler, also einfacher Pixeldichte) nur dieses herunter: --> srcset="img/bild-800pxBreit.jpg 800w, img/bild-400pxBreit.jpg 400w, img/bild-200pxBreit.jpg 200w" alt="Blabla"> </body> </html> |
Es gibt auch noch eine andere Lösung in HTML mit dem <picture> Element. Meine Lösung soll aber angeblich meist die bessere sein weil hier der Browser entscheidet und nicht Du als Entwickler. Man kann das obige Beispiel nämlich noch so erweitern dass man dem Browser mitteilt wieviel Platz die Bilder horizontal in Prozent ab bestimmter Bildschirmgröße einnehmen sollen. Diesen Teil recherchiert aber bitte selber. Ich verstehe ihn nicht ganz. Denn die Bilder nehmen dann tatsächlich im Browser nur diese Breite in Prozent ein. Selbst in meinem einfachen Beispiel oben wenn man es nachrüsten würde.
* Gimp gibt's in einer neuen Version (endlich alles in einem Fenster)