{"id":4441,"date":"2023-01-20T11:50:00","date_gmt":"2023-01-20T09:50:00","guid":{"rendered":"https:\/\/www.esterdigital.de\/blog\/ester-digital-2022-recap-copy"},"modified":"2023-07-02T23:08:18","modified_gmt":"2023-07-02T21:08:18","slug":"bilder-fuer-web-optimieren","status":"publish","type":"post","link":"https:\/\/www.esterdigital.de\/blog\/bilder-fuer-web-optimieren","title":{"rendered":"Bilder f\u00fcr Web optimieren: Bildformaten, Tools und Plugins"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4441\" class=\"elementor elementor-4441\" data-elementor-settings=\"[]\">\n\t\t\t\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-60ffea5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"60ffea5\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b1c7c69\" data-id=\"b1c7c69\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-888fccb elementor-widget elementor-widget-text-editor\" data-id=\"888fccb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.5.4 - 23-01-2022 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#818a91;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#818a91;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p><!-- wp:paragraph --><\/p>\n<p><span style=\"font-weight: 400;\">Was ist das \u00c4rgerlichste am Surfen auf einer Webressource, sei es eine Corporate Website, eine <a href=\"https:\/\/www.esterdigital.de\/blog\/was-ist-eine-microsite-landingpage\">Microsite oder eine Landingpage<\/a>?<\/span>\u00a0H\u00e4ssliches Website-Design, unstrukturierte Informationen oder un\u00e4sthetische Schriften? Zweifellos gibt es jedoch einen Punkt, aufgrund dessen wir m\u00f6glicherweise nicht einmal dazu kommen, das Design der Website oder die Informationen zu bewerten, die wir so dringend ben\u00f6tigen. Was ist das? Und das ist die Ladezeit der Website. Ist es Ihnen schon einmal passiert, dass Sie die Website schlie\u00dfen, ohne darauf zu warten, dass die Seite vollst\u00e4ndig geladen ist, da das Laden der Website ewig dauert? Nat\u00fcrlich!<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p>Dar\u00fcber hinaus achtet Google sehr auf die Ladegeschwindigkeit der Seite und rankt Ihre Seite auch abh\u00e4ngig davon. Deshalb werden wir heute in unserem Artikel \u00fcber einen der Punkte sprechen, der Ihrer Website helfen wird, noch schneller zu werden und nicht wie Flash das Faultier zu funktionieren. Bilder optimieren \u2013 das brauchen Sie! Nun, fangen wir an!<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p><em>Ester Digital entwickelt <a href=\"\/leistungen\/cms-entwicklung\">Websites mit CMS<\/a> wie TYPO3, WordPress, Laravel und anderen. Wir freuen uns auf Ihre <a href=\"\/kontakte\">Kontaktaufnahme<\/a>!<\/em><\/p>\n<p><!-- \/wp:paragraph --><!-- wp:heading --><\/p>\n<h2>Bildoptimierung \u2013 Was ist das?<\/h2>\n<p><!-- \/wp:heading --><!-- wp:paragraph --><\/p>\n<p>Bilder f\u00fcr Web und Performance optimieren bedeutet, sie auf irgendeine Weise zu modifizieren, um ihre Gr\u00f6\u00dfe zu reduzieren, ohne die Qualit\u00e4t zu beeintr\u00e4chtigen.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p>Warum ist es so wichtig, Bilder zu optimieren? Wenn Sie einem Link zu einer Website folgen, l\u00e4dt der Server alle Dateien der Website herunter, um sie auf Ihrem Bildschirm anzuzeigen. Manchmal k\u00f6nnen Bilder eine sehr gro\u00dfe Datenmenge enthalten, die heruntergeladen werden muss. Da eine gro\u00dfe Menge an geladenen Daten eine Website verlangsamt, ist die Optimierung von Bildern f\u00fcr das Web eines der ersten Dinge, die wir tun, wenn wir an der Verbesserung der Website-Geschwindigkeit arbeiten. Je kleiner die Bilddateigr\u00f6\u00dfe ist, desto schneller l\u00e4dt die Website.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p>Zur Bildoptimierung setzen wir Datenkompression ein, d. h. wir reduzieren die Datenmenge im Bild, was sowohl mit Verlust als auch ohne Qualit\u00e4tsverlust m\u00f6glich ist. Worin besteht der Unterschied?<br \/>Bei der <strong>verlustbehafteten<\/strong> Komprimierung wird das Bild vergr\u00f6\u00dfert und einige Daten werden teilweise entfernt. So funktioniert beispielsweise JPG. Dieses Format klebt gleichsam Pixel \u00e4hnlicher Farbe zusammen, um auf diese Weise die Dateigr\u00f6\u00dfe zu reduzieren. Aber Sie m\u00f6chten nicht, dass Ihre Site-Bilder unscharf aussehen, insbesondere in Zeiten von hochaufl\u00f6senden Bildschirmen.<br \/>Die <strong>verlustfreie<\/strong> Komprimierung reduziert die Dateigr\u00f6\u00dfe, ohne die Bildqualit\u00e4t zu beeintr\u00e4chtigen. Es gehen bei dieser Methode keine Daten verloren. PNG ist ein gutes Beispiel f\u00fcr verlustfreie Komprimierung.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p>Allerdings wird PNG f\u00fcr unsere Zwecke nicht immer geeignet sein, da die zweite Art der Komprimierung die Datei viel gr\u00f6\u00dfer als n\u00f6tig machen kann. Daher ist es sehr wichtig zu wissen, welches Bildformat zu verwenden ist.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:heading --><\/p>\n<h2>Die Haupttypen von Bildformaten<\/h2>\n<p><!-- \/wp:heading --><!-- wp:paragraph --><\/p>\n<p>Lassen Sie uns nun die Arten von Bildformaten verstehen, die uns beim Erreichen unserer gew\u00fcnschten Ziele helfen k\u00f6nnen.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p><strong>JPEG.<\/strong> Dieser Dateityp ist ideal f\u00fcr kamerabasierte Bilder, da er eine gro\u00dfe Menge an Farben einf\u00e4ngt, w\u00e4hrend die Dateigr\u00f6\u00dfe relativ klein bleibt. Nur wegen der verlustbehafteten Komprimierung, weil dieser Dateityp einige Informationen entfernt, indem Farben kombiniert werden, die nahe beieinander liegen, wodurch eine akzeptable Qualit\u00e4t f\u00fcr das Internet entsteht. Sie sollten jedoch nicht vergessen, dass Sie es mit der Komprimierung \u00fcbertreiben k\u00f6nnen und eine sehr kleine Dateigr\u00f6\u00dfe erhalten, w\u00e4hrend Sie die Bildsch\u00e4rfe verlieren.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p><strong>PNG.<\/strong> Das PNG-Format eignet sich f\u00fcr Bilder mit wenigen Farben (z. B. Logos und Icons). Dieses Format ist nur f\u00fcr Internetzwecke gedacht, aber zum Ausdrucken ist dieses Format nicht geeignet, da beim Drucken eine Verpixelung sichtbar wird, es sei denn, die Bilder werden gr\u00f6\u00dfer gespeichert, aber kleiner gedruckt. PNGs werden auch verwendet, wenn Sie ein Bild mit transparentem Hintergrund ben\u00f6tigen.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p><strong>SVG.<\/strong> Dies ist ein Vektorformat \u2013 das hei\u00dft, beim Erstellen eines Bildes wurden keine Pixel verwendet, sondern mathematischer Code. Vektordateien wurden schon immer f\u00fcr alle Druckarten verwendet, da ein Vektorbild seine Qualit\u00e4t unabh\u00e4ngig von der Gr\u00f6\u00dfe beh\u00e4lt. Die meisten anderen Dateitypen, die im Internet verwendet werden, sind Pixel-(Bitmap-)Formate. Wenn Sie beispielsweise eine PNG-Datei auf Ihre Website hochladen und die Abmessungen gr\u00f6\u00dfer einstellen, als die Datei tats\u00e4chlich ist, verliert das PNG einen Teil seiner Lesbarkeit. Mit SVG-Bildern k\u00f6nnen Sie Bilder jeder Gr\u00f6\u00dfe erstellen, ohne an Klarheit zu verlieren.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p><strong>WEBP.<\/strong> Google hat dieses Format speziell f\u00fcr eine bequeme Optimierung entwickelt und kombiniert die besten Eigenschaften von JPEG und PNG. Es bietet ein geringes Datengewicht, hervorragende Bildklarheit und Transparenzunterst\u00fctzung. Dieses Format wird jedoch nicht vom Safari-Browser unterst\u00fctzt, sondern nur von Chrome, Edge und Firefox.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:heading --><\/p>\n<h2>Tools, um Bilder zu optimieren<\/h2>\n<p><!-- \/wp:heading --><!-- wp:paragraph --><\/p>\n<p>Es gibt eine gro\u00dfe Anzahl von Tools, mit denen Sie Bilder f\u00fcr Website komprimieren k\u00f6nnen, ohne zu viel Qualit\u00e4t und Klarheit zu verlieren. Hier sind einige:<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p><strong>TinyPng<\/strong> ist eine gro\u00dfartige Option, um sowohl PNG-Dateien, einschlie\u00dflich solcher mit Transparenz, als auch JPG-Dateien ohne Qualit\u00e4tsverlust zu komprimieren. Sehr praktisch beim Posten von Bildern f\u00fcr einen Blog oder eine andere Website, auf der Sie Bilder verwenden m\u00fcssen. Sie m\u00fcssen nur auf die Serviceseite gehen, dort Bilder hochladen, ein paar Sekunden warten und voil\u00e0, Sie erhalten ein optimiertes Bild. TinyPNG ist auch als Plugin f\u00fcr Photoshop verf\u00fcgbar, und es gibt sowohl eine begrenzte kostenlose Version als auch ein kostenpflichtiges Abonnement.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p><strong>ImageMagick<\/strong> ist ein ziemlich praktisches Tool zum schnellen Anpassen von Einstellungen \u00fcber die Befehlszeile. ImageMagick kann auf allen g\u00e4ngigen Betriebssystemen installiert und zur Optimierung von JPEG-Bildern verwendet werden. Au\u00dferdem ist der Service gro\u00dfartig, da Sie die gew\u00fcnschte Bildqualit\u00e4t f\u00fcr die Optimierung einstellen k\u00f6nnen.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p><strong>Compressnow <\/strong>hilft Ihnen beim Komprimieren von JPG-, PNG- und GIF-Dateiformaten. Sie k\u00f6nnen die gew\u00fcnschte Komprimierungsstufe auch selbst einstellen und ganz bequem das Ergebnis durch ein kleines Vorschaufenster sehen und entscheiden, ob Sie das resultierende Bild herunterladen m\u00f6chten.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p>Mit <strong>JPEG Optimizer<\/strong> k\u00f6nnen Sie JPG-Dateien optimieren, indem Sie nicht nur das Komprimierungsverh\u00e4ltnis ausw\u00e4hlen, sondern auch die Bildabmessungen anpassen.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p>Eine weitere f\u00fcr die Bildkomprimierung geeignete Option ist <strong>Photoshop<\/strong>. Sie k\u00f6nnen das Bild im Bereich \u201eBild &gt; Bildgr\u00f6\u00dfe\u201c verkleinern. Danach bietet Photoshop an, das Bild in g\u00e4ngigen Formaten zu speichern. Sie k\u00f6nnen dies auch tun, indem Sie \u201eDatei\u201c &gt; \u201eF\u00fcr Web speichern\u201c w\u00e4hlen. Durch die Installation des Plugins k\u00f6nnen Sie auch Dateien im WebP-Format speichern. Wenn Sie sich jedoch nicht mit Fotobearbeitung besch\u00e4ftigen, sondern nur einen Service speziell zum Komprimieren von Bildern suchen, ist es sinnvoll, eine andere Option zu w\u00e4hlen, da Photoshop nicht automatisch eine gro\u00dfe Anzahl von Bildern komprimiert. Au\u00dferdem ist es ein sehr teures Fotobearbeitungsprogramm.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:paragraph --><\/p>\n<p>Mit <strong>Optimizilla<\/strong> k\u00f6nnen Sie gleichzeitig bis zu 20 Dateien in Formaten wie JPG und PNG herunterladen und komprimieren. Der Service arbeitet auch mit automatischen Einstellungen f\u00fcr die Komprimierungsqualit\u00e4t und erm\u00f6glicht es Ihnen, die Einstellungen f\u00fcr jede Datei manuell anzupassen.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:heading --><\/p>\n<h2>Was ist mit Plugins?<\/h2>\n<p><!-- \/wp:heading --><!-- wp:paragraph --><\/p>\n<p>Wir alle k\u00f6nnen den Erfindern von WordPress gutes Karma schicken, denn dank WordPress haben wir die M\u00f6glichkeit, viele Prozesse zu automatisieren, einschlie\u00dflich der Bildkomprimierung. Es gibt eine Vielzahl von <a href=\"https:\/\/www.esterdigital.de\/blog\/wordpress-cookie-plugins\">WordPress Plugins<\/a>, die Ihnen bei dieser schwierigen Aufgabe helfen \u2013 Bilder komprimieren und formatieren und das Damoklesschwert der manuellen Formatierung entfernen, das \u00fcber Ihnen h\u00e4ngt. Beispielsweise gibt es Plugins, die Dateien sowohl w\u00e4hrend des Downloadvorgangs als auch nach Abschluss des Downloads optimieren, was eine sehr praktische Funktion ist. Welche Plugins helfen Ihnen also, Ihre Leistung zu verbessern? Das sind einige davon:<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:heading {\"level\":3} --><\/p>\n<h3>Imagify<\/h3>\n<p><!-- \/wp:heading --><!-- wp:paragraph --><\/p>\n<p>Imagify ist eines der besten Bildoptimierungs-Plugins, da es direkt in WordPress verwendet werden kann und sich die Qualit\u00e4t bei der Verwendung nicht verschlechtert. Es konvertiert auch Ihre Bilder in WebP, was f\u00fcr SEO n\u00fctzlich ist. Und wenn Sie mit dem Ergebnis der Optimierung eines Bildes nicht zufrieden sind, verf\u00fcgt Imagify \u00fcber eine Rollback-Funktion.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:heading {\"level\":3} --><\/p>\n<h3>ShortPixel<\/h3>\n<p><!-- \/wp:heading --><!-- wp:paragraph --><\/p>\n<p>ShortPixel ist ein wunderbares Plugin, das Ihre Arbeit mit Bildern erheblich vereinfacht. Einige der gro\u00dfen Pluspunkte sind, dass die Bilder in der Cloud komprimiert und verarbeitet werden, sodass Ihr Server w\u00e4hrend des Betriebs nicht zus\u00e4tzlich belastet wird. Es gibt auch keine Dateigr\u00f6\u00dfenbeschr\u00e4nkungen, ShortPixel optimiert jede Dateigr\u00f6\u00dfe. Abh\u00e4ngig von der Anzahl der Bilder, die Sie pro Monat verarbeiten m\u00fcssen, k\u00f6nnen Sie au\u00dferdem ein Paket ausw\u00e4hlen, das zu Ihrer Tasche passt.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:heading {\"level\":3} --><\/p>\n<h3>Optimus\u00a0<\/h3>\n<p><!-- \/wp:heading --><!-- wp:paragraph --><\/p>\n<p>Optimus ist ein WordPress-Plugin, das Ihnen hilft, die Bildgr\u00f6\u00dfe erheblich zu reduzieren (bis zu 70 Prozent) und gleichzeitig die Bildqualit\u00e4t beizubehalten. Der Dienst bietet Benutzern drei Pakete, eines kostenlos und zwei Premium (erweitert und f\u00fcr den professionellen Einsatz). Was sind die Vorteile des Plugins &#8211; Keine Notwendigkeit, den Code anzupassen, Unterst\u00fctzung f\u00fcr WooCommerce, WordPress Multisite und Massenoptimierung.<\/p>\n<p><!-- \/wp:paragraph --><!-- wp:heading --><\/p>\n<h2>Fazit<\/h2>\n<p><!-- \/wp:heading --><!-- wp:paragraph --><\/p>\n<p>Die Bildoptimierung ist einer der st\u00e4ndigen und wichtigsten Arbeitsschritte von einem Webdesigner oder <a href=\"https:\/\/www.esterdigital.de\/blog\/digitale-kunst-als-modetrend-der-zukunft\">Digitalk\u00fcnstler<\/a>, denn davon h\u00e4ngt ma\u00dfgeblich die Ladegeschwindigkeit einer Seite und gleichzeitig das Ranking der Suchmaschinen ab. (Mehr \u00fcber die weiteren Arbeitsschritte der Webdesigner &#8211; von der <a href=\"\/blog\/10-schritte-zur-erstellung-eines-hochwertigen-webdesigns-durch-wireframes\">Erstellung von Wireframes<\/a> bis zur Optimierung der Benutzeroberfl\u00e4che f\u00fcr mobile Ger\u00e4te &#8211; erfahren Sie in unserem Blog) In diesem Artikel haben wir die wesentlichen Informationen zur Bildoptimierung behandelt und einige der Dienste vorgestellt, die Ihnen bei der Optimierung Ihrer Bilder helfen. Wir empfehlen, einige davon auszuprobieren, um die f\u00fcr Sie am besten geeignete auszuw\u00e4hlen. Wenn Ihr Unternehmen in <a href=\"\/webdesign-agentur-kiel\">Kiel<\/a> oder einer anderen Stadt in Deutschland, \u00d6sterreich oder der Schweiz Hilfe bei der Bildoptimierung oder der Umsetzung bestimmter Ideen ben\u00f6tigt, wenden Sie sich an unser <a href=\"\/\">Ester-Team<\/a>.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Was ist das \u00c4rgerlichste am Surfen auf einer Webressource, sei es eine Corporate Website, eine Microsite oder eine Landingpage?\u00a0H\u00e4ssliches Website-Design, unstrukturierte Informationen oder un\u00e4sthetische Schriften? Zweifellos gibt es jedoch einen Punkt, aufgrund dessen wir m\u00f6glicherweise nicht einmal dazu kommen, das Design der Website oder die Informationen zu bewerten, die wir so dringend ben\u00f6tigen. Was ist&#8230;<\/p>\n","protected":false},"author":1,"featured_media":4472,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[27,28,21],"tags":[],"_links":{"self":[{"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/posts\/4441"}],"collection":[{"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/comments?post=4441"}],"version-history":[{"count":29,"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/posts\/4441\/revisions"}],"predecessor-version":[{"id":5028,"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/posts\/4441\/revisions\/5028"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/media\/4472"}],"wp:attachment":[{"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/media?parent=4441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/categories?post=4441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/tags?post=4441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}