{"id":3288,"date":"2018-02-08T19:08:13","date_gmt":"2018-02-08T18:08:13","guid":{"rendered":"https:\/\/tatjanafilimonov.de\/?p=3288"},"modified":"2026-04-21T14:30:28","modified_gmt":"2026-04-21T12:30:28","slug":"bilder-auf-wordpress-richtig-verwenden","status":"publish","type":"post","link":"https:\/\/tatjanakruck.de\/kampagne\/bilder-auf-wordpress-richtig-verwenden\/","title":{"rendered":"Bilder in WordPress einf\u00fcgen – So machst Du es richtig"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

So gut wie jede WordPress Website nutzt Fotos oder Grafiken. Sie sind aus vielen Gr\u00fcnden ein sehr wichtiger Teil des Websitecontents. Leider werden bei der Nutzung der Bilder sehr oft gravierende Fehler gemacht. Damit dir das nicht passiert, erkl\u00e4re ich dir, wie du die Bilder generell im Web und speziell f\u00fcr WordPress richtig aufbereitest und einf\u00fcgst.<\/p>

Fotos und Grafiken sind nicht allein daf\u00fcr da, um eine Website \u201eaufzuh\u00fcbschen\u201c. Vielmehr sind sie ein wichtiger Teil deines Contentmarketings und sind wichtig f\u00fcr deine Suchmaschinenoptimierung. Beim Verwenden der Bilder solltest du daher Folgendes beachten:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Richtiges Format verwenden<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

F\u00fcr jede Art von Bildern solltest du das richtige Format verwenden. F\u00fcr das Logo ist z.B. das PNG-Format<\/strong> empfehlenswert. Es erlaubt einen transparenten Hintergrund, sodass auf der Website keine wei\u00dfen Balken um das Logo zu sehen sind. Auch f\u00fcr andere Grafiken, insbesondere, wenn sie nur eine oder zwei Farben enthalten, eignet sich das PNG-Format am besten.<\/p>

F\u00fcr Fotos wird dagegen das JPG-Format<\/strong> bevorzugt, weil er meist komprimierter ist, die Bilddateien im Vergleich also kleiner sind. Damit kommen wir auch schon zum n\u00e4chsten wichtigen Punkt in der richtigen Verwendung von Bildern, der richtigen Bildgr\u00f6\u00dfe.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Ein Logo sollte generell in einem skalierbaren Format, der es dir erlaubt das Logo ohne einen Qualit\u00e4tsverlust zu vergr\u00f6\u00dfern, vorliegen. Ein professioneller Grafikdesigner sollte also immer eine Vektorgrafik-Datei entweder als .ai oder .svg liefern.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Richtige Bildgr\u00f6\u00dfe verwenden<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

Zu gro\u00dfe Bilder<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Gro\u00dfe Bilder sind gro\u00dfe Dateien, die eine lange Ladezeit<\/strong> ben\u00f6tigen. Hast du ein paar solche Bilddateien auf deiner Website, braucht der Browser eine Ewigkeit, um sie hochzuladen. Das ist weder f\u00fcr deine Websitebesucher noch f\u00fcr deine SEO gut. Denn keiner hat Lust f\u00fcnf Minuten auf das Hochladen einer Seite zu warten, schon gar nicht auf mobilen Ger\u00e4ten. Weshalb die Ladegeschwindigkeit<\/strong> zu den wichtigsten Rankingfaktoren bei Google geh\u00f6rt und unbedingt optimiert geh\u00f6rt.<\/p>

Das Spezielle an WordPress ist, dass die hochgeladenen Bilder in vier Gr\u00f6\u00dfen, also praktisch f\u00fcr jede Ansicht, abgespeichert werden. Stelle also fest, welche maximale Gr\u00f6\u00dfe von Bildern in deinem Design ben\u00f6tigt wird. Passe dann die Einstellungen in WordPress an (unter Einstellungen –> Medien) und lade die Bilder passend in dieser Gr\u00f6\u00dfe hoch. Wenn dein Logo z.B. in einer Gr\u00f6\u00dfe von 300 x 150 px auf der Website erscheinen soll, lade bitte nicht eine Datei mit 3000 x 1500 px hoch.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Zu kleine Bilder<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Sehr kleine Bilder haben nat\u00fcrlich den Vorteil, dass sie ganz schnell geladen werden k\u00f6nnen. Wenn das Design deiner Website allerdings ein gr\u00f6\u00dferes Format ben\u00f6tigt, wird das hochgeladene Bild automatisch vergr\u00f6\u00dfert. Das kann nicht ohne Qualit\u00e4tsverluste geschehen und das Bild wird unscharf. Daher lautet erneut die Empfehlung, die passende Gr\u00f6\u00dfe hochladen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Bilder richtig benennen<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Du hast nun ein Bild in dem richtigen Dateiformat und in der passenden Gr\u00f6\u00dfe. Damit hast du schon einiges richtig gemacht. Jetzt musst du noch die Datei zum Speichern richtig benennen. Warum? Nun ja, der Name der Datei ist ein Teil ihrer URL bei WordPress. Und diese sollte auf keinen Fall so<\/p>

deinewebsite.de\/wp-content\/uploads\/bild1.jpg<\/strong><\/p>

oder so<\/p>

deinewebsite.de\/wp-content\/uploads\/bhfggbrf\u00f6.jpg<\/strong><\/p>

aussehen.<\/p>

Benenne deine Bilddatei sinnvoll. Enth\u00e4lt der Name das Keyword der Seite, so kann das Bild bei der entsprechenden Anfrage in der Bildersuche auftauchen. Diese kann f\u00fcr dich ein zus\u00e4tzlicher Traffic-Kanal sein. Vor wenigen Tagen habe ich entdeckt, dass in der Bildersuche im zweiten Schritt nach weiteren Stichworten gefiltert werden kann. \u00dcberlege also ganz genau, welchen Namen dein Bild bekommt, bevor es bei WordPress hochgeladen wird.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"-\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

Bilder f\u00fcr Web komprimieren<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Etwas weiter oben habe ich ja bereits erw\u00e4hnt, dass die Dateigr\u00f6\u00dfe wichtig ist, f\u00fcr die Ladegeschwindigkeit und damit die Suchmaschinenoptimierung der Website ist. Abgesehen von dem Abspeichern in dem richtigen Format und im richtigen Ma\u00dfstab, kannst du die Dateigr\u00f6\u00dfe noch weiter reduzieren. Und zwar, mit der Komprimierung der Bilder. Dabei wird der Inhalt der Datei sozusagen noch mehr zusammengepresst.<\/p>

Wenn du mit Photoshop arbeitest, kannst du anstatt \u201eSpeichern unter\u201c<\/em> das \u201eExportieren –> F\u00fcr Web speichern\u201c<\/em> ausw\u00e4hlen, um die Datei zu speichern. Hier kannst du mit den Einstellungen so weit experimentieren bist du die maximale Komprimierung bei minimalem Qualit\u00e4tsverslust erreicht hast.<\/p>

Es gibt aber auch einige Onlinetools, die du zur Komprimierung der Bilder kostenlos nutzen kannst. Bei compressjpeg.com<\/a> bzw. compresspng.com<\/a> kannst du entweder JPEG- oder PNG-Dateien komprimieren. Das Tool tinypng.com<\/a> kann ebenfalls beide Formate.<\/p>

Bei WordPress gibt es Plugins wie z.B. WP Smush<\/a>, die Bilder beim Hochladen sofort automatisch komprimieren. Es erspart dir schon einiges an Arbeit, vor allem weil bei WP Smush auch bereits vor der Plugininstallation hochgeladene Bilder nachtr\u00e4glich komprimiert werden.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Alt-Tags verwenden<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

So. Nun sind wir bei dem letzten, aber einem sehr wichtigen Schritt angekommen. Du hast das Bild hochgeladen, Dateigr\u00f6\u00dfe und URL sollten bereits optimiert sein. In WordPress direkt kannst du jetzt das Bild noch weiter f\u00fcr die Suchmaschinen optimieren.<\/p>

Klicke daf\u00fcr auf das Bild. Es \u00f6ffnet sich ein Fenster, in dem du zum einen den Titel (wird angezeigt, sobald der Mauszeiger \u00fcber das Bild kommt), die Beschriftung (wird unter dem Bild angezeigt) und zum anderen den Alternativtext anpassen kannst.<\/p>

Der Alternativtext (auch Alt-Tag) wird angezeigt, wenn das Bild im Browser nicht dargestellt werden kann oder nachgeladen wird. Benutzt du den Alt-Tag nicht, sieht der Websitebesucher nur den wei\u00dfen Hintergrund.<\/p>

Zudem werden die Alt-Tags von den Suchmaschinen zur Interpretation der Bilder genutzt. Sie erleichtern den Suchmaschinen also das \u201eLesen\u201c der Bilder.<\/p>

Ebenfalls solltest du wissen, dass die Alt-Tags den sehbehinderten Menschen von den Screenreadern vorgelesen werden. Sie sind also ein wichtiger Faktor in Bezug auf die Barrierefreiheit deiner Website und werden von Google positiv bewertet.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Bilder\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

Fazit<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Puh\u2026 Wie du siehst, es gibt einiges, was man beim Benutzen der Bilder auf Websites falsch machen kann. Wenn du aber diesen Artikel bis hier durchgelesen hast, wirst du die Fehler nicht (mehr) machen und ab jetzt auch auf WordPress Bilder richtig einf\u00fcgen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

So gut wie jede WordPress Website nutzt Fotos oder Grafiken. Sie sind aus vielen Gr\u00fcnden ein sehr wichtiger Teil des Websitecontents. Leider werden bei der Nutzung der Bilder sehr oft gravierende Fehler gemacht. Damit dir das nicht passiert, erkl\u00e4re ich dir, wie du die Bilder generell im Web und speziell f\u00fcr WordPress richtig aufbereitest und […]<\/p>\n","protected":false},"author":1,"featured_media":3299,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3288","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-anfaenger"],"_links":{"self":[{"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/posts\/3288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/comments?post=3288"}],"version-history":[{"count":0,"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/posts\/3288\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/media\/3299"}],"wp:attachment":[{"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/media?parent=3288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/categories?post=3288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tatjanakruck.de\/kampagne\/wp-json\/wp\/v2\/tags?post=3288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}