Tipps für Bilder

Es gibt ver­schie­de­ne Grün­de, war­um man auch Bil­der mit Sorg­falt vor­be­rei­ten soll­te, z.B. kann man durch gute Bil­der bes­se­re Auf­find­bar­keit in Such­ma­schi­nen erzeu­gen oder Men­schen mit Bein­träch­ti­gung beim Besuch der Sei­te unter­stüt­zen. Der fol­gen­de Arti­kel gibt ein paar ein­fa­che Hinweise.

JPEG statt PNG bei Fotos

Bei Bil­dern mit vie­len Details, insb. Fotos, soll­te man das JPEG-For­mat ver­wen­den, da die­ses bes­se­re Algo­rith­men zur Abspei­che­rung sol­cher Bil­der ver­wen­det. Dar­aus resul­tiert dann meist eine klei­ne­re Datei­grö­ße, bei glei­cher Qua­li­tät. Das wirkt sicher wie­der­um posi­tiv auf die Lade­zeit im Brow­ser beim Nut­zer aus. Zusätz­lich emp­fiehlt es sich bei JPEG-Bil­der die Qua­li­tät auf einen Wert zwi­schen 80% und 90% zu stel­len. Das hat eine wei­te­re Reduk­ti­on der Grö­ße zur Fol­ge. Der Nut­zer merkt den Qua­li­täts­un­ter­schied in der Regel nicht.

Im fol­gen­den Bei­spiel ist das glei­che Bild in 3 ver­schie­de­nen Abspei­che­run­gen dar­ge­stellt. Sub­jek­tiv merkt man kaum einen qua­li­ta­ti­ven Unterschied:

 

 

 

Vie­len Dank an Ste­fa­nie Ker­ner für die Bilder.

“Vollständige Größe” vermeiden

Fügt man Bil­der ein­fach so ein, dann endet man oft mit der voll­stän­di­gen Grö­ße. In vie­len Fäl­len ist die­se nicht opti­mal, da viel zu groß. Gene­rell soll­te man aus den ver­füg­ba­ren Grö­ßen die wäh­len, wel­che für den aktu­el­len Bei­trag am geeig­nets­ten ist.

Dank src­set und sizes, wel­che mitt­ler­wei­le von WordPress nativ unter­stützt wer­den, dürf­te die­ses Pro­blem aller­dings nicht mehr die­se gro­ße Rol­le spielen.

Der Dateiname

Ein gut gewähl­ter Name hilft. Oft­mals hei­ßen die Bil­der so, wie die Kame­ra sie benennt, z.B. IMG123456.jpg.

Ein Mus­ter könn­te fol­gen­des sein:

Adresse_der_Seite-_Was_ist_zu_sehen.jpg

Ein Name dann z.B.

schwedenhaus-experten.de_-_Einfamilienhaus_-_Kronan-110.jpg

Keine Umlaute und Sonderzeichen im Dateinamen

Man mag es nicht glau­ben, aber es ist auch heut­zu­ta­ge noch sinn­voll auf Umlau­te oder ande­re “beson­de­re” Son­der­zei­chen im Datei­na­men zu ver­zich­ten. Spä­tes­tens bei einem Ser­ver­um­zug merkt man es.
Am Bes­ten nur fol­gen­de Zei­chen nut­zen: Buch­sta­ben von A‑Z, Zah­len, Unter­strich und Bindestrich.

Meta-Informationen

In WordPress ist es mög­lich eini­ge Infor­ma­tio­nen zum Bild, wie einen Titel, alter­na­ti­ven Text und Beschrei­bung ein­zu­fü­gen. Die­se soll­ten nach Mög­lich­keit immer aus­ge­füllt werden.

Beson­ders wich­tig ist es einen aus­sa­ge­kräf­ti­gen Titel zu ver­ge­ben, wel­cher kurz sagt, was auf dem Bild zu sehen ist, z.B. “Dop­pe­haus­hälf­te im Grü­nen”. Für Men­schen mit Beein­träch­ti­gung soll­te in jedem Fall auch der “Alter­na­ti­ve Text” ange­ge­ben wer­den, da die­ser von Screen­rea­dern Alter­na­ti­ve zum visu­el­len Bild ver­wen­det wer­den. Der Text könn­te z.B. “Rote Dop­pel­haus­hälf­te von Vor­ne im Grünen”.

Meta-Informationen nachträglich bearbeiten

Die Infor­ma­tio­nen zu Bil­dern las­sen sich nach­träg­lich unter “Medi­en” -> “Medi­en­über­sicht” bearbeiten.

Plugin-Empfehlungen

Es gibt natür­lich ein paar Plug­ins, die dabei hel­fen ver­schie­de­ne Regeln einzuhalten.

EWWW Image Optimizer

Der EWWW Image Opti­mi­zer unter­stützt dabei Bil­der auto­ma­tisch neu zu kom­pri­mie­ren und sie somit noch­mal etwas zu verkleinern.

Imsanity (obsolete)

Hin­weis: Die Funk­tio­na­li­tät, wird nun auch vom EWWW Image Opti­mi­zer unter­stützt, somit ist Imsa­ni­ty nicht mehr notwendig.

Imsa­ni­ty ist ein wei­te­res sehr nütz­li­ches Plug­in. Vie­le Autoren laden Bil­der ein­fach so hoch, wie sie sind, meist in viel zu hoher Auf­lö­sung und viel zu groß. Imsa­ni­ty hilft dabei, in dem es hoch­ge­la­de­ne Bil­der auto­ma­tisch auf eine maxi­ma­le Höhe bzw. Brei­te redu­ziert. Damit kann man enorm viel Spei­cher­platz spa­ren und sorgt gleich­zei­tig dafür nicht die schön hoch­auf­ge­lös­ten Fotos zu verteilen.