Bilder fürs Web anpassen Hilfe
lima-city → Forum → Die eigene Homepage → Grafikdesign
bild
bildformat
bringen
ersten blick
format
foto
frage
http
internet
kompression
programm
prozent
schauen
server
speichern
unterschied
url
vorschau
weben
webseite
-
Hey. Ich wollte meine Website mal besuchen und mir ist aufgefallen das die Bilder viel zu lange brauchen zu laden. Liegt daran weil ich jpg ohne Kompression benutze aber jetzt kommt meine frage.
Bis wie viel Prozent kann ich gehen ohne den Unterschied auf dem ersten Blick zu merke??
Danke im Voraus -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich geh da ehrlich gesagt nicht nach Prozenten.
Ich schau mir an wie es bei wie viel aussieht und entscheide dann ob die Qualität zu sehr leidet oder nicht.
Gruß
dein Oconoger -
deutscheradler schrieb:
Bis wie viel Prozent kann ich gehen ohne den Unterschied auf dem ersten Blick zu merke??
Das ist abhängig vom Motiv, Ausgangsmaterial, benutzen Hilfsmittel (Programm), dessen Einstellungen und von der Vorgehensweise.
Wichtiger als die Kompression ist allerdings, daß das Bild auch nur mit der Größe geladen wird, mit der es auch angezeigt wird. Es ist sinnlos, ein Bild mit 12Mpx auf den Server zu legen, wenn es auf der Seite (selbst in der Großansicht einer Lightbox) nur mit 1024*irgendwas benötigt wird. Mit passender Größe abgelegt hat das Bild dann z.B. nur noch 1/16 der Größe
Um "mal eben ein existierendes JPG fürs Web zurechtzustutzen nutze ich gerne Irfanview.
Ablauf:
- Bild auf gewünschte Endgröße bringen (sei es durch Freistellen eines Ausschnittes oder Größenänderung)
- nachschärfen
- Fürs Web speichern. Das geht mittels eines Plugins, das auch eine Vorschau mit Zoom-Funktion liefert. (Einstellungen: subsampling HIGH & Progressive)
Wie weit man die Qualität dabei runterziehen kann, ist vom Ausgangsmaterial und den persönlichen Ansprüchen abhängig. Einfach mal die Vorschau begutachten.
-
Was Bilder betrifft handhabe ich das wie folgt: Ich lege direkt auf meine Webseite ein kleines Vorschaubild, sagen wir 150 mal 150 Pickel groß. Dazu schreibe ich in der Bildunterschrift einen kurzen Kommentar wie "Klick zum Vergrößern" und erst der Klick lädt das vollständige von mir aus auch Bildschirmfüllende Bild nach.
Wenn du die Bilder direkt in deine Seite einbindest, solltest du diese nicht via HTML/CSS vom Server skalieren lassen (also Breiten und Höhenangaben da im Quelltext angeben) sondern vorm vorm Upload die gewünschten Abmessungen bringen. Die meisten Bildbearbeitungsprogramme haben schon gewisse Funktionen wo man Breite/höhe skalieren kann. Meist wird da auch das Seitenverhältnis beibehalten. Überflüssiges kannst du auch gleich ganz aus dem Bild wegschneiden. Die Kompression eines Bildes hilft eher weniger. -
Ich würde dir bei mac auf jeden fall die app "Fotor" empfehlen und bei Windows Photo Scape. Damit kannst du deine Fotos optimal skalieren und du hast einen Vorschau Editor, indem du gleich den Unterschied zum Original siehst. Ich setz sie meist auf weniger als 50% Prozent Fest.
-
Falls du ein neues Bild machen solltest Dann Speicher es als .WEBP ab. Nimm Kompression von 50% - 70% und das Bild sieht immernoch gut aus.
Aber am besten mit LightBox arbeiten und dann ein Vorschau-Bild machen.
Gruß -
fatfreddy schrieb:
app-tricks schrieb:
Falls du ein neues Bild machen solltest Dann Speicher es als .WEBP ab.
Ein guter Tipp ... aber nur, solange man seine Bilder vor Usern mit Firefox verstecken will, denn Firefox unterstützt dieses Graphikformat noch immer nicht.
Mist wusste ich nicht...
Denke Internet Explorer auch nicht.
Ist mein sorgen Kind.
Dann müssen sie es mal schnell FireFox beibringen.
Denn so wie ich es vermute wird bald .WEBP oft genutzt. Aber da hat wenigstens Google was gescheites gebastelt. Naja mal schauen.
Also verzichte erstmal lieber drauf. Bis FireFox es unterstützt. Ich schreibe dir eine PN wenn ich weiß ob es nun geht.
Glaube Wenn ich sie mal in paar Monaten fertig bin und FireFox es immernoch nicht kann werde ich mal schauen ob man ihm es per JavaSkript bei bringen Kann. Also nur wenn er meine Seite besucht. Sollte ja irgendwie gehen.
Sonst wenn jemand mit FireFox Die Website besucht weise ich ihn drauf hin Das FireFox diesen Bildformat nicht unterstützt. Werden Dann einen Link zu einem Plugin anzeigen womit er dann diesen Datei Format sehen kann.
Müsste sonst Gefühlte 1000 Bilder neu machen.
Das würde sehr lange dauern.
Gruß
Beitrag zuletzt geändert: 20.7.2015 9:38:14 von app-tricks -
Die Unterstützung aller aktuellen / wichtigen Browser zu WebP kann man sich hier
http://caniuse.com/#feat=webp
ansehen.
Beitrag zuletzt geändert: 20.7.2015 19:31:03 von mein-wunschname -
Hi deutscheradler,
als Format für Bilder im Web würde ich allgemein das PNG-Format verwenden, da es von eigentlich allen Browsern unterstützt wird. Zudem kannst du die Dateigröße der Bilder in diesem Format einfach mit PngOptimizer oder online mit TinyPNG stark verringern. Bei den meisten meiner Bilder konnte ich so 50% an Daten sparen. -
Hallo,
bei Photoshop gibt es die Funktion "fürs Web speichern". Da kannst Du dann auswählen in welcher Auflösung dein Bild dann gespeichert werden soll. Ich wähle immer einen mittleren Wert aus.
Gruß, Stefan -
Zum Thema Bilder-Optimierung gibt es einen unglaublich guten Kurs auf Udacity.com falls du fit in englisch bist ;) Hab selber schon einige davon durchgearbeitet und bin wirklich begeistert!
https://www.udacity.com/course/responsive-images--ud882 -
Hallöchen,
es gibt im Internet viele Analysetools, die dir Tipps geben, wie du deine Seite schneller laden lassen kannst, z.B. Google PageSpeed Insights, das zeigt dir sogar an welche Bilder inwiefern komprimiert werden können, ohne Qualitätsverlust zu bekommen! Ich hoffe ich konnte helfen.
LG,
Non Plus Ultra Studios -
Ich erstelle jeweils zusätzlich kleine Vorschaubilder (150 x 150 px) und lasse die zuerst in der Übersicht anzeigen, da die meisten User nicht alle Bilder anschauen werden lohnt sich das allemal. Die grossen Bilder werden angezeigt bei Klick auf das kleine Vorschaubild die Bilder werden aber ebenfalls zurechtgeschnitten auf 1024 x irgendetwas (bzw. anders herum bei Hochformat).
Die Vorschaubilder lasse ic automatisch generieren beim Upload auf die Webseite. Somit entsteht mir kein Mehraufwand. Die Verkleinerung macht es unnötig, an der Komprimierung etwas zu verändern.
Wenn du mehrere Bilder auf einmal verarbeiten willst, musst du dir ein Programm zulegen, dass "Stapelverarbeitungen" zulässt. So kannst du dann mehrere Bilder in die Warteschlange setzen und diese werden automatisch abgearbeitet. -
deutscheradler schrieb:
Es gibt nicht nur den Gimp, auch wenn er immer wieder empfohlen wird, es geht viel einfacher und leichter mit PhotoFiltre, das ist in zwei Versionen ebenfalls kostenlos, hier mal ein Link zu Bildformat, Exif Information, Bildgröße mit PhotoFiltre. Und dann auch gleich noch ein Tipp für alle, die ihre Fotos online (auf Webseiten/in Foren) posten wollen, JPEGmini machts möglich. Einfach, schnell, kostenlos, online. Man lädt seine Fotos hoch und bekommt sie ein paar Sekunden später wieder, um einiges leichter, ganz ohne Qualitätseinbußen.
Hey. Ich wollte meine Website mal besuchen und mir ist aufgefallen das die Bilder viel zu lange brauchen zu laden. Liegt daran weil ich jpg ohne Kompression benutze aber jetzt kommt meine frage.
Bis wie viel Prozent kann ich gehen ohne den Unterschied auf dem ersten Blick zu merke??
Danke im Voraus -
+1 für die Erwähnung von PhotoFiltre, das benutz ich auch sehr gerne (wobei ich auch gegen GIMP nichts habe, es lohnt sich immer mehrere Tools zur Auswahl zu haben).
Ich denk mal das Thema wird sich für den Thread-Ersteller inzwischen längst erledigt haben, der Thread ist ja schon was älter.
Aber ganz allgemein gesprochen ist nicht die eingesetzte Software am wichtigsten, sondern dass man sich über die Bildformate ein wenig schlau macht, das ist für einen Webmaster leider immer noch unerlässlich.
Dann erzählt man auch keinen Unfug à la "jpg ohne Kompression"...
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
