[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":3,"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":39,"jFscpv7LS_Lf7Idvow7O7SvaBLYDStqs1DYGE21l9YE":75,"jiN_GCAuw801ZFEfpGVTRO7-Gk9OIiEbL1Um1x059yY":169,"_apollo:default":214},{"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":112,"postContentElements":13,"evergreen":13,"tags":137,"postWpBody":159,"wpHeaderImage":13,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":162,"author":163},"NodeWpPost","999","Das <picture>-Element",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1398415723,"UTC","+00:00","2014-04-25T08:48:43+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/das-picture-element",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","Das -Element | 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/das-picture-element","canonical",{"__typename":107,"tag":94,"attributes":108},"MetaTagProperty",{"__typename":109,"property":110,"content":111},"MetaTagPropertyAttributes","og:title","Das -Element",{"__typename":113,"id":114,"name":115,"path":116,"status":20,"weight":117,"description":118,"langcode":122,"changed":123,"metatag":126},"TermCategories","8","UX/UI Design","/kategorie/design",0,{"__typename":119,"processed":120,"format":121},"Text","Themen aus dem Bereich Design & User Experience","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":124,"timezone":85,"offset":86,"time":125},1713772777,"2024-04-22T07:59:37+00:00",[127,130,134],{"__typename":93,"tag":94,"attributes":128},{"__typename":96,"name":97,"content":129},"UX/UI Design | Liechtenecker UX Design Studio",{"__typename":93,"tag":94,"attributes":131},{"__typename":96,"name":132,"content":133},"description","Themen aus dem Bereich Design & User Experience",{"__typename":100,"tag":101,"attributes":135},{"__typename":103,"href":136,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/design",[138,143,147,151,155],{"__typename":139,"id":140,"name":141,"path":142,"weight":117},"TermTags","583","highres","/tag/highres",{"__typename":139,"id":144,"name":145,"path":146,"weight":117},"604","html5","/tag/html5",{"__typename":139,"id":148,"name":149,"path":150,"weight":117},"968","picture","/tag/picture",{"__typename":139,"id":152,"name":153,"path":154,"weight":117},"1075","responsive image","/tag/responsive-image",{"__typename":139,"id":156,"name":157,"path":158,"weight":117},"1076","responsive webdesign","/tag/responsive-webdesign",{"__typename":160,"processed":161,"format":121,"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\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2015/02/pictures_kreis-1.jpg?itok=C8elGQNY\" data-rel=\"lightbox-gallery-wLLaHQxn\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv alt=\"pictures_kreis\" data-entity-type=\"media\" data-entity-uuid=\"b8efd6cf-5845-4c57-82af-5d47149035dc\" 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/2015/02/pictures_kreis-1.jpg.webp?itok=K4ebutnA 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2015/02/pictures_kreis-1.jpg.webp?itok=sjyB5QHq 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2015/02/pictures_kreis-1.jpg.webp?itok=_F_Jnfvp 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2015/02/pictures_kreis-1.jpg.webp?itok=OGQ6yDko 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2015/02/pictures_kreis-1.jpg.webp?itok=DscxG8_g 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2015/02/pictures_kreis-1.jpg.webp?itok=89SvNyiA 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2015/02/pictures_kreis-1.jpg.webp?itok=QCuzn0uv 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2015/02/pictures_kreis-1.jpg.webp?itok=v_l1n1pb 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"480\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2015/02/pictures_kreis-1.jpg.webp?itok=viCwjZG_ 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/02/pictures_kreis-1.jpg.webp?itok=cAqeRk1a 2x\" type=\"image/webp\" width=\"500\" height=\"500\">\n                  \u003Cimg loading=\"lazy\" width=\"500\" height=\"500\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/02/pictures_kreis-1.jpg.jpg?itok=cAqeRk1a\" alt=\"pictures_kreis\" title=\"Das HTML Picture Element\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp>Vor wenigen Tagen wurde die Einigung über das HTML5 <picture>-Element bekannt. Damit ist eine langjährige Diskussion abgeschlossen und der Weg für „responsive“ Bilder frei. Warum dabei aber erst ein winziger Teil des Weges zurückgelegt ist und noch viele Herausforderungen warten, möchte ich in diesem Artikel behandeln.\u003Cbr>\n\u003C/p>\n\u003Ch2>Responsive Images?\u003C/h2>\n\u003Cp>Responsive Images werden seit langem als wichtige Ergänzung und Bestandteil des mittlerweile etabliertem „Responsive Webdesign“ gesehen.\u003Cbr>\nResponsive Images sollen dabei zwei Fliegen mit einer Klappe schlagen: Einerseits werden auf kleineren Devices Bilder auch nur in kleinerer Auflösung ausgeliefert, was vor allem bei Smartphones und Tablets zu einer starken Reduktion der Webseitengröße führen kann.\u003Cbr>\nAndererseits können auf diesen Geräten damit aber auch andere Bildausschnitte gewählt werden, um wichtige Bildelemente auch auf kleinen Bildschirmen nicht aus dem Fokus zu verlieren.\u003C/p>\n\u003Ch2>Das <picture>-Element\u003C/h2>\n\u003Cp>Seit längerem gibt es bereits viele Ideen, wie man das <img>-Element – mittlerweile auch schon \u003Ca href=\"http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html\" target=\"_blank\" rel=\"noopener noreferrer\">20 Jahre alt\u003C/a> – um eine dynamische Komponente erweitern könnte. Nachdem Developer und Browserhersteller lang über die Implementierung diskutierten, gibt es nun die \u003Ca href=\"http://picture.responsiveimages.org/\" target=\"_blank\" rel=\"noopener noreferrer\">ersten Drafts\u003C/a> dazu:\u003C/p>\n\u003Cpre><picture>\n    <source srcset=\"pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x\">\n    <img alt=\"A rad wolf\" src=\"pic1x.jpg\" width=\"500\" height=\"500\">\n</picture>\n\u003C/pre>\n\u003Cp>Das <picture>-Element ist vom Aufbau her mit dem HTML-5 <video>-Element vergleichbar. Im Element befindet sich ein Fallback auf ein Standardkonformes <img>-Element mit einer normal aufgelösten Version des Bildes. Zusätzlich dazu können beliebig viele source-Elemente eingefügt werden, die anhand bestimmter Faktoren (z.B. Auflösung oder Bildschirmgröße) das richtige Bild für das jeweilige Device in das <img>-Element laden.\u003Cbr>\nEin weiteres Beispiel für das neue picture-Element ist Folgendes:\u003C/p>\n\u003Cpre style=\"color: #000000;\"><picture>\n    <source media=\"(min-width: 45em)\" srcset=\"large.jpg\">\n    <source media=\"(min-width: 18em)\" srcset=\"med.jpg\">\n    <img src=\"small.jpg\" alt=\"The president giving an award.\">\n</picture>\u003C/pre>\n\u003Cp>Hier ist neben dem srcset-Attribut ebenfalls das media-Attribut vorhanden, das in ähnlicher Form auch bei Media Queries in CSS vorkommt. Dabei wird dem Browser mitgeteilt, ab welcher Bildschirmbreite welches Bild geladen werden soll.\u003C/p>\n\u003Ch2>Der lange Weg zur vollständigen Implementierung\u003C/h2>\n\u003Cp>Wie im Web üblich wird es noch lange dauern, bis das <picture>-Element voll einsatzfähig ist. Neben der vollständigen Unterstützung durch Browser (bis dahin gibt’s einen \u003Ca href=\"https://github.com/scottjehl/picturefill\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript-Polyfill\u003C/a>) wird es aber im Fall des <picture>-Elements noch eine weitere Hürde geben: Die Unterstützung durch Content-Management-Systeme. Um das Element wirklich sinnvoll einsetzen zu können, muss es in Zukunft auch Workflows und Möglichkeiten geben, verschieden aufgelöste Bilder mit gegebenenfalls unterschiedlichen Bildausschnitten im System zu hinterlegen.\u003Cbr>\nDas ist einerseits eine Herausforderung für die Entwickler der Systeme, die dafür eine einfache Möglichkeit schaffen müssen. Viel wichtiger ist aber noch, dass damit zusätzliche Verantwortung auf die Redakteure von Webseiten zukommt, weil diese in Zukunft auch vermehrt Zeit mit der Auswahl und Bearbeitung von Bildern in verschiedenen Formaten und Größen verbringen müssen.\u003Cbr>\nDas <picture>-Element ist ein wichtiger Schritt, um Websites in Zukunft dynamisch und maßgeschneidert auf das Device des Users anzupassen. Anders als bei anderen neuen HTML-Elementen, die hauptsächlich Ansprüche an die Entwickler von Seiten stellen, muss im Fall des <picture>-Elements aber auch Bewusstsein für den Sinn und Nutzen bei Personen geschaffen werden, die für die redaktionelle Befüllung von Webseiten verantwortlich sind.\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/das-picture-element/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Das <picture>-Element - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Vor wenigen Tagen wurde die Einigung über das HTML5 <picture>-Element bekannt. Damit ist eine langjährige Diskussion abgeschlossen und der Weg für „responsive“ Bilder frei. Warum dabei aber erst ein winziger Teil des Weges zurückgelegt ist und noch viele Herausforderungen warten, möchte ich in diesem Artikel behandeln. Responsive Images? Responsive Images werden seit langem als wichtige Ergänzung […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/das-picture-element/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2014-04-25T10:48:43+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://legacy.liechtenecker.dev/wp-content/uploads/2015/02/pictures_kreis-1-300x300.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=\"3 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/das-picture-element/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://legacy.liechtenecker.dev/wp-content/uploads/2015/02/pictures_kreis-1.jpg\",\"width\":500,\"height\":500,\"caption\":\"Das HTML Picture Element\"},{\"@type\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/das-picture-element/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/das-picture-element/\",\"name\":\"Das <picture>-Element - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://legacy.liechtenecker.dev/blog/das-picture-element/#primaryimage\"},\"datePublished\":\"2014-04-25T10:48:43+00:00\",\"dateModified\":\"2014-04-25T10:48:43+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/b24fd61d8a4acf49d8c56f320617f6ec\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/das-picture-element/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/b24fd61d8a4acf49d8c56f320617f6ec\",\"name\":\"Stephan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/#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":164,"id":165,"myRole":166,"name":167,"nickname":168},"User","23","langgedienter Frontend-Veteran","s-fletzberger","Stephan",{"latestKnowhow":170},[171,189,202],{"__typename":79,"id":172,"title":173,"path":174,"wpTeaserText":175,"wpPromotedTeaserImage":13,"wpHeaderImage":176},"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":177,"id":178,"excludeFromScreenreader":13,"mediaImage":179,"name":187,"path":188,"status":20},"MediaImage","3364",{"__typename":180,"url":181,"width":182,"height":183,"alt":184,"title":13,"size":185,"mime":186},"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":190,"title":191,"path":192,"wpTeaserText":193,"wpPromotedTeaserImage":13,"wpHeaderImage":194},"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":177,"id":195,"excludeFromScreenreader":13,"mediaImage":196,"name":200,"path":201,"status":20},"3355",{"__typename":180,"url":197,"width":182,"height":183,"alt":198,"title":13,"size":199,"mime":186},"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":203,"title":204,"path":205,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":206},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":177,"id":207,"excludeFromScreenreader":21,"mediaImage":208,"name":212,"path":213,"status":20},"3303",{"__typename":180,"url":209,"width":182,"height":183,"alt":210,"title":13,"size":211,"mime":186},"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":215,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":216,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":220,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":223,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":226,"Menu:footer":229,"ROOT_QUERY":239,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":255,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":258,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":261,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":264,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":267,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":270,"Menu:nuxt-main-menu":273,"TermCategories:8":287,"TermTags:583":298,"TermTags:604":299,"TermTags:968":300,"TermTags:1075":301,"TermTags:1076":302,"User:23":303,"NodeWpPost:999":304,"MediaImage:3364":331,"NodeWpPost:1619":333,"MediaImage:3355":336,"NodeWpPost:1616":338,"MediaImage:3303":341,"NodeWpPost:1606":343},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",217,"internal",20,"expanded",21,"attributes",219],{"__ref":218},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",221,"internal",20,"expanded",21,"attributes",222],{"__ref":218},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",224,"internal",20,"expanded",21,"attributes",225],{"__ref":218},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",227,"internal",21,"expanded",21,"attributes",228],{"__ref":218},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",230],[231,233,235,237],{"__ref":232},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":234},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":236},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":238},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",240,"menu({\"name\":\"FOOTER\"})",241,"menu({\"name\":\"NUXT_MAIN_MENU\"})",243,"route({\"path\":\"/blog/das-picture-element\"})",245,"latestKnowhow({\"excludeId\":\"999\",\"limit\":3})",248],"Query",{"__ref":242},"Menu:footer",{"__ref":244},"Menu:nuxt-main-menu",["null","__typename",77,"entity",246],{"__ref":247},"NodeWpPost:999",[249,251,253],{"__ref":250},"NodeWpPost:1619",{"__ref":252},"NodeWpPost:1616",{"__ref":254},"NodeWpPost:1606",["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",256,"internal",20,"expanded",21,"attributes",257],{"__ref":218},["null","__typename",23,"class",13],["null","__typename",10,"id",51,"title",52,"description",13,"url",53,"langcode",259,"internal",20,"expanded",21,"attributes",260],{"__ref":218},["null","__typename",23,"class",13],["null","__typename",10,"id",56,"title",57,"description",13,"url",58,"langcode",262,"internal",20,"expanded",21,"attributes",263],{"__ref":218},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",265,"internal",20,"expanded",21,"attributes",266],{"__ref":218},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",268,"internal",20,"expanded",21,"attributes",269],{"__ref":218},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",271,"internal",20,"expanded",21,"attributes",272],{"__ref":218},["null","__typename",23,"class",13],["null","__typename",5,"id",41,"name",42,"items",274],[275,277,279,281,283,285],{"__ref":276},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":278},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":280},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":282},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":284},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":286},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",113,"id",114,"name",115,"path",116,"status",20,"weight",117,"description",288,"langcode",289,"changed",290,"metatag",291],["null","__typename",119,"processed",120,"format",121],{"__ref":218},["null","__typename",83,"timestamp",124,"timezone",85,"offset",86,"time",125],[292,294,296],["null","__typename",93,"tag",94,"attributes",293],["null","__typename",96,"name",97,"content",129],["null","__typename",93,"tag",94,"attributes",295],["null","__typename",96,"name",132,"content",133],["null","__typename",100,"tag",101,"attributes",297],["null","__typename",103,"href",136,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",139,"id",140,"name",141,"path",142,"weight",117],["null","__typename",139,"id",144,"name",145,"path",146,"weight",117],["null","__typename",139,"id",148,"name",149,"path",150,"weight",117],["null","__typename",139,"id",152,"name",153,"path",154,"weight",117],["null","__typename",139,"id",156,"name",157,"path",158,"weight",117],["null","__typename",164,"id",165,"myRole",166,"name",167,"nickname",168],["null","__typename",79,"id",80,"title",81,"changed",305,"created",306,"langcode",307,"path",90,"promote",21,"status",20,"sticky",21,"metatag",308,"category",315,"contentElements",13,"evergreen",13,"tags",317,"wpBody",328,"wpHeaderImage",13,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",162,"author",329],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":218},[309,311,313],["null","__typename",93,"tag",94,"attributes",310],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",312],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",314],["null","__typename",109,"property",110,"content",111],{"__ref":316},"TermCategories:8",[318,320,322,324,326],{"__ref":319},"TermTags:583",{"__ref":321},"TermTags:604",{"__ref":323},"TermTags:968",{"__ref":325},"TermTags:1075",{"__ref":327},"TermTags:1076",["null","__typename",160,"processed",161,"format",121,"summary",13],{"__ref":330},"User:23",["null","__typename",177,"id",178,"excludeFromScreenreader",13,"mediaImage",332,"name",187,"path",188,"status",20],["null","__typename",180,"url",181,"width",182,"height",183,"alt",184,"title",13,"size",185,"mime",186],["null","__typename",79,"id",172,"title",173,"path",174,"wpTeaserText",175,"wpPromotedTeaserImage",13,"wpHeaderImage",334],{"__ref":335},"MediaImage:3364",["null","__typename",177,"id",195,"excludeFromScreenreader",13,"mediaImage",337,"name",200,"path",201,"status",20],["null","__typename",180,"url",197,"width",182,"height",183,"alt",198,"title",13,"size",199,"mime",186],["null","__typename",79,"id",190,"title",191,"path",192,"wpTeaserText",193,"wpPromotedTeaserImage",13,"wpHeaderImage",339],{"__ref":340},"MediaImage:3355",["null","__typename",177,"id",207,"excludeFromScreenreader",21,"mediaImage",342,"name",212,"path",213,"status",20],["null","__typename",180,"url",209,"width",182,"height",183,"alt",210,"title",13,"size",211,"mime",186],["null","__typename",79,"id",203,"title",204,"path",205,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",344],{"__ref":345},"MediaImage:3303"]