Bildhafte Werkeleien

Farbspielereien

Eigentlich müsste ich mich ja mit wesentlich wichtigeren Dingen befassen. Zum Beispiel ist noch eine mobile Anpassung der eingebauten Topkommentatoren-Seite erforderlich. Außerdem bringt das Theme “Seashell” leider die Anzeige von Untertiteln und Breadcrumbs nicht mit. Ihr seht, meine To-Do-Liste ist immer noch nicht abgearbeitet und es wird wohl auch noch ein Weilchen dauern.
Jetzt kann man natürlich darüber streiten, welche Prioritäten gesetzt werden müssten. Mich störte auf den ersten Blick die winzige Darstellung der Beitragsbilder in meinem neuen Template schon sehr.

Jetzt kann man natürlich darüber streiten, welche Prioritäten gesetzt werden müssten. Mich störte auf den ersten Blick die winzige Darstellung der Beitragsbilder in meinem neuen Template schon sehr.
Wenn es sich lediglich um Eyecatcher und nicht um Screenshots oder Fotos handelt, hatte ich sie im “Smoky” passgenau verkleinert und optimiert. Dadurch besteht derzeit ein eklatanter Unterschied von ehemals 200 px zur jetzigen 704 px Bildbreite.
Also befand ich, dass zuerst daran Hand angelegt werden müsse. Zum Glück bin ich nicht nur ein Bildbearbeitungs-, sondern auch ein Sicherungs-Freak. Daher habe ich nicht nur sämtliche Beiträge dieses Blogs als Word-Dokumente gespeichert, sondern auch zu jedem Beitrag einen Ordner mit dem dazugehörigen Bildmaterial angelegt. … naja, zu fast allen. :-) Darin sind die jeweiligen Beitragsgrafiken in “Rohform”, (zwischen-)bearbeitet und optimiert  enthalten.

Handlungsbedarf nach Dringlichkeit

Ich verschaffte mir einen Überblick und beschloss, dass ich Screenshots und Fotos mit einer Breite von 600 Pixeln erst einmal vernachlässige und mich den Extremfällen widme.

Am einfachsten kann ich die Bilder bearbeiten, die ich von der Grafik-DVD in Originalgröße in die jeweiligen Ordner exportiert und lediglich verkleinert hatte.

Dann sind Grafiken enthalten, für die ich zwar Bilder von den DVDs verwendet, sie aber noch durch Hintergründe oder Zusatzgrafiken, Licht-, Schatten- und Verzerreffekte ergänzt hatte.
Glücklicherweise habe ich einen Großteil davon mit einer Mindestbreite von 800 px erstellt und anschließend verkleinert.

Mal mehr, mal weniger aufwändig

Bei einigen Bildern reichte es aus, lediglich das Basisbild zu vergrößern und die darin platzierten Objekte im Arbeitsbereich auszurichten. Hatte ich eigentlich schon erwähnt, dass PhotoImpact X3 ein tolles Bildbearbeitungsprogramm ist? ;-)
Ich weiß diese Software momentan wieder zu schätzen und bin total glücklich, dass es unter Windows 8 immer noch problemlos läuft.

Warum ich aber ausgerechnet meine Standardgrafiken wie “Meine Tipps”, “Doku” und “Softwaretipp” nur mit einer Breite von 400 px erstellt hatte … ? Ich könnte mir nachträglich in den Allerwertesten beißen, weil ich diese nun komplett neu erstellen musste, damit sie bei einer Breite von 704 px nicht derart verrauscht bzw. verpixelt wirken.

Die neuen Bilder lade ich mit der Software FileZilla per ftp* in denselben, monatsweise angelegten Ordner hoch und vergebe genau den gleichen Dateinamen mit identischem Format des ursprünglichen Bildes.

Link in der Mediathek des Plugins Regenerate ThumbnailsDamit das Bild in der richtigen Größe als Artikelbild dargestellt wird, verwende ich derzeit das schlichte Plugin Regenerate Thumbnails. Dieses Plugin fügt einen Link in die Mediathek direkt neben der Thumbnail-Ansicht ein. Ein Klick darauf wandelt es fix um.

Warum gif?!

Ich weiß nicht, welcher Teufel mich damals geritten hat, dass ich für viele Bilder das gif-Format verwendet habe. Eigentlich sind ihm Bildformate wie jpg und png** in meinem Blog vorzuziehen.

Wahrscheinlich nahm ich an, dass es bei einfachen Grafiken mit wenig Bildpunkten ausreiche, gif zu verwenden.
Nur erfüllt png den gleichen Zweck bei der Transparenz, bietet aber eine bessere Bildqualität. Und dank Riot und dem Plugin PNGout Xtreme erziele ich tolle Komprimierungsergebnisse.
Selbst bei Fotos, für die jpg angemessener ist, hatte ich hin und wieder gif eingesetzt. Das versteh’ mal einer.

