Wenn ich mit Kunden an WordPress-Themes arbeite, kommt früher oder später die Frage, in welchen Größen denn die Bilder angeliefert werden sollen. Die Bilder erscheinen im Design in unterschiedlichen Größen und die Kunden möchten wissen, welche das denn sind.
Die Antwort ist simpel: Ich brauche die Bilder nur in einer – der maximalen – Größe. Den Rest macht WordPress ganz alleine.
Die Größe, die ich brauche, orientiert sich an der maximalen Breite des Designs. Die bestimmt, wie groß ein Bild maximal im Theme werden kann. In der Regel ist das irgendwas zwischen 1200 und 1440 Pixeln (Breite).
Das heißt, wenn alle Bilder in 1440px Breite angeliefert werden, sind wir auf der sicheren Seite.
Automatisch errechnete Bildgrößen
WordPress erzeugt aus jedem Bild, das in die Mediathek hochgeladen wird, automatisch drei Varianten in drei Größen. Eine große Version (large) eine mittelgroße Version (medium) und eine kleine Version (thumbnail).
Wenn man einen Artikel schreibt und ein Bild platziert, kann man beim Einfügen auswählen, welche Größe man haben möchte.
In den Template-Dateien kann man die Bildgrößen über die Angaben in der Klammer hinter the_post_thumbnail(); bestimmen. Im Beispiel unten wird das Bild in mittlerer Größe ausgegeben.
<?php the_post_thumbnail( 'medium' ); ?>
Wie groß diese drei Versionen sind, ist von Theme zu Theme verschieden. Die Maße stellt man im Dashboard unter Einstellungen/Medien ein.
Achtung: Wenn Ihr die Größenangaben hier ändert, werden nur die Bilder, die in Zukunft hochgeladen werden, auf die neuen Größen berechnet. Das ist natürlich unpraktisch, schließlich sollen alle Bilder dieselben Maße haben. Hier ist das Plugin Regenerate Thumbnails Euer Freund. Damit werden sämtliche Bildgrößen – auch die älterer Bilder – neu berechnet.
Zusätzliche Bildgrößen angeben
Falls Euch drei Größen-Varianten zu wenig sind, könnt Ihr weitere Bildformate angeben. Die Größen definiert Ihr in der functions.php.
// additional image sizes add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height) }
Quelle: Codex
Bilder richtig komprimieren
Bilddateien enthalten viel Information, deshalb sind Bilder in der Regel recht groß. Ein Foto kann schnell mal mehrere Megabyte auf die Waage bringen. Bilddateien sind daher meistens die Schuldigen, wenn eine Seite zu lange Ladezeiten hat. Deshalb sollte man jedes Bild fürs Web vor dem Hochladen komprimieren.
Dafür gibt es sehr gute Tools im Web. Für png-Dateien ist das tinypng.com, für JPEG-Dateien ist jpegemini.com. Man kann Bilddateien aber auch über Plugins während des Hochladens komprimieren, z.B. mit den Plugins Compress JPEG & PNG images und Optimus.
Illustration: ©Kirsten Schelper
Kommentare
•
Hallo Kirsten,
danke, die Infos sind kurz und knapp auf den Punkt gebracht.
Gruss
Martin
•
Super das du das Thema aufgreifst. Ich bin immer auf der Suche wie ich meine Blogs noch besser optimieren kann. Besonders bei den Fotos fragte ich mich wie ich das einstellen kann, denn oft werden die Fotos so dargestellt wie ich sie eigentlich gar nicht haben will.
LG
Petra
•
Gute Tipps! Freue mich schon auf den nächsten Teil, welche Eigenschaften Bilder für Retina-Displays haben müssen. Da kenne ich mich überhaupt nicht aus.
Was mich noch in diesem Zusammenhang interessieren würde ist, wann man sich für .jpg und wann für .png entscheidet? Setzt man beides unterschiedlich ein oder sollte man ein Format bevorzugen?
•
Hallo
die maximale Bildgrösse ist ja auch in den Einstellungen (Einstellungen/Medien/) einstellbar.
Was passiert denn wenn ich als maximale Bildbreite sagen wir Full HD (also 1920 pixel) einstelle, das fragliche Bild hat aber nur zBsp. 1400px in der Breite?
Und was müsste ich eintragen (9999 oder leer lassen) wenn ich möchte das jedes Bild in der Grösse angezeigt wird die ich ihm vor dem Hochladen gegeben habe?
Gruss axel
•
Hallo, Axel,
die Originalgröße bleibt immer erhalten, sie wird als Option beim Bild einfügen auch mit angeboten.
Die Bilder werden immer nur runtergerechnet, nicht vergrößert. Das heisst, wenn Du ein Bild hochlädst, das nur 100px breit ist und Deine mittlere Bildgröße ist 200px, dann bleibt das Bild unverändert. Es wird nicht auf 200px aufgeblasen.
Schöne Grüße von Kirsten
•
Hi Kirsten,
leider werden bei mir die Bilder immer kleiner dargestellt.
Unter „Einstellungen > Medien > groß“ steht bei mir 1024 x 1024. Beim Einfügen der Bilder habe ich volle Auflösung gewählt. Nach dem Speichern oder Veröffentlichen werden die Bilder verkleinert.
Woran könnte das liegen? Das Theme ist: Fortunata
Danke!
Gruß André
•
Hallo, André,
man kann in einem Theme beliebig viele Bildformate in der functions.php definieren. Die erscheinen dann nicht notwendigerweise im Backend.
Ich vermute, das ist bei Deinem Theme der Fall.
Schöne Grüße von Kirsten