[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":3,"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":39,"Kn0SDSVMn8VHCmIoa8HgX-pONQ2jUCiXnZX2ljyK35M":75,"JYEwkd4gczJvmZ6uuzjcjgpepuSDEOSvAAugMa94MhA":160,"_apollo:default":205},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","footer","Fußzeile",[9,24,29,34],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum",null,"/impressum",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":21,"expanded":21,"attributes":38},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"menu":40},{"__typename":5,"id":41,"name":42,"items":43},"nuxt-main-menu","Nuxt Hauptmenü",[44,50,55,60,65,70],{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":48,"internal":20,"expanded":21,"attributes":49},"9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog","/know-how",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":51,"title":52,"description":13,"url":53,"langcode":48,"internal":20,"expanded":21,"attributes":54},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":56,"title":57,"description":13,"url":58,"langcode":48,"internal":20,"expanded":21,"attributes":59},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":48,"internal":20,"expanded":21,"attributes":64},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":48,"internal":20,"expanded":21,"attributes":69},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":48,"internal":20,"expanded":21,"attributes":74},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":89,"path":90,"promote":21,"status":20,"sticky":21,"metatag":91,"postCategory":111,"postContentElements":13,"evergreen":13,"tags":136,"postWpBody":150,"wpHeaderImage":13,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":153,"author":154},"NodeWpPost","1030","Grunt workflow inklusive Bildoptimierung",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1380622886,"UTC","+00:00","2013-10-01T10:21:26+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/grunt-workflow-inklusive-bildoptimierung",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","Grunt workflow inklusive Bildoptimierung | Liechtenecker UX Design Studio",{"__typename":100,"tag":101,"attributes":102},"MetaTagLink","link",{"__typename":103,"href":104,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/grunt-workflow-inklusive-bildoptimierung","canonical",{"__typename":107,"tag":94,"attributes":108},"MetaTagProperty",{"__typename":109,"property":110,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":112,"id":113,"name":114,"path":115,"status":20,"weight":116,"description":117,"langcode":121,"changed":122,"metatag":125},"TermCategories","8","UX/UI Design","/kategorie/design",0,{"__typename":118,"processed":119,"format":120},"Text","Themen aus dem Bereich Design & User Experience","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":123,"timezone":85,"offset":86,"time":124},1713772777,"2024-04-22T07:59:37+00:00",[126,129,133],{"__typename":93,"tag":94,"attributes":127},{"__typename":96,"name":97,"content":128},"UX/UI Design | Liechtenecker UX Design Studio",{"__typename":93,"tag":94,"attributes":130},{"__typename":96,"name":131,"content":132},"description","Themen aus dem Bereich Design & User Experience",{"__typename":100,"tag":101,"attributes":134},{"__typename":103,"href":135,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/design",[137,142,146],{"__typename":138,"id":139,"name":140,"path":141,"weight":116},"TermTags","560","grunt","/tag/grunt",{"__typename":138,"id":143,"name":144,"path":145,"weight":116},"953","performanceoptimierung","/tag/performanceoptimierung",{"__typename":138,"id":147,"name":148,"path":149,"weight":116},"1284","taskrunner","/tag/taskrunner",{"__typename":151,"processed":152,"format":120,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv alt=\"grunt\" data-entity-type=\"media\" data-entity-uuid=\"4ae61af8-ad70-487f-8006-9b5ea6974d35\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2013/10/grunt1-1.jpg.webp?itok=YTWFKG6i 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2013/10/grunt1-1.jpg.webp?itok=ta_Aa01t 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1000\" height=\"400\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2013/10/grunt1-1.jpg.webp?itok=ShAgH8pu 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2013/10/grunt1-1.jpg.webp?itok=15MU1Kaj 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1000\" height=\"400\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2013/10/grunt1-1.jpg.webp?itok=MLPyAu92 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2013/10/grunt1-1.jpg.webp?itok=YX53uuj3 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"298\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2013/10/grunt1-1.jpg.webp?itok=65X0espN 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2013/10/grunt1-1.jpg.webp?itok=FFByDClc 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"192\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2013/10/grunt1-1.jpg.webp?itok=F8CAQdJ3 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/10/grunt1-1.jpg.webp?itok=qEoFdmad 2x\" type=\"image/webp\" width=\"1000\" height=\"400\">\n                  \u003Cimg loading=\"lazy\" width=\"1000\" height=\"400\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/10/grunt1-1.jpg.jpg?itok=qEoFdmad\" alt=\"grunt\" title=\"grunt\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cp>Als Developer und Designer hat man es ja heutzutage mit den verschiedensten Technologien und Tools zu tun. Neben den neuen Möglichkeiten die sich hier bieten, wachsen aber auch gleichzeitig unsere Anforderungen. Wichtig ist daher, dass man sich mit neuen Hilfsmitteln und Erkenntnissen auseinandersetzt, um sich selbst und seinen Workflow stetig weiterentwickeln zu können. Ich stand unlängst genau vor so einer Situation.\u003Cbr>\n\u003C/p>\n\u003Ch3>Ausgangspunkt\u003C/h3>\n\u003Cp>Websites werden immer größer und haben schon eine \u003Cstrong>durchschnittliche Größe von 1,5MB überschritten\u003C/strong>. (\u003Ca title=\"Websites Statistik\" href=\"http://httparchive.org/interesting.php?a=All&l=Sep%201%202013#bytesperpage\" target=\"_blank\" rel=\"noopener noreferrer\">Stand Sept. 2013\u003C/a>) Daher wird Web-performance, besonders unter Berücksichtigung von mobilen Endgeräten, immer wichtiger und entscheidend für gute User Experience. \u003Cstrong>Bilder stellen bei diesen 1,5MB mit über 60% den größten Teil dar\u003C/strong>. Dadurch ist auch klar wo man am meisten Bytes einsparen und Performance gewinnen kann. Neben der Überlegung ob ein Bild wirklich notwendig ist, ist Bildoptimierung der nächste logische und wichtige Schritt. Mein Ziel war es Bildoptimierung in meinen täglichen Workflow besser zu integrieren, und zwar automatisiert.\u003C/p>\n\u003Cblockquote>\n\u003Cp>Automate everything. You don’t want to repeat image optimization yourself, nor do you want to ask your team to do the same six steps you repeat. Set up a build process that smartly optimizes new images. Use lossy compression.  – \u003Ca title=\"Paul Irish Website\" href=\"http://www.paulirish.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Paul Irish\u003C/a>, Google\u003C/p>\n\u003C/blockquote>\n\u003Cp>Wie Paul Irish schreibt ist es wichtig Prozesse im Team zu automatisieren. Online Tools für Bild-Optimierung sind praktisch, aber umständlich im täglichen Gebrauch. Außerdem ist es wichtig, Prozesse für sein Team zu vereinheitlichen. Es sollte sich nicht jedes Teammitglied neu Gedanken über dieses Thema machen. Hier kann definitiv Zeit eingespart werden.\u003Cbr>\nGerade wenn es um Workflow und Automatisierung geht, hört man viel über Grunt und deshalb habe ich es mir mal näher angesehen.\u003C/p>\n\u003Ch3>Grunt ist ein Taskrunner\u003C/h3>\n\u003Cp>\u003Cstrong>Grunt ist eine JavaScript “Taskrunner”\u003C/strong> und basiert auf dem Node.js Framework. Es hilft dabei Aufgaben, die man immer wieder benötigt, zu automatisieren und zentral zu steuern. Zu diesen Aufgaben zählen zum Beispiel das Kompilieren von Sass und LESS oder das Komprimieren von Dateien. Hier ist aber noch lange nicht Schluss. Dank der großen Grunt-Community gibt es Hunderte von \u003Ca title=\"Grunt Plugins\" href=\"http://gruntjs.com/plugins\" target=\"_blank\" rel=\"noopener noreferrer\">Plugins\u003C/a> die uns bei unserer täglichen Arbeit unterstützen können. Bildoptimierung gehört natürlich auch dazu und das schauen wir uns gleich etwas genauer an.\u003Cbr>\nErste Erfahrungen mit Grunt werden im nächsten Abschnitt vorausgesetzt, da wir uns auf den Aspekt der Bildoptimierung konzentrieren wollen. Wer noch nicht so weit ist, dem empfehle ich den Grunt \u003Ca title=\"Grunt getting started\" href=\"http://gruntjs.com/getting-started\" target=\"_blank\" rel=\"noopener noreferrer\">Getting started Guide\u003C/a>, sowie diesen \u003Ca title=\"Blog Artikel über Grunt\" href=\"http://blog.massiveart.com/de/grunt-und-das-hat-nichts-mit-grunzen-zu-tun\" target=\"_blank\" rel=\"noopener noreferrer\">Blog Artikel\u003C/a>.\u003Cbr>\nUns geht es ja um Bildbearbeitung und hierfür hat Grunt zahlreiche Plugins parat. Wir werden uns in einem Beispiel \u003Cstrong>ImageOptim\u003C/strong> ansehen. Das Grunt Plugin ImageOptim arbeitet mit den Apps ImageOptim, ImageAlpha und JPEGMini for Mac. Diese müssen daher zu allererst installiert werden.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ca title=\"ImageOptim\" href=\"http://imageoptim.com/\" target=\"_blank\" rel=\"noopener noreferrer\">ImageOptim\u003C/a>\u003C/li>\n\u003Cli>\u003Ca title=\"ImageAlpha\" href=\"http://pngmini.com/\" target=\"_blank\" rel=\"noopener noreferrer\">ImageAlpha\u003C/a>\u003C/li>\n\u003Cli>\u003Ca title=\"JPEGmini\" href=\"https://itunes.apple.com/us/app/jpegmini/id498944723\" target=\"_blank\" rel=\"noopener noreferrer\">JPEGmini for Mac\u003C/a> (App Store, kostenpflichtig)\u003C/li>\n\u003C/ul>\n\u003Cp>JPEGmini ist nicht zwingend erforderlich, daher werden wir es bei unserem Beispiel auch nicht verwenden. Trotzdem zahlt es sich, wie man \u003Ca title=\"Batch Image Tools Statistik\" href=\"http://jamiemason.github.io/ImageOptim-CLI/\" target=\"_blank\" rel=\"noopener noreferrer\">hier\u003C/a>  in einer Statistik über Batch Image Tools gut erkennen kann, aus.\u003Cbr>\nJetzt können wir mit unserem Beispiel beginnen. Im Projektordner der Wahl, geht es mit der Grunt Integration weiter. Zuerst erstellen wir ein Standard package.json file.\u003C/p>\n\u003Cpre>\n{\n    \"name\": \"liechtencker-imageoptim\",\n    \"version\": \"0.1.0\",\n    \"author\": \"Christoph Rumpel\",\n    \"devDependencies\": {\n        \"grunt\": \"~0.4.1\",\n    }\n}\n\u003C/pre>\n\u003Cp>Danach können wir die nötigen Grunt Komponenten, sowie ImageOptim installieren.\u003C/p>\n\u003Cpre>\nsudo npm install\n\u003C/pre>\n\u003Cp>Nun geht es an die Einstellungen und dafür erstellen wir die Gruntfile.js Datei.\u003C/p>\n\u003Cpre>\nmodule.exports = function(grunt) {\n    grunt.initConfig({\n    // ImageOptim settings\n    imageoptim: {\n        myTask: {\n            options: {\n                jpegMini: false,\n                imageAlpha: true,\n                quitAfter: true\n                },\n                files: ['assets/images', 'assets/css/images']\n            }\n        }\n    });\n    grunt.loadNpmTasks('grunt-imageoptim');\n};\n\u003C/pre>\n\u003Cp>Im neuen Task imageoptim definieren wir die Tools die wir für die Bildoptimierung verwenden wollen, sowie die Ordner in denen die Bilder zu finden sind. Mit quitAfter, schließen wir nur die verwendeten Tools wieder.\u003Cbr>\nNun können wir mit dem folgenden Befehl ganz einfach unsere Bilder optimieren.\u003C/p>\n\u003Cpre>\ngrunt imageoptim\n\u003C/pre>\n\u003Cp>Voila! Schnell, effektiv und am Allerwichtigsten automatisch. Natürlich gibt es hier noch eine Vielanzahl an weiteren Einstellungsmöglichkeiten. Dafür empfehle ich euch einfach einen Blick in die \u003Ca title=\"ImageOptim Dokumentation\" href=\"https://github.com/JamieMason/grunt-imageoptim\" target=\"_blank\" rel=\"noopener noreferrer\">Dokumentation\u003C/a> zu werfen.\u003C/p>\n\u003Ch3>Fazit\u003C/h3>\n\u003Cp>Wir haben mit Grunt ein mächtiges Tool um uns bei den täglichen Aufgaben als Designer oder Developer zu unterstützen. Wir können es unseren Anforderungen perfekt anpassen und damit unseren Workflow enorm verbessern. Wie wir gesehen haben ist auch die Integration von Bildoptimierung-Tools ein Kinderspiel und Ausreden diesbezüglich gehören daher hoffentlich der Vergangenheit an.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://legacy.liechtenecker.dev/blog/grunt-workflow-inklusive-bildoptimierung/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Grunt workflow inklusive Bildoptimierung - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Als Developer und Designer hat man es ja heutzutage mit den verschiedensten Technologien und Tools zu tun. Neben den neuen Möglichkeiten die sich hier bieten, wachsen aber auch gleichzeitig unsere Anforderungen. Wichtig ist daher, dass man sich mit neuen Hilfsmitteln und Erkenntnissen auseinandersetzt, um sich selbst und seinen Workflow stetig weiterentwickeln zu können. Ich stand […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/grunt-workflow-inklusive-bildoptimierung/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2013-10-01T12:21:26+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://legacy.liechtenecker.dev/wp-content/uploads/2013/10/grunt1-1.jpg\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"4 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://legacy.liechtenecker.dev/#website\",\"url\":\"https://legacy.liechtenecker.dev/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://legacy.liechtenecker.dev/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/blog/grunt-workflow-inklusive-bildoptimierung/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://legacy.liechtenecker.dev/wp-content/uploads/2013/10/grunt1-1.jpg\",\"width\":1000,\"height\":400},{\"@type\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/grunt-workflow-inklusive-bildoptimierung/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/grunt-workflow-inklusive-bildoptimierung/\",\"name\":\"Grunt workflow inklusive Bildoptimierung - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://legacy.liechtenecker.dev/blog/grunt-workflow-inklusive-bildoptimierung/#primaryimage\"},\"datePublished\":\"2013-10-01T12:21:26+00:00\",\"dateModified\":\"2013-10-01T12:21:26+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/c6a4fab1680ccc1ec0ed63179501b4b1\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/grunt-workflow-inklusive-bildoptimierung/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/c6a4fab1680ccc1ec0ed63179501b4b1\",\"name\":\"Christoph Rumpel\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/3191eb8b348673db049a15f94835ba83?s=96&d=mm&r=g\",\"caption\":\"Christoph Rumpel\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":155,"id":156,"myRole":157,"name":158,"nickname":159},"User","4","-","c-rumpel","Christoph Rumpel",{"latestKnowhow":161},[162,180,193],{"__typename":79,"id":163,"title":164,"path":165,"wpTeaserText":166,"wpPromotedTeaserImage":13,"wpHeaderImage":167},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":168,"id":169,"excludeFromScreenreader":13,"mediaImage":170,"name":178,"path":179,"status":20},"MediaImage","3364",{"__typename":171,"url":172,"width":173,"height":174,"alt":175,"title":13,"size":176,"mime":177},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"image/jpeg","Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":181,"title":182,"path":183,"wpTeaserText":184,"wpPromotedTeaserImage":13,"wpHeaderImage":185},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":168,"id":186,"excludeFromScreenreader":13,"mediaImage":187,"name":191,"path":192,"status":20},"3355",{"__typename":171,"url":188,"width":173,"height":174,"alt":189,"title":13,"size":190,"mime":177},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":194,"title":195,"path":196,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":197},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":168,"id":198,"excludeFromScreenreader":21,"mediaImage":199,"name":203,"path":204,"status":20},"3303",{"__typename":171,"url":200,"width":173,"height":174,"alt":201,"title":13,"size":202,"mime":177},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":206,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":207,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":211,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":214,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":217,"Menu:footer":220,"ROOT_QUERY":230,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":246,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":249,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":252,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":255,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":258,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":261,"Menu:nuxt-main-menu":264,"TermCategories:8":278,"TermTags:560":289,"TermTags:953":290,"TermTags:1284":291,"User:4":292,"NodeWpPost:1030":293,"MediaImage:3364":316,"NodeWpPost:1619":318,"MediaImage:3355":321,"NodeWpPost:1616":323,"MediaImage:3303":326,"NodeWpPost:1606":328},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",208,"internal",20,"expanded",21,"attributes",210],{"__ref":209},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",212,"internal",20,"expanded",21,"attributes",213],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",215,"internal",20,"expanded",21,"attributes",216],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",218,"internal",21,"expanded",21,"attributes",219],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",221],[222,224,226,228],{"__ref":223},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":225},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":227},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":229},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",231,"menu({\"name\":\"FOOTER\"})",232,"menu({\"name\":\"NUXT_MAIN_MENU\"})",234,"route({\"path\":\"/blog/grunt-workflow-inklusive-bildoptimierung\"})",236,"latestKnowhow({\"excludeId\":\"1030\",\"limit\":3})",239],"Query",{"__ref":233},"Menu:footer",{"__ref":235},"Menu:nuxt-main-menu",["null","__typename",77,"entity",237],{"__ref":238},"NodeWpPost:1030",[240,242,244],{"__ref":241},"NodeWpPost:1619",{"__ref":243},"NodeWpPost:1616",{"__ref":245},"NodeWpPost:1606",["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",247,"internal",20,"expanded",21,"attributes",248],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",51,"title",52,"description",13,"url",53,"langcode",250,"internal",20,"expanded",21,"attributes",251],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",56,"title",57,"description",13,"url",58,"langcode",253,"internal",20,"expanded",21,"attributes",254],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",256,"internal",20,"expanded",21,"attributes",257],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",259,"internal",20,"expanded",21,"attributes",260],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",262,"internal",20,"expanded",21,"attributes",263],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",5,"id",41,"name",42,"items",265],[266,268,270,272,274,276],{"__ref":267},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":269},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":271},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":273},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":275},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":277},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",112,"id",113,"name",114,"path",115,"status",20,"weight",116,"description",279,"langcode",280,"changed",281,"metatag",282],["null","__typename",118,"processed",119,"format",120],{"__ref":209},["null","__typename",83,"timestamp",123,"timezone",85,"offset",86,"time",124],[283,285,287],["null","__typename",93,"tag",94,"attributes",284],["null","__typename",96,"name",97,"content",128],["null","__typename",93,"tag",94,"attributes",286],["null","__typename",96,"name",131,"content",132],["null","__typename",100,"tag",101,"attributes",288],["null","__typename",103,"href",135,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",138,"id",139,"name",140,"path",141,"weight",116],["null","__typename",138,"id",143,"name",144,"path",145,"weight",116],["null","__typename",138,"id",147,"name",148,"path",149,"weight",116],["null","__typename",155,"id",156,"myRole",157,"name",158,"nickname",159],["null","__typename",79,"id",80,"title",81,"changed",294,"created",295,"langcode",296,"path",90,"promote",21,"status",20,"sticky",21,"metatag",297,"category",304,"contentElements",13,"evergreen",13,"tags",306,"wpBody",313,"wpHeaderImage",13,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",153,"author",314],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":209},[298,300,302],["null","__typename",93,"tag",94,"attributes",299],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",301],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",303],["null","__typename",109,"property",110,"content",81],{"__ref":305},"TermCategories:8",[307,309,311],{"__ref":308},"TermTags:560",{"__ref":310},"TermTags:953",{"__ref":312},"TermTags:1284",["null","__typename",151,"processed",152,"format",120,"summary",13],{"__ref":315},"User:4",["null","__typename",168,"id",169,"excludeFromScreenreader",13,"mediaImage",317,"name",178,"path",179,"status",20],["null","__typename",171,"url",172,"width",173,"height",174,"alt",175,"title",13,"size",176,"mime",177],["null","__typename",79,"id",163,"title",164,"path",165,"wpTeaserText",166,"wpPromotedTeaserImage",13,"wpHeaderImage",319],{"__ref":320},"MediaImage:3364",["null","__typename",168,"id",186,"excludeFromScreenreader",13,"mediaImage",322,"name",191,"path",192,"status",20],["null","__typename",171,"url",188,"width",173,"height",174,"alt",189,"title",13,"size",190,"mime",177],["null","__typename",79,"id",181,"title",182,"path",183,"wpTeaserText",184,"wpPromotedTeaserImage",13,"wpHeaderImage",324],{"__ref":325},"MediaImage:3355",["null","__typename",168,"id",198,"excludeFromScreenreader",21,"mediaImage",327,"name",203,"path",204,"status",20],["null","__typename",171,"url",200,"width",173,"height",174,"alt",201,"title",13,"size",202,"mime",177],["null","__typename",79,"id",194,"title",195,"path",196,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",329],{"__ref":330},"MediaImage:3303"]