Wenn ich also schon einmal dabei bin, das Bildmaterial dieses Blogs zu überarbeiten, dann richtig! Und so konvertiere ich die entsprechenden Bilder direkt in das jeweils günstigere Bildformat, vergebe teilweise andere Dateinamen und manche Bilder ersetze ich auch, weil sie mir gar nicht mehr gefallen.

Upload Bilddateien mit dem Plugin Add from ServerNormalerweise erscheinen diese Bilder nicht automatisch in der Mediathek. Aber auch für diesen Zweck existiert ein hervorragendes Plugin names Add from Server.
Mit ihm steuere ich in dessen Einstellungen das entsprechende Upload-Verzeichnis an, wähle das Bild mit dem neuen Dateinamen aus und importiere es.
Es reicht übrigens, nur das Bild in Originalgröße hochzuladen, die entsprechenden Thumbnailgrößen werden automatisch angelegt.

Anschließend muss ich den entsprechenden Artikel editieren und das Beitragsbild neu vergeben.

Bildbearbeitung macht mir unheimlich viel Spaß, daher sind diese “Renovierungsarbeiten” am Feierabend für mich ein schöner Zeitvertreib. Womöglich schlagen andere Webmaster die Hände über den Kopf zusammen und denken “Kümmere Dich doch erst einmal um den Technikkram!”
Mache ich ja … irgendwann. :-)


 

*   Lesenswerter Beitrag zum Thema ftp: Was ist ftp?
** Lesenswerter Beitrag zum Thema Bildformate: Grafiken und Fotos – Bildformate für Webseiten

Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".

