[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":3,"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":49,"cGmQjdlaz-HpPtIxtIFcGSaAfvNS6YBaC7ZhNl4X1B4":75,"cybjG8o3IBjy9bBOmx9bj-7_g285uXIJAx6aBgC-aFw":180,"_apollo:default":225},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","nuxt-main-menu","Nuxt Hauptmenü",[9,24,29,34,39,44],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog",null,"/know-how",{"__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},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":20,"expanded":21,"attributes":38},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":40,"title":41,"description":13,"url":42,"langcode":15,"internal":20,"expanded":21,"attributes":43},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":15,"internal":20,"expanded":21,"attributes":48},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"menu":50},{"__typename":5,"id":51,"name":52,"items":53},"footer","Fußzeile",[54,60,65,70],{"__typename":10,"id":55,"title":56,"description":13,"url":57,"langcode":58,"internal":20,"expanded":21,"attributes":59},"e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum","/impressum",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":58,"internal":20,"expanded":21,"attributes":64},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":58,"internal":20,"expanded":21,"attributes":69},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":58,"internal":21,"expanded":21,"attributes":74},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__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":170,"wpHeaderImage":13,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":173,"author":174},"NodeWpPost","1047","Hochauflösende Bilder auf Webseiten einbinden",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1371709419,"UTC","+00:00","2013-06-20T06:23:39+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/hochauflosende-bilder-auf-webseiten-einbinden",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","Hochauflösende Bilder auf Webseiten einbinden | 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/hochauflosende-bilder-auf-webseiten-einbinden","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,150,154,158,162,166],{"__typename":138,"id":139,"name":140,"path":141,"weight":116},"TermTags","295","CSS","/tag/css",{"__typename":138,"id":143,"name":144,"path":145,"weight":116},"581","high-res grafiken","/tag/high-res-grafiken",{"__typename":138,"id":147,"name":148,"path":149,"weight":116},"584","highres fotos","/tag/highres-fotos",{"__typename":138,"id":151,"name":152,"path":153,"weight":116},"589","hochauflösende Bilder","/tag/hochauflosende-bilder",{"__typename":138,"id":155,"name":156,"path":157,"weight":116},"601","HTML","/tag/html",{"__typename":138,"id":159,"name":160,"path":161,"weight":116},"677","javascript","/tag/javascript",{"__typename":138,"id":163,"name":164,"path":165,"weight":116},"1077","responsive werbdesign","/tag/responsive-werbdesign",{"__typename":138,"id":167,"name":168,"path":169,"weight":116},"1085","Retina Bilder","/tag/retina-bilder",{"__typename":171,"processed":172,"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=\"highres\" data-entity-type=\"media\" data-entity-uuid=\"983d5c0a-e2ee-48f9-867b-c8a6f10a5bbd\" 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/06/highres1-1.jpg.webp?itok=5zbMCFOF 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2013/06/highres1-1.jpg.webp?itok=8J8E5Iuq 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1000\" height=\"471\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2013/06/highres1-1.jpg.webp?itok=6rdQOFXb 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2013/06/highres1-1.jpg.webp?itok=XF3aQDMR 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1000\" height=\"471\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2013/06/highres1-1.jpg.webp?itok=tl58HQay 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2013/06/highres1-1.jpg.webp?itok=rzcW_OWh 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"351\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2013/06/highres1-1.jpg.webp?itok=w_yOIlSj 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2013/06/highres1-1.jpg.webp?itok=qOg4YvxB 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"226\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2013/06/highres1-1.jpg.webp?itok=-cd_o0fo 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/06/highres1-1.jpg.webp?itok=y6Pg2k13 2x\" type=\"image/webp\" width=\"1000\" height=\"471\">\n                  \u003Cimg loading=\"lazy\" width=\"1000\" height=\"471\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/06/highres1-1.jpg.jpg?itok=y6Pg2k13\" alt=\"highres\" title=\"highres\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cp>Während klassische Desktop-Monitore in den letzten Jahren kaum an Auflösung hinzugewonnen haben, sind gerade Tablets und Smartphone mit ihren hochauflösenden Bildschirmen die „Treiber“ in der technischen Weiterentwicklung von Displays. Herkömmliche Desktop-Monitore haben meist eine Auflösung von ~72-100 ppi (\u003Ca href=\"https://de.wikipedia.org/wiki/Punktdichte\" target=\"_blank\" rel=\"noopener noreferrer\">Erklärung zu Pixeldichte auf Wikipedia\u003C/a>). Tablets und Smartphones hingegen haben oft eine mehr als doppelt so hohe Pixeldichte, also 250 – 350 ppi.\u003Cbr>\nDerart hochaufgelöste Displays stellen natürlich eine besondere Herausforderung für die visuelle Gestaltung und Darstellung einer Webseite dar. \u003Ca href=\"https://liechtenecker.at/svg-die-zukunft-von-grafiken-auf-webseiten/\" target=\"_blank\" rel=\"noopener noreferrer\">In einem meiner letzten Beiträge\u003C/a> bin ich auf die Möglichkeit eingegangen, Grafiken die sonst als PNG oder GIF ausgeliefert werden, durch moderne, vektorbasierte Grafiken im SVG-Format zu ersetzen. In diesem Blogeintrag werde ich mich mit der Auslieferung von hochauflösenden Grafiken und Bildern beschäftigen, die wegen ihrer Beschaffenheit nicht als Vektorgrafik ausgeliefert werden können.\u003Cbr>\n\u003C/p>\n\u003Ch2>\u003C/h2>\n\u003Ch2>Warum keine Vektoren?\u003C/h2>\n\u003Cp>Natürlich macht der Einsatz von vektorbasierten Grafiken überall dort Sinn, wo bereits das Ausgangsmaterial vektorbasiert ist. Diest ist vor allem bei Icons, Logos und anderen, einfachen Grafiken der Fall die meist in Vektorprogrammen wie z.B. Adobe Illustrator erstellt werden.\u003Cbr>\nDaneben gibt es aber viele visuelle Elemente einer Webseite, die nicht oder nur schwer als Vektoren bereitgestellt werden können. Dazu zählen aufwendige Grafiken und natürlich vor allem Fotos und Bilder.\u003Cbr>\nGoogle liefert \u003Ca href=\"https://developers.google.com/speed/articles/web-metrics\" target=\"_blank\" rel=\"noopener noreferrer\">statistische Daten\u003C/a>, die zeigen wie wichtig grafische Inhalte auf Webseiten geworden sind. Durchschnittlich enthält eine Webseite laut Google ~29 einzigartige Bilder – eine Zahl die in Zukunft sicherlich noch steigen wird. Nicht zuletzt durch \u003Ca href=\"https://liechtenecker.at/responsive-webdesign-die-basics/\" target=\"_blank\" rel=\"noopener noreferrer\">Responsive Webdesign\u003C/a> und die damit einhergehende Optimierung von Seiten auf kleine und große Bildschirme bekommen Bilder und Fotos also immer mehr Relevanz.\u003C/p>\n\u003Ch2>Vor- und Nachteile von hochauflösenden Bildern\u003C/h2>\n\u003Cp>Immer öfter wird natürlich daher der Wunsch geäußert, vorhandenen Foto und Bildcontent neben einer Standard- auch (sofern vorhanden) in einer hochauflösenden Variante anzubieten. Der Vorteil davon ist natürlich gestochen scharfe Bilder auch auf Tablets, Smartphone und hochauflösende Displays ausliefern zu können um so die visuelle Erscheinung der Seite um ein vielfaches zu verbessern.\u003Cbr>\nNeben dem Vorteil gibt es aber natürlich auch einige Nachteile, vor allem die deutlich größere Dateigröße eines Bildes. Um ein Standardbild von 1000 x 1000 Pixel in einer hochauflösenden Variante ausliefern zu können, muss das High-Resolution-Bild 2000 x 2000 Pixel haben – d.h. theoretisch ist die High-Res Variante eines Bildes vier mal so groß. Bedenkt man weiters, dass viele High-Res Devices unterwegs mit (potentiell langsamen) Mobilnetz benutzt werden, fällt dieser Umstand doppelt ins Gewicht. Dem kann nur mit sorgfältiger und starker Bildkomprimierung entgegengewirkt werden, die pro Bild und Grafik ganz individuell festgesetzt werden muss.\u003Cbr>\nDer zweite Große Nachteil ist, dass es noch kein standardisiertes Verfahren gibt, hochauflösende Varianten von Bildern auszuliefern. In den momentan in Entwicklung befindlichen Spezifikationen für CSS 4 findet sich das „image-set“-Attribut (\u003Ca href=\"http://dev.w3.org/csswg/css-images/#image-set-notation\" target=\"_blank\" rel=\"noopener noreferrer\">Link\u003C/a>), welches zumindest für Bilder, die per CSS eingebunden werden eine Besserung verspricht. Wichtiger ist natürlich eine zukünftige Änderung im HTML <img>-Attribut, welches den Großteil aller dynamisch eingebundenen Bilder (z.B. über das CMS) abwickelt. Ohne diesen neuen Standard muss bisher noch auf Hacks zurückgegriffen werden, um hochauflösende Bilder anzuzeigen.\u003Cbr>\nEin nicht zu unterschätzender Faktor liegt nicht in der technischen Einbindung sondern auch in der Aufbereitung des Bildcontents. Das Ausgangsmaterial muss in visuell sehr guter Qualität vorliegen, damit die Einbindung als hochauflösendes Bild überhaupt Sinn macht. Weiters erfordert die Aufarbeitung von Fotos und Bildern in verschiedenen Auflösungen und Qualitäten natürlich auch einiges an Arbeitszeit.\u003C/p>\n\u003Ch2>Bibliotheken und Libraries für die Einbindung\u003C/h2>\n\u003Cp>Fast alle Libraries, die Bilder in Standardauflösung durch Hochauflösende ersetzen, arbeiten rein mit JavaScript. Die bekannteste Library ist \u003Ca href=\"http://retinajs.com/\" target=\"_blank\" rel=\"noopener noreferrer\">RetinaJS\u003C/a>, welche beim Seitenstart alle Bilder in einem <img>-Attribut  auf eine höheraufgelöste Variante am Server prüft und diese dann ggf. nachlädt.\u003Cbr>\nEine andere vielversprechende Library, \u003Ca href=\"http://adaptive-images.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Adaptive Images\u003C/a>,  greift tiefer ins System ein und erfordernt neben einem PHP-Skript und der Modifikation der .htaccess ebenfalls Javascript. Der Zusatznutzen bei Adaptive Images ist die Möglichkeit, andere Bilder für kleinere Devices auszuliefern um so Bandbreite zu sparen.\u003C/p>\n\u003Ch2>Zusammenfassung und Ausblick\u003C/h2>\n\u003Cp>Neue Standards etablieren sich im Web langsam, deshalb wird es noch lange dauern, bis ein standardisierter und von allen Browsern akzeptierter Weg gefunden ist, um hochauflösende Bilder intelligent ausliefern zu können.\u003Cbr>\nDie Methoden und Techniken um hochauflösende Bilder anzuzeigen werden bis dahin mit Sicherheit vielfältiger, resourcensparender und intelligenter werden – die zusätzliche Arbeit den Content für hochauflösende Displays aufzubereiten wird weiterhin aufwendig bleiben und viel Auge fürs Detail erfordern.\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://liechtenecker.at/blog/hochauflosende-bilder-auf-webseiten-einbinden/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Hochauflösende Bilder auf Webseiten einbinden - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Während klassische Desktop-Monitore in den letzten Jahren kaum an Auflösung hinzugewonnen haben, sind gerade Tablets und Smartphone mit ihren hochauflösenden Bildschirmen die „Treiber“ in der technischen Weiterentwicklung von Displays. Herkömmliche Desktop-Monitore haben meist eine Auflösung von ~72-100 ppi (Erklärung zu Pixeldichte auf Wikipedia). Tablets und Smartphones hingegen haben oft eine mehr als doppelt so hohe […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://liechtenecker.at/blog/hochauflosende-bilder-auf-webseiten-einbinden/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2013-06-20T08:23:39+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://liechtenecker.at/wp-content/uploads/2013/06/highres1-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://liechtenecker.at/#website\",\"url\":\"https://liechtenecker.at/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://liechtenecker.at/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/blog/hochauflosende-bilder-auf-webseiten-einbinden/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://liechtenecker.at/wp-content/uploads/2013/06/highres1-1.jpg\",\"width\":1000,\"height\":471},{\"@type\":\"WebPage\",\"@id\":\"https://liechtenecker.at/blog/hochauflosende-bilder-auf-webseiten-einbinden/#webpage\",\"url\":\"https://liechtenecker.at/blog/hochauflosende-bilder-auf-webseiten-einbinden/\",\"name\":\"Hochaufl\\u00f6sende Bilder auf Webseiten einbinden - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://liechtenecker.at/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://liechtenecker.at/blog/hochauflosende-bilder-auf-webseiten-einbinden/#primaryimage\"},\"datePublished\":\"2013-06-20T08:23:39+00:00\",\"dateModified\":\"2013-06-20T08:23:39+00:00\",\"author\":{\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://liechtenecker.at/blog/hochauflosende-bilder-auf-webseiten-einbinden/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\",\"name\":\"Stephan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/400d5f8c531afb609b81aa66c8d56f01?s=96&d=mm&r=g\",\"caption\":\"Stephan\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":175,"id":176,"myRole":177,"name":178,"nickname":179},"User","23","langgedienter Frontend-Veteran","s-fletzberger","Stephan",{"latestKnowhow":181},[182,200,213],{"__typename":79,"id":183,"title":184,"path":185,"wpTeaserText":186,"wpPromotedTeaserImage":13,"wpHeaderImage":187},"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":188,"id":189,"excludeFromScreenreader":13,"mediaImage":190,"name":198,"path":199,"status":20},"MediaImage","3364",{"__typename":191,"url":192,"width":193,"height":194,"alt":195,"title":13,"size":196,"mime":197},"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":201,"title":202,"path":203,"wpTeaserText":204,"wpPromotedTeaserImage":13,"wpHeaderImage":205},"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":188,"id":206,"excludeFromScreenreader":13,"mediaImage":207,"name":211,"path":212,"status":20},"3355",{"__typename":191,"url":208,"width":193,"height":194,"alt":209,"title":13,"size":210,"mime":197},"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":214,"title":215,"path":216,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":217},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":188,"id":218,"excludeFromScreenreader":21,"mediaImage":219,"name":223,"path":224,"status":20},"3303",{"__typename":191,"url":220,"width":193,"height":194,"alt":221,"title":13,"size":222,"mime":197},"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":226,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":227,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":231,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":234,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":237,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":240,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":243,"Menu:nuxt-main-menu":246,"ROOT_QUERY":260,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":276,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":279,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":282,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":285,"Menu:footer":288,"TermCategories:8":298,"TermTags:295":309,"TermTags:581":310,"TermTags:584":311,"TermTags:589":312,"TermTags:601":313,"TermTags:677":314,"TermTags:1077":315,"TermTags:1085":316,"User:23":317,"NodeWpPost:1047":318,"MediaImage:3364":351,"NodeWpPost:1619":353,"MediaImage:3355":356,"NodeWpPost:1616":358,"MediaImage:3303":361,"NodeWpPost:1606":363},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",228,"internal",20,"expanded",21,"attributes",230],{"__ref":229},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",232,"internal",20,"expanded",21,"attributes",233],{"__ref":229},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",235,"internal",20,"expanded",21,"attributes",236],{"__ref":229},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",238,"internal",20,"expanded",21,"attributes",239],{"__ref":229},["null","__typename",23,"class",13],["null","__typename",10,"id",40,"title",41,"description",13,"url",42,"langcode",241,"internal",20,"expanded",21,"attributes",242],{"__ref":229},["null","__typename",23,"class",13],["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",244,"internal",20,"expanded",21,"attributes",245],{"__ref":229},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",247],[248,250,252,254,256,258],{"__ref":249},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":251},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":253},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":255},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":257},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":259},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",261,"menu({\"name\":\"NUXT_MAIN_MENU\"})",262,"menu({\"name\":\"FOOTER\"})",264,"route({\"path\":\"/blog/hochauflosende-bilder-auf-webseiten-einbinden\"})",266,"latestKnowhow({\"excludeId\":\"1047\",\"limit\":3})",269],"Query",{"__ref":263},"Menu:nuxt-main-menu",{"__ref":265},"Menu:footer",["null","__typename",77,"entity",267],{"__ref":268},"NodeWpPost:1047",[270,272,274],{"__ref":271},"NodeWpPost:1619",{"__ref":273},"NodeWpPost:1616",{"__ref":275},"NodeWpPost:1606",["null","__typename",10,"id",55,"title",56,"description",13,"url",57,"langcode",277,"internal",20,"expanded",21,"attributes",278],{"__ref":229},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",280,"internal",20,"expanded",21,"attributes",281],{"__ref":229},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",283,"internal",20,"expanded",21,"attributes",284],{"__ref":229},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",286,"internal",21,"expanded",21,"attributes",287],{"__ref":229},["null","__typename",23,"class",13],["null","__typename",5,"id",51,"name",52,"items",289],[290,292,294,296],{"__ref":291},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":293},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":295},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":297},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",112,"id",113,"name",114,"path",115,"status",20,"weight",116,"description",299,"langcode",300,"changed",301,"metatag",302],["null","__typename",118,"processed",119,"format",120],{"__ref":229},["null","__typename",83,"timestamp",123,"timezone",85,"offset",86,"time",124],[303,305,307],["null","__typename",93,"tag",94,"attributes",304],["null","__typename",96,"name",97,"content",128],["null","__typename",93,"tag",94,"attributes",306],["null","__typename",96,"name",131,"content",132],["null","__typename",100,"tag",101,"attributes",308],["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",138,"id",151,"name",152,"path",153,"weight",116],["null","__typename",138,"id",155,"name",156,"path",157,"weight",116],["null","__typename",138,"id",159,"name",160,"path",161,"weight",116],["null","__typename",138,"id",163,"name",164,"path",165,"weight",116],["null","__typename",138,"id",167,"name",168,"path",169,"weight",116],["null","__typename",175,"id",176,"myRole",177,"name",178,"nickname",179],["null","__typename",79,"id",80,"title",81,"changed",319,"created",320,"langcode",321,"path",90,"promote",21,"status",20,"sticky",21,"metatag",322,"category",329,"contentElements",13,"evergreen",13,"tags",331,"wpBody",348,"wpHeaderImage",13,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",173,"author",349],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":229},[323,325,327],["null","__typename",93,"tag",94,"attributes",324],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",326],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",328],["null","__typename",109,"property",110,"content",81],{"__ref":330},"TermCategories:8",[332,334,336,338,340,342,344,346],{"__ref":333},"TermTags:295",{"__ref":335},"TermTags:581",{"__ref":337},"TermTags:584",{"__ref":339},"TermTags:589",{"__ref":341},"TermTags:601",{"__ref":343},"TermTags:677",{"__ref":345},"TermTags:1077",{"__ref":347},"TermTags:1085",["null","__typename",171,"processed",172,"format",120,"summary",13],{"__ref":350},"User:23",["null","__typename",188,"id",189,"excludeFromScreenreader",13,"mediaImage",352,"name",198,"path",199,"status",20],["null","__typename",191,"url",192,"width",193,"height",194,"alt",195,"title",13,"size",196,"mime",197],["null","__typename",79,"id",183,"title",184,"path",185,"wpTeaserText",186,"wpPromotedTeaserImage",13,"wpHeaderImage",354],{"__ref":355},"MediaImage:3364",["null","__typename",188,"id",206,"excludeFromScreenreader",13,"mediaImage",357,"name",211,"path",212,"status",20],["null","__typename",191,"url",208,"width",193,"height",194,"alt",209,"title",13,"size",210,"mime",197],["null","__typename",79,"id",201,"title",202,"path",203,"wpTeaserText",204,"wpPromotedTeaserImage",13,"wpHeaderImage",359],{"__ref":360},"MediaImage:3355",["null","__typename",188,"id",218,"excludeFromScreenreader",21,"mediaImage",362,"name",223,"path",224,"status",20],["null","__typename",191,"url",220,"width",193,"height",194,"alt",221,"title",13,"size",222,"mime",197],["null","__typename",79,"id",214,"title",215,"path",216,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",364],{"__ref":365},"MediaImage:3303"]