Aufgabe Nr. 15: Bilder einbinden

Damit mein Blog nicht zur Textwüste verkommt, möchte ich hin und wieder Beiträge mit ein paar Screenshots, die ich gern mit FastStone Capture, Greenshot oder Shotty erstelle, garnieren. In der Regel notiere ich Bilder in einem neuen Absatz (<p> in HTML). Da es dann gerade bei kleinen Bildern hässlich aussieht, wenn sie zentriert oder "links angeklatscht" angezeigt werden, platziere ich dafür in der Datei /style.css über der Regel div.post-content pre Folgendes:

div.post-content img {
  border: .1em solid #ccc;
  margin: .4em 1em;
  padding: .5em;
}

Damit erhalte ich einen dünnen grauen Rahmen, der einen gewissen Abstand zum eigentlichen Bild hat und zusätzlich einen nicht zu großen Leerraum außen um den Rahmen herum: Office 2013 und die administrativen Vorlagendateien (ADM/ADMX)

Bilddateien, die eine höhere Auflösung als 480x360 Pixel aufweisen, verkleinere ich mittels IrfanViews Funktion "Batch-Konvertierung" bei einer gleichzeitigen Schärfung mit dem Wert 10 entsprechend und speichere sie mit Kompressionsstufe 9 im PNG-Format ab. Anschließend lade ich sie per FTP zu meinem Webhoster in einen Ordner /uploads/JJJJ/MM/ hoch.