14 Kommentare

  • Das Problem hatte ich auch mit meinen Artikelbildern, die passten nach der Umstellung auf das neue Theme hinten und vorne nicht. Da arbeite ich immer noch dran und tausche diese nach und nach aus.

    Übrigens, danke fürs Verlinken ;-)

    LG Thomas

  • Da hast Du Dir aber ganz schön was an Arbeit aufgehalst :-)
    Aber der Zeitvertreib sei Dir gegönnt :-)

    PhotoImpact X3 ist hoffentlich ein guter Tipp .
    Den habe ich mir nun auf die Todo gelegt da ich auch noch auf der Suche nach einem Programm bin das auch ich einfach bedienen kann.
    Ich hoffe das ist so ein Programm. Da muss ich mich vorweg nochmal schlau machen

    So viel Aufwand würde ich nicht bei meine Bildern betreiben.Ich skaliere die Fotos jetzt gleich in WordPress meist auf 550 px Breite und so passen sie schön in die 600px breite Content Spalte.
    Das reicht mir aus.
    Ich habe noch eine lokalen Ordner “Webseitenbilder” da sind die originale mit entsprechenden Dateinamen abgelegt. Wenn ich da mal was mit z.B Bäumen suche , suche ich den Ordner nach dem Begriff Baum und dann werden mir alle Bäume angezeigt.

    Grüße und einen schönen Tag
    Lothar

  • Hej Thomas,

    danke fürs Verlinken

    Dein Beitrag passte eben mal wieder wie Faust auf Auge und ist eine tolle Hilfeanleitung. :-)

    Hallo Lothar,

    PhotoImpact X3 habe ich vor Jahren geschenkt bekommen. Ich meine, dass es mittlerweile als kostenlosen Download angeboten wird. Aber ich weiß leider nicht mehr, wo das war, sorry.

    Mit dieser Software ist Bildbearbeitung supereinfach und fast selbererklärend. Ich bin kein Fan von Ebenenbearbeitung à la “Gimp” und bin nie richtig warm damit geworden.

    Man kann beispielsweise eine transparente gif- oder png-Grafik kopieren und als Objekt auf den gewünschten Hintergrund oder in ein anderes Bild einfügen. Außerdem stellt PI eine sehr umfangreiche Effektesammlung zur Verfügung.

    Wenn ich da mal was mit z.B Bäumen suche , suche ich den Ordner nach dem Begriff Baum und dann werden mir alle Bäume angezeigt

    So entwickelt eben jeder seine eigene Ordnungstechnik – hauptsache, man findet die Dateien einfach wieder.

    Lieben Gruß
    Sylvi

  • Hallo Sylvi,

    wie versprochen (jetztl klappt es ja) … noch einmal von vorn, allerdings in der Kurzversion.
    Das Bildformat .gif ist nicht so verkehrt wie Du glaubst. Allerdings muss es richtig verwendet werden.
    Das Format .png erfüllt nicht den „gleichen Zweck“ wie das .gif … Das Format .png (24), erfüllt qualitativ die gleichen Anforderungen wie das .jpg und damit die Darstellung von ca. 16.7 Millionen Farbwerten. Zusätzlich bietet das .png die Möglichkeit transparenz darzustellen.

    Zusammenfassung:
    1. Fotoqualität = .jpg
    2. Fotoqualität + transparenz = .png (24)
    3. Strichzeichnungen oder flächige Bilder = .gif oder .png (8)

    Möchtest Du Deinen Blog ohne Barrieren gestalten, bist Du gezwungen, die Formate .gif und .jpg zu verwenden. Da Dein Blog aber „nur“ ein flexibles Design hat, sind Punkt 1 und 3 die beste Lösung und in Deinem Blog vorzuziehen.

    mfG

    Ingo

    • Hallo Ingo,

      vielen Dank, dass Du noch einmal einen Kommentarversuch zu diesem Thema gestartet hast und für Deine umfangreiche Ausführung. Ich denke, da bin ich auf einem guten Weg. :-)

      Gruß Sylvi

  • Hallo Sylvi,

    dass Du auf einem guten Weg bist, kann ich live verfolgen.
    Ich glaube gelesen zu haben, dass die Dateigröße, beim Erstellen der Avatare, ein Problem war und Du deshalb .gif verwenden musstest.
    Wenn Du die Möglichkeit hast, mit Deinen Programmen ein .png (8) abzuspeichern ist die Dateigröße wesentlich geringer. Wie beim .gif werden dann nur 256 Farben gespeichert.

    mfG Ingo

    • Hej Ingo,

      ah … jetzt musste ich kurz in mich gehen … Du meinst die Avatare für die “Weblin”-Seite, wo die Dateigröße begrenzt war. Man, da hast Du ja in alten Beiträgen gestöbert. ;-)
      Stimmt, das Verringern der Farbtiefe ist natürlich eine Möglichkeit, die Dateigröße zu minimieren. Ich weiß jetzt gar nicht mehr genau, ob das bei den statischen Grafiken erforderlich war. Bei den animierten musste ich sie teilweise reduzieren – je nachdem, wie aufwändig die Animation war. Das klappte mit Jasc Animation Shop recht gut, aber man musste schon aufpassen, dass die Darstellung nicht darunter leidet.
      Animierte Grafiken sind meines Wissen ja eh nur in dem Format .gif möglich.

      Gruß Sylvi

  • Hallo Sylvi,
    es gibt noch andere Möglichkeiten um Grafiken zu animieren. Beispielsweise Flash und soweit ich weiß, ist auch SVG eine Möglichkeit.

    Nachtrag/Berichtigung: … Das Dateiformat .png (24) ermöglicht nicht einfach nur Fotoqualität + transparente Stellen darzustellen sondern kann auch Teil-Transparenz darstellen.

    mfG Ingo

    • Hej ingo,

      stimmt, Flash setze ich auch – insbesondere auf meiner Rebusseite – ein. Wird aber heutzutage nicht mehr so häufig verwendet, wenn ich mich nicht täusche. Erstaunlich finde ich den derzeitigen gif-Hype, insbesondere in den Social Media-Kanälen wie Google+. Oder auch bei Thumber sehe ich sie in letzter Zeit sehr häufig.

      Gruß Sylvi

  • Hi Sylvi,

    Flash wird wohl immer eine Nische haben, auch wenn Adobe versucht davon wegzukommen. Die „Zeit“ wird zeigen ob bestimmte mobile Geräte nachrüsten müssen. In meinen Augen ist der „Hype“ um .gif offensichtlich.
    Gif ist, ebenso wie .jpg, barrierefrei und wird, ohne JavaScripts, von jedem Browser angezeigt. Die geringere Dateigröße sowie der Verzicht auf das zusätzliche Script, sorgen zudem dafür, dass die Webseite schneller geladen wird. Den Unterschied konntest Du bei den beiden Links zum „Avatar“ deutlich erkennen.

    Eine grobe Zusammenfassung worauf Du achten solltest wie Deine Seite ein Quäntchen schneller werden kann, findest Du hier: http://www.pahl-4u.de/glossar/p/pagespeed.html

    Gruß Ingo

    • Hej ingo,

      na klar, ich bin für sowas immer offen und meine, mich an den Beitrag auch noch zu erinnern. Ich speichere ihn mir glatt mal in Pocket ab.

      Gruß Sylvi

  • Hallo Sylvi,

    das hab ich schon bemerkt … und mit der neuen Kamera im Gepäck wird Deine Experimentierfreude in diesem Bereich sicherlich noch etwas warten müssen.

    Gruß Ingo