Schlagwort: Sustainability

A option for CO2 emission assessment of your website

VonWP-Loft 6. August 202314. März 2024

With this post I would like to give you an impulse how the possible collection and balancing of the CO2 emissions of your website could look like.
In my opinion, this is a good tool for you to include a part of your Scope 3 emissions in your sustainability report.

English | Sustainability

Sustainable WebDesign: Image optimization using new image formats

VonWP-Loft 27. Juli 202314. März 2024

This blogpost is also available in German. In February 2015, I had already written blogposts on the topic of “image optimization” here. There are now seven years between then and now. A long time in IT. Time for something new, time for new image formats. In the meantime, there are two new image formats that…

Cookie Consent mit Real Cookie Banner

.site-branding{max-height:inherit}.site-branding a.brand{display:flex;gap:1em;flex-direction:row;align-items:center;text-decoration:none;color:inherit;max-height:inherit}.site-branding a.brand img{display:block}@media screen and (max-width:1024px){.site-branding.branding-tablet-layout-standard-reverse a.brand{flex-direction:row-reverse}}@media screen and (max-width:719px){.site-branding.branding-mobile-layout-standard:not(.site-brand-logo-only) a.brand{flex-direction:row}}.header-navigation ul ul.sub-menu,.header-navigation ul ul.submenu{display:none;position:absolute;top:100%;flex-direction:column;background:#fff;margin-left:0;box-shadow:0 2px 13px rgb(0 0 0 / .1);z-index:1000}body:not(.hide-focus-outline) .header-navigation li.menu-item--has-toggle>a:focus .dropdown-nav-toggle{opacity:.2}.header-navigation ul ul.sub-menu>li:last-child,.header-navigation ul ul.submenu>li:last-child{border-bottom:0}.header-navigation ul ul.sub-menu.sub-menu-edge{left:auto;right:0}.header-navigation ul ul ul.sub-menu.sub-menu-edge{left:auto;right:100%}.header-navigation[class*="header-navigation-dropdown-animation-fade"] ul ul.sub-menu,.header-navigation[class*="header-navigation-dropdown-animation-fade"] ul ul.submenu{opacity:0;visibility:hidden;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);transition:all 0.2s ease;display:block;clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden}.header-navigation[class*="header-navigation-dropdown-animation-fade"] ul li:hover>ul,.header-navigation[class*="header-navigation-dropdown-animation-fade"] ul li.menu-item--toggled-on>ul,.header-navigation[class*="header-navigation-dropdown-animation-fade"] ul li:not(.menu-item--has-toggle):focus>ul{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);clip:auto;height:auto;overflow:visible}.wp-site-blocks .nav--toggle-sub .dropdown-nav-special-toggle{position:absolute!important;overflow:hidden;padding:0!important;margin:0!important;margin-right:-0.1em!important;border:0!important;width:.9em;top:0;bottom:0;height:auto;border-radius:0;box-shadow:none!important;background:transparent!important;display:block;left:auto;right:calc(1.4em / 2);pointer-events:none}.wp-site-blocks .nav--toggle-sub .sub-menu .dropdown-nav-special-toggle{width:2.6em;margin:0!important;right:0}.nav--toggle-sub .dropdown-nav-special-toggle:focus{z-index:10}.nav--toggle-sub .dropdown-nav-toggle{display:block;background:#fff0;position:absolute;right:0;top:50%;width:.7em;height:.7em;font-size:inherit;width:.9em;height:.9em;font-size:.9em;display:inline-flex;line-height:inherit;margin:0;padding:0;border:none;border-radius:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);overflow:visible;transition:opacity 0.2s ease}.nav--toggle-sub ul ul .dropdown-nav-toggle{right:.2em}.nav--toggle-sub ul ul .dropdown-nav-toggle .kadence-svg-iconset{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.nav--toggle-sub li.menu-item-has-children{position:relative}.nav-drop-title-wrap{position:relative;padding-right:1em;display:block}.nav--toggle-sub li:hover>ul,.nav--toggle-sub li.menu-item--toggled-on>ul,.nav--toggle-sub li:not(.menu-item--has-toggle):focus>ul{display:block}.nav--toggle-sub li:not(.menu-item--has-toggle):focus-within>ul{display:block}@media (hover:none){.wp-site-blocks .nav--toggle-sub .menu-item--has-toggle:not(.menu-item--toggled-on) .dropdown-nav-special-toggle{left:0;right:0!important;margin-right:0!important;width:100%;pointer-events:all}.wp-site-blocks .nav--toggle-sub .menu-item--has-toggle:not(.menu-item--toggled-on)>a{pointer-events:none}}.rtl .primary-menu-container>ul>li.menu-item .dropdown-nav-special-toggle{right:auto;left:calc(1.4em / 2)}.rtl .wp-site-blocks .nav--toggle-sub .sub-menu .dropdown-nav-special-toggle{left:0;right:auto}.wp-site-blocks .nav--toggle-sub .kadence-menu-mega-enabled .sub-menu .dropdown-nav-special-toggle{display:none}.header-navigation[class*="header-navigation-style-underline"] .header-menu-container>ul>li>a{position:relative}.header-navigation[class*="header-navigation-style-underline"] .header-menu-container>ul>li>a:after{content:'';width:100%;position:absolute;bottom:0;height:2px;right:50%;background:currentColor;-webkit-transform:scale(0,0) translate(-50%,0);transform:scale(0,0) translate(-50%,0);transition:color .0s ease-in-out,-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out,color .0s ease-in-out;transition:transform .2s ease-in-out,color .0s ease-in-out,-webkit-transform .2s ease-in-out}.header-navigation[class*="header-navigation-style-underline"] .header-menu-container>ul>li>a:hover:after{-webkit-transform:scale(1,1) translate(50%,0);transform:scale(1,1) translate(50%,0)}.header-navigation,.header-menu-container{display:flex}.header-navigation li.menu-item>a{display:block;width:100%;text-decoration:none;color:var(--global-palette4);transition:all .2s ease-in-out;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.header-navigation li.menu-item>a:hover,.header-navigation li.menu-item>a:focus{color:var(--global-palette-highlight)}.header-navigation ul.sub-menu,.header-navigation ul.submenu{display:block;list-style:none;margin:0;padding:0}.header-navigation ul li.menu-item>a{padding:.6em .5em}.header-navigation ul ul li.menu-item>a{padding:1em}.header-navigation ul ul li.menu-item>a{width:200px}.header-navigation ul ul ul.sub-menu,.header-navigation ul ul ul.submenu{top:0;left:100%;right:auto;min-height:100%}.header-navigation .menu{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;list-style:none;margin:0;padding:0}.menu-toggle-open{display:flex;background:#fff0;align-items:center;box-shadow:none}.menu-toggle-open .menu-toggle-icon{display:flex}.menu-toggle-open:hover,.menu-toggle-open:focus{border-color:currentColor;background:#fff0;box-shadow:none}.menu-toggle-open.menu-toggle-style-default{border:0}.wp-site-blocks .menu-toggle-open{box-shadow:none}.mobile-navigation{width:100%}.mobile-navigation a{display:block;width:100%;text-decoration:none;padding:.6em .5em}.mobile-navigation ul{display:block;list-style:none;margin:0;padding:0}.drawer-nav-drop-wrap{display:flex;position:relative}.drawer-nav-drop-wrap a{color:inherit}.drawer-nav-drop-wrap .drawer-sub-toggle{background:#fff0;color:inherit;padding:.5em .7em;display:flex;border:0;border-radius:0;box-shadow:none;line-height:normal}.drawer-nav-drop-wrap .drawer-sub-toggle[aria-expanded="true"] svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mobile-navigation ul ul{padding-left:1em;transition:all 0.2s ease-in-out}.mobile-navigation ul.has-collapse-sub-nav ul.sub-menu{display:none}body[class*='amp-mode-'] .mobile-navigation ul ul{display:block}.mobile-navigation ul ul ul ul ul ul{padding-left:0}.mobile-navigation ul.has-collapse-sub-nav .sub-menu.show-drawer{display:block}.popup-drawer{position:fixed;display:none;top:0;bottom:0;left:-99999rem;right:99999rem;transition:opacity 0.25s ease-in,left 0s 0.25s,right 0s 0.25s;z-index:100000}.popup-drawer .drawer-overlay{background-color:rgb(0 0 0 / .4);position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity 0.2s ease-in-out}.popup-drawer .drawer-inner{width:100%;-webkit-transform:translateX(100%);transform:translateX(100%);max-width:90%;right:0;top:0;overflow:auto;background:#090c10;color:#fff;bottom:0;opacity:0;position:fixed;box-shadow:0 0 2rem 0 rgb(0 0 0 / .1);display:flex;flex-direction:column;transition:opacity 0.25s cubic-bezier(.77,.2,.05,1),-webkit-transform 0.3s cubic-bezier(.77,.2,.05,1);transition:transform 0.3s cubic-bezier(.77,.2,.05,1),opacity 0.25s cubic-bezier(.77,.2,.05,1);transition:transform 0.3s cubic-bezier(.77,.2,.05,1),opacity 0.25s cubic-bezier(.77,.2,.05,1),-webkit-transform 0.3s cubic-bezier(.77,.2,.05,1)}.popup-drawer .drawer-header{padding:0 1.5em;display:flex;justify-content:flex-end;min-height:calc(1.2em + 24px)}.popup-drawer .drawer-header .drawer-toggle{background:#fff0;border:0;font-size:24px;line-height:1;padding:.6em .15em;color:inherit;display:flex;box-shadow:none;border-radius:0}.popup-drawer .drawer-header .drawer-toggle:hover{box-shadow:none}.popup-drawer .drawer-content{padding:0 1.5em 1.5em}@media screen and (max-width:1024px){.showing-popup-drawer-from-right.animate-body-popup #inner-wrap,.showing-popup-drawer-from-right.animate-body-popup #colophon,.showing-popup-drawer-from-right.animate-body-popup .site-header-row{-webkit-transform:translateX(-200px);transform:translateX(-200px)}}.popup-drawer-animation-scale.popup-drawer-layout-fullwidth.active .drawer-inner{-webkit-transform:scale(1);transform:scale(1)}.popup-drawer .drawer-header .drawer-toggle{width:1em;position:relative;height:1em;box-sizing:content-box;font-size:24px}.drawer-toggle .toggle-close-bar{width:.75em;height:.08em;background:currentColor;-webkit-transform-origin:center center;transform-origin:center center;position:absolute;margin-top:-.04em;opacity:0;border-radius:.08em;left:50%;margin-left:-.375em;top:50%;-webkit-transform:rotate(45deg) translateX(-50%);transform:rotate(45deg) translateX(-50%);transition:opacity 0.3s cubic-bezier(.77,.2,.05,1),-webkit-transform 0.3s cubic-bezier(.77,.2,.05,1);transition:transform 0.3s cubic-bezier(.77,.2,.05,1),opacity 0.3s cubic-bezier(.77,.2,.05,1);transition:transform 0.3s cubic-bezier(.77,.2,.05,1),opacity 0.3s cubic-bezier(.77,.2,.05,1),-webkit-transform 0.3s cubic-bezier(.77,.2,.05,1);transition-delay:0.2s}.drawer-toggle .toggle-close-bar:last-child{-webkit-transform:rotate(-45deg) translateX(50%);transform:rotate(-45deg) translateX(50%)}.popup-drawer.active .drawer-toggle .toggle-close-bar{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:1}.popup-drawer.active .drawer-toggle .toggle-close-bar:last-child{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:1}.popup-drawer .drawer-content.content-align-right{text-align:right}.popup-drawer .drawer-content.content-align-right .site-header-item{justify-content:flex-end}.popup-drawer-layout-fullwidth.popup-drawer-animation-slice.active .pop-portion-bg{-webkit-transform:translateX(0);transform:translateX(0)}.popup-drawer-layout-fullwidth.popup-drawer-animation-slice.active .drawer-content{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;transition:all 0.4s ease;transition-delay:0.2s}@media screen and (max-width:1024px){.popup-drawer-layout-sidepanel.popup-mobile-drawer-side-right .drawer-inner{-webkit-transform:translateX(100%);transform:translateX(100%);right:0;left:auto}}@media screen and (min-width:783px){body.admin-bar .popup-drawer{top:32px}}.popup-drawer.show-drawer{display:block}.popup-drawer.active{left:0;opacity:1;right:0;transition:opacity 0.25s ease-out}.popup-drawer.active .drawer-inner{opacity:1;-webkit-transform:translateX(0%);transform:translateX(0%)}.popup-drawer.active .drawer-overlay{opacity:1;cursor:pointer}body[class*="showing-popup-drawer-"]{overflow:hidden}#main-header{display:none}#masthead{position:relative;z-index:11}@media screen and (min-width:1025px){#main-header{display:block}#mobile-header{display:none}}.site-header-row{display:grid;grid-template-columns:auto auto}.site-header-upper-inner-wrap.child-is-fixed{display:flex;align-items:flex-end}.site-header-upper-inner-wrap.child-is-fixed .site-main-header-wrap{width:100%}@media screen and (max-width:719px){.site-header-focus-item.site-header-row-mobile-layout-contained{padding:0 1.5rem}}.site-header-section{display:flex;max-height:inherit}.site-header-item{display:flex;align-items:center;margin-right:10px;max-height:inherit}.site-header-section>.site-header-item:last-child{margin-right:0}.drawer-content .site-header-item{margin-right:0;margin-bottom:10px}.drawer-content .site-header-item:last-child{margin-bottom:0}.site-header-section-right{justify-content:flex-end}.search-toggle-open{display:flex;background:#fff0;align-items:center;padding:.5em;box-shadow:none}.search-toggle-open .search-toggle-icon{display:flex}.search-toggle-open .search-toggle-icon svg.kadence-svg-icon{top:-.05em;position:relative}.search-toggle-open:hover,.search-toggle-open:focus{border-color:currentColor;background:#fff0;box-shadow:none}.search-toggle-open.search-toggle-style-default{border:0}.popup-drawer-layout-fullwidth .drawer-inner{max-width:none;background:rgb(9 12 16 / .97);transition:opacity 0.2s ease-in,-webkit-transform 0s ease-in;transition:transform 0s ease-in,opacity 0.2s ease-in;transition:transform 0s ease-in,opacity 0.2s ease-in,-webkit-transform 0s ease-in}.popup-drawer-layout-fullwidth .drawer-inner .drawer-overlay{background-color:#fff0}#mobile-drawer.popup-drawer-layout-fullwidth.popup-drawer-animation-slice.pop-animated .drawer-inner{background:rgb(9 12 16 / .97)}#search-drawer .drawer-inner .drawer-header{position:relative;z-index:100}#search-drawer .drawer-inner .drawer-content{display:flex;justify-content:center;align-items:center;position:absolute;top:0;bottom:0;left:0;right:0;padding:2em}#search-drawer .drawer-inner form{max-width:800px;width:100%;margin:0 auto;display:flex}#search-drawer .drawer-inner form label{flex-grow:2}#search-drawer .drawer-inner form ::-webkit-input-placeholder{color:currentColor;opacity:.5}#search-drawer .drawer-inner form ::-moz-placeholder{color:currentColor;opacity:.5}#search-drawer .drawer-inner form :-ms-input-placeholder{color:currentColor;opacity:.5}#search-drawer .drawer-inner form :-moz-placeholder{color:currentColor;opacity:.5}#search-drawer .drawer-inner input.search-field{width:100%;background:#fff0;color:var(--global-palette6);padding:.8em 80px .8em .8em;font-size:20px;border:1px solid currentColor}#search-drawer .drawer-inner input.search-field:focus{color:#fff;box-shadow:5px 5px 0 0 currentColor}#search-drawer .drawer-inner .search-submit[type="submit"]{width:70px}#search-drawer .drawer-inner .kadence-search-icon-wrap{color:var(--global-palette6);width:70px}#search-drawer .drawer-inner .search-submit[type="submit"]:hover~.kadence-search-icon-wrap{color:#fff}#search-drawer .drawer-inner button[type="submit"]:hover~.kadence-search-icon-wrap{color:#fff}.site-header-upper-inner-wrap.child-is-fixed .site-top-header-wrap:not(.item-is-fixed){align-self:flex-start;flex-grow:1}.item-is-fixed{position:fixed;left:0;right:0;z-index:1200}.kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-branding a.brand.has-sticky-logo img.kadence-sticky-logo{display:block}.kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-branding a.brand.has-sticky-logo img{display:none}.kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-branding a.brand img:not(.svg-logo-image){width:auto}.kadence-sticky-header.item-is-fixed:not(.item-at-start)[data-shrink="true"] .site-branding a.brand picture img{max-height:inherit}#mobile-drawer{z-index:99999}#mobile-header .mobile-navigation>.mobile-menu-container.drawer-menu-container>ul.menu{display:flex;flex-wrap:wrap}#mobile-header .mobile-navigation:not(.drawer-navigation-parent-toggle-true) ul li.menu-item-has-children .drawer-nav-drop-wrap button{border:0}#mobile-header .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap,#mobile-header .mobile-navigation ul li:not(.menu-item-has-children) a{border:0}