Add modern File Types like JPEG 2000, JPEG XR and

<!DOCTYPE html> <html lang="en"> <head> <script> window.overrideAssetHost = "https://wishlist.webflow.com/assets/"; </script> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html charset=UTF-8" /> <meta name="publishing" content="true"> <title>Add modern File Types like JPEG 2000, JPEG XR and | Webflow Wishlist</title> <script type="text/javascript"> window.ahaLoaded = false; window.portalAssets = {"js":["/assets/runtime-v2-554eb6896f6092afea8b2ff05c0457d6.js","/assets/vendor-v2-ecc3538b1cfd2f7d2eb977e08fd35670.js","/assets/idea_portals-v2-d8f69ffc5c1dab7d349d1078b3036a63.js","/assets/idea_portals-v2-99f1b637199c09d347e67a5e19628fe0.css"]}; </script> <script> window.sentryRelease = window.sentryRelease || "d1f43bcd2e"; </script> <link rel="stylesheet" href="https://wishlist.webflow.com/assets/idea_portals-v2-99f1b637199c09d347e67a5e19628fe0.css" data-turbolinks-track="true" media="all" /> <script src="https://wishlist.webflow.com/assets/runtime-v2-554eb6896f6092afea8b2ff05c0457d6.js" data-turbolinks-track="true"></script> <script src="https://wishlist.webflow.com/assets/vendor-v2-ecc3538b1cfd2f7d2eb977e08fd35670.js" data-turbolinks-track="true"></script> <script src="https://wishlist.webflow.com/assets/idea_portals-v2-d8f69ffc5c1dab7d349d1078b3036a63.js" data-turbolinks-track="true"></script> <script src="https://cdn.aha.io/assets/aha_web_components-v2-d9e086d8c41ea401bc44631b1d32caf9.js" crossorigin="anonymous" data-turbolinks-track="true"></script> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="zS8-KwlinCqUZblvHefX4U6P5EoiNTkCR2qw_AcIzWMQC2fNfN-LhYaafPEkPrCk7PiNxD1JLZspRk2PHKWDjQ" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="locale" content="en" /> <meta name="portal-token" content="b38946d845e1f3724a02b763dc95e094" /> <meta name="idea-portal-id" content="6358181848082153567" /> <link rel="icon" href="https://wishlist.webflow.com/portal-favicon.png?1720031930&size=thumb16" /> </head> <body class="ideas-portal public"> <style> /* ################################################### */ /* ################################################### */ /* STYLE OVERRIDES START */ /* ################################################### */ /* ################################################### */ /* ------------------------------------- */ /* FONTS */ /* ------------------------------------- */ @font-face { font-family: 'Graphik'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-Regular-Web.5a0c1a002e.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-Regular-Web.5e78809d4d.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-Regular-Web.9806bc37bf.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Graphik'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-RegularItalic-Web.7c44c9e817.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-RegularItalic-Web.a9b91de662.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-RegularItalic-Web.c3aa8858b8.woff') format('woff'); font-weight: 400; font-style: italic; } @font-face { font-family: 'Graphik'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-Medium-Web.abf6e1188f.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-Medium-Web.2523d1a466.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-Medium-Web.4327644773.woff') format('woff'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Graphik'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-MediumItalic-Web.1d15660caf.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-MediumItalic-Web.e843973a9c.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-MediumItalic-Web.1e7e99e909.woff') format('woff'); font-weight: 500; font-style: italic; } @font-face { font-family: 'Akkurat'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-light.7c6a95bf96.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-light.8fd1f76d6f.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-light.1ce95fd3b4.woff') format('woff'); font-weight: 200; font-style: normal; } @font-face { font-family: 'Akkurat'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-lightitalic.f5dd588863.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-lightitalic.52d6cd625f.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-lightitalic.ce93d14c9c.woff') format('woff'); font-weight: 200; font-style: italic; } /* Akkurat */ @font-face { font-family: 'Akkurat'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-regular.29e757590a.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-regular.3ec7f3d6d1.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-regular.f00a7952f3.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Akkurat'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-italic.1b7b4e1809.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-italic.7825dadd40.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-italic.996bcdfe8d.woff') format('woff'); font-weight: 400; font-style: italic; } @font-face { font-family: 'Akkurat'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-bold.98b3f0b5cf.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-bold.06a424d24a.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-bold.0d13cf93e7.woff') format('woff'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Akkurat'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-bolditalic.9394657766.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-bolditalic.32a978d0ea.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-bolditalic.a66dd68440.woff') format('woff'); font-weight: 700; font-style: italic; } @font-face { font-family: 'icomoon'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/wishlist-icons/icomoon.365159169d.eot'); src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/wishlist-icons/icomoon.365159169d.eot#iefix') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/wishlist-icons/icomoon.dfe38b8d08.ttf') format('truetype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/wishlist-icons/icomoon.7d8d1b7967.woff') format('woff'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/wishlist-icons/icomoon.7bd7c854a5.svg') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-arrows-16px-1_tail-left:before { font-family: 'icomoon' !important; content: "\e900"; font-size: 16px; } .icon-arrows-16px-2_corner-left-round:before { font-family: 'icomoon' !important; content: "\e901"; font-size: 16px; } .icon-arrows-16px-2_log-out:before { font-family: 'icomoon' !important; content: "\e902"; font-size: 16px; } .icon-arrows-16px-4_logout:before { font-family: 'icomoon' !important; content: "\e903"; font-size: 16px; } .icon-signout:before { font-family: 'icomoon' !important; content: "\e902"; font-size: 16px; } .icon-chevron-right:before, .icon-chevron-down:before { font-size: 11px; vertical-align: middle; } .icon-arrows-24px-outline-1_tail-right:before { font-family: 'icomoon' !important; content: "\e904"; font-size: 24px; } .icon-arrows-24px-outline-1_tail-triangle-right:before { font-family: 'icomoon' !important; content: "\e905"; font-size: 24px; } .icon-shopping-16px-2_customer-support-outline:before { font-family: 'icomoon' !important; content: "\e906"; font-size: 16px; } .icon-shopping-16px-2_customer-support:before { font-family: 'icomoon' !important; content: "\e907"; font-size: 16px; } .icon-text-16px_bold:before { font-family: 'icomoon' !important; content: "\e908"; font-size: 16px; } .icon-text-16px_italic:before { font-family: 'icomoon' !important; content: "\e909"; font-size: 16px; } .icon-remove-sign:before { content: "\f057"; } .icon-text-16px_list-bullet:before { font-family: 'icomoon' !important; content: "\e90a"; font-size: 16px; } .icon-text-16px_list-numbers:before { font-family: 'icomoon' !important; content: "\e90b"; font-size: 16px; } .icon-text-editor-16pxArtboard-2:before { font-family: 'icomoon' !important; content: "\e90c"; font-size: 16px; } .mce-i-bold:before { font-family: 'icomoon' !important; content: "\e90c"; font-size: 16px; } .icon-text-editor-16pxArtboard-3:before { font-family: 'icomoon' !important; content: "\e90d"; font-size: 16px; } .mce-i-italic:before { font-family: 'icomoon' !important; content: "\e90d"; font-size: 16px; } .icon-text-editor-16pxArtboard-4:before { font-family: 'icomoon' !important; content: "\e90e"; font-size: 16px; } .mce-i-bullist:before { font-family: 'icomoon' !important; content: "\e90e"; font-size: 16px; } .icon-text-editor-16pxArtboard-5:before { font-family: 'icomoon' !important; content: "\e90f"; font-size: 16px; } .mce-i-numlist:before { font-family: 'icomoon' !important; content: "\e90f"; font-size: 16px; } .icon-text-editor-16pxArtboard-6:before { font-family: 'icomoon' !important; content: "\e910"; font-size: 16px; } .mce-i-link:before { font-family: 'icomoon' !important; content: "\e910"; font-size: 16px; } .icon-ui-10px-zoom:before { font-family: 'icomoon' !important; content: "\e911"; font-size: 10px; } .icon-ui-16px-1_attach-87:before { font-family: 'icomoon' !important; content: "\e912"; font-size: 16px; } .icon-paper-clip:before { font-family: 'icomoon' !important; content: "\e912"; font-size: 14px; vertical-align: bottom; } .icon-ui-16px-1_check:before { font-family: 'icomoon' !important; content: "\e913"; font-size: 16px; } .icon-ui-16px-1_eye-19:before { font-family: 'icomoon' !important; content: "\e914"; font-size: 16px; } .icon-eye-open:before { font-family: 'icomoon' !important; content: "\e914"; font-size: 14px; } .icon-ui-16px-1_eye-ban-20:before { font-family: 'icomoon' !important; content: "\e915"; font-size: 16px; } .icon-eye-close:before { font-family: 'icomoon' !important; content: "\e915"; font-size: 14px; } .icon-ui-16px-1_home-51:before { font-family: 'icomoon' !important; content: "\e916"; font-size: 16px; } .icon-ui-16px-1_home-simple:before { font-family: 'icomoon' !important; content: "\e917"; font-size: 16px; } .icon-home:before { font-family: 'icomoon' !important; content: "\e917"; font-size: 16px; } .icon-ui-16px-1_pencil:before { font-family: 'icomoon' !important; content: "\e918"; font-size: 16px; } .icon-pencil:before { font-family: 'icomoon' !important; content: "\e918"; font-size: 14px; margin-top: -3px; display: inline-block; } .icon-ui-16px-1_preferences-circle:before { font-family: 'icomoon' !important; content: "\e919"; font-size: 16px; } .icon-ui-16px-1_settings-gear-63:before { font-family: 'icomoon' !important; content: "\e91a"; font-size: 16px; } .icon-wrench:before { font-family: 'icomoon' !important; content: "\e91a"; font-size: 16px; } .icon-ui-16px-1_simple-remove:before { font-family: 'icomoon' !important; content: "\e91b"; font-size: 16px; } .icon-ui-16px-1_zoom-2:before { font-family: 'icomoon' !important; content: "\e91c"; font-size: 16px; } .icon-ui-16px-1_zoom:before { font-family: 'icomoon' !important; content: "\e91d"; font-size: 16px; } .icon-ui-16px-2_chat-round-content:before { font-family: 'icomoon' !important; content: "\e91e"; font-size: 16px; } .icon-ui-16px-2_link-69:before { font-family: 'icomoon' !important; content: "\e91f"; font-size: 16px; } .icon-ui-16px-3_chat-33:before { font-family: 'icomoon' !important; content: "\e920"; font-size: 16px; } .icon-ui-16px-3_chat-45-outline:before { font-family: 'icomoon' !important; content: "\e921"; font-size: 16px; } .icon-ui-16px-3_chat-45:before { font-family: 'icomoon' !important; content: "\e922"; font-size: 16px; } .icon-ui-16px-3_chat-46:before { font-family: 'icomoon' !important; content: "\e923"; font-size: 16px; } .icon-ui-16px-3_chat-47:before { font-family: 'icomoon' !important; content: "\e924"; font-size: 16px; } .icon-comments:before { font-family: 'icomoon' !important; content: "\e923"; font-size: 16px; } .icon-ui-24px-outline-1_check-circle-08:before { font-family: 'icomoon' !important; content: "\e925"; font-size: 24px; } .icon-ui-24px-outline-1_circle-remove:before { font-family: 'icomoon' !important; content: "\e926"; font-size: 24px; } .icon-ui-24px-outline-1_eye-19:before { font-family: 'icomoon' !important; content: "\e927"; font-size: 24px; } .icon-ui-24px-outline-2_alert-circle-explaim:before { font-family: 'icomoon' !important; content: "\e928"; font-size: 24px; } .icon-ui-24px-outline-2_alert-circle-i:before { font-family: 'icomoon' !important; content: "\e929"; font-size: 24px; } .icon-ui-24px-outline-2_alert-circle-question:before { font-family: 'icomoon' !important; content: "\e92a"; font-size: 24px; } .icon-ui-24px-outline-3_alert:before { font-family: 'icomoon' !important; content: "\e92b"; font-size: 24px; } .icon-users-24px-outline_circle-10:before { font-family: 'icomoon' !important; content: "\e92c"; font-size: 24px; } .icon-users-32px-outline_circle-08NO:before { font-family: 'icomoon' !important; content: "\e92d"; font-size: 32px; } /* ##################################### */ /* Webflow Navbar and Dropdown Default Styles */ /* ##################################### */ @font-face { font-family: 'webflow-icons'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6SAy0AAAC8AAAAYGNtYXAaVcxaAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5ZgscV1gAAAFwAAABhGhlYWQCkFKvAAAC9AAAADZoaGVhB0MDyQAAAywAAAAkaG10eBIAA10AAANQAAAAIGxvY2EBMADyAAADcAAAABJtYXhwAAwATQAAA4QAAAAgbmFtZWTuiIAAAAOkAAABe3Bvc3QAAwAAAAAFIAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAwPA/8D/wAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYD//3//wAAAAAAIOYA//3//wAB/+MaBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQEgAAADIAOAAAUAAAkBBwkBFwMg/kBAAYD+gEABwAHAQP6A/oBAAAEA4AAAAuADgAAFAAATARcJAQfgAcBA/oABgEABwAHAQP6A/oBAAAADAMAA4ANAAsAAGAAxAEoAAAEhIg4CHQEUHgIzITI+Aj0BNC4CIxUhIg4CHQEUHgIzITI+Aj0BNC4CIxUhIg4CHQEUHgIzITI+Aj0BNC4CIwMg/cAHCwkFBQkLBwJABwsJBQUJCwf9wAcLCQUFCQsHAkAHCwkFBQkLB/3ABwsJBQUJCwcCQAcLCQUFCQsHAsAFCQsHIAcLCQUFCQsHIAcLCQXABQkLByAHCwkFBQkLByAHCwkFwAUJCwcgBwsJBQUJCwcgBwsJBQAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFFv+egGGAAAAAAEAAAABAADSLAJOXw889QALBAAAAAAAz/iHGQAAAADP+IcZAAAAAAOBA4AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA4EAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAACAAAABAABIAQAAOAEAADABAAAnQAAAAAACgAUAB4AMgBGAKwAwgAAAAEAAAAIAEsAAwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAaAAAAAQAAAAAAAgAOAHEAAQAAAAAAAwAaADAAAQAAAAAABAAaAH8AAQAAAAAABQAWABoAAQAAAAAABgANAEoAAQAAAAAACgA0AJkAAwABBAkAAQAaAAAAAwABBAkAAgAOAHEAAwABBAkAAwAaADAAAwABBAkABAAaAH8AAwABBAkABQAWABoAAwABBAkABgAaAFcAAwABBAkACgA0AJkAdwBlAGIAZgBsAG8AdwAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAdwBlAGIAZgBsAG8AdwAtAGkAYwBvAG4Ac3dlYmZsb3ctaWNvbnMAdwBlAGIAZgBsAG8AdwAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHMARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVcAAoAAAAABRQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAZMAAAGTuzUomU9TLzIAAAKIAAAAYAAAAGAOkgMtY21hcAAAAugAAABMAAAATBpVzFpnYXNwAAADNAAAAAgAAAAIAAAAEGhlYWQAAAM8AAAANgAAADYCkFKvaGhlYQAAA3QAAAAkAAAAJAdDA8lobXR4AAADmAAAACAAAAAgEgADXW1heHAAAAO4AAAABgAAAAYACFAAbmFtZQAAA8AAAAF7AAABe2TuiIBwb3N0AAAFPAAAACAAAAAgAAMAAAEABAQAAQEBDndlYmZsb3ctaWNvbnMAAQIAAQA6+BwC+BsD+BgEHgoACXf/i4seCgAJd/+LiwwHi0v6lPpUBR0AAACaDx0AAACfER0AAAAJHQAAAYoSAAkBAQ4bHR8iJywxNndlYmZsb3ctaWNvbnN3ZWJmbG93LWljb25zdTB1MXUyMHVFNjAwdUU2MDF1RTYwMnVFNjAzAAACAYkABgAIAQEEBwoNJDvH4P6UDv6UDv6UDvyUDvm0+FQV/FT4VEtL+BT8FPwU/BTLSwUO93T4VBX4VPhUy0v8FPwU+BT8FEtLBQ75tPlUFfzUiwV5i319i3kIi2sFi3mZfZ2LCPjUiwWdi5mZi50Ii6sFi519mXmLCIv7VBX81IsFeYt9fYt5CItrBYt5mX2diwj41IsFnYuZmYudCIurBYudfZl5iwiL+1QV/NSLBXmLfX2LeQiLawWLeZl9nYsI+NSLBZ2LmZmLnQiLqwWLnX2ZeYsIDvm4+SkV+6n7qvuq96ovLvgG/Bj4BvgYBQ76lBT6lBWLDAoAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA5gMDwP/A/8ADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDmA//9//8AAAAAACDmAP/9//8AAf/jGgQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAC1pQTjXw889QALBAAAAAAAz/iHGQAAAADP+IcZAAAAAAOBA4AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA4EAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAACAAAABAABIAQAAOAEAADABAAAnQAAUAAACAAAAAAADgCuAAEAAAAAAAEAGgAAAAEAAAAAAAIADgBxAAEAAAAAAAMAGgAwAAEAAAAAAAQAGgB/AAEAAAAAAAUAFgAaAAEAAAAAAAYADQBKAAEAAAAAAAoANACZAAMAAQQJAAEAGgAAAAMAAQQJAAIADgBxAAMAAQQJAAMAGgAwAAMAAQQJAAQAGgB/AAMAAQQJAAUAFgAaAAMAAQQJAAYAGgBXAAMAAQQJAAoANACZAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHMAVgBlAHIAcwBpAG8AbgAgADEALgAwAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHN3ZWJmbG93LWljb25zAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHMAUgBlAGcAdQBsAGEAcgB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff'); font-weight: normal; font-style: normal; } [class^="w-icon-"], [class*=" w-icon-"] { font-family: 'webflow-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .w-icon-nav-menu:before { content: "\e602"; } .w-icon-arrow-down:before, .w-icon-dropdown-toggle:before { content: "\e603"; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .w-clearfix:before, .w-clearfix:after { content: " "; display: table; } .w-clearfix:after { clear: both; } /* Container */ .w-container { margin-left: auto; margin-right: auto; max-width: 1110px; } .w-container:before, .w-container:after { content: " "; display: table; } .w-container:after { clear: both; } @media screen and (max-width: 1139px) { .w-container { max-width: 990px; } } @media screen and (max-width: 1025px) { .w-container { max-width: none; padding-left: 12px; padding-right: 12px; } } /* Dropdown */ .w-nav { position: relative; background: #dddddd; z-index: 1000; } .w-nav:before, .w-nav:after { content: " "; display: table; } .w-nav:after { clear: both; } .w-nav-brand { position: relative; float: left; text-decoration: none; color: #333333; } .w-nav-brand:hover { text-decoration: none; color: #333333; } .w-nav-link { position: relative; display: inline-block; vertical-align: top; text-decoration: none; color: #222222; padding: 20px; text-align: left; margin-left: auto; margin-right: auto; } .w-nav-link:hover { text-decoration: none; color: #222222; } .w-nav-link.w--current { color: #0082f3; } .w-nav-menu { position: relative; float: right; } .w--nav-menu-open { display: block !important; position: absolute; top: 100%; left: 0; right: 0; background: #c8c8c8; text-align: center; overflow: visible; min-width: 200px; } .w--nav-link-open { display: block; position: relative; } .w-nav-overlay { position: absolute; overflow: hidden; display: none; top: 100%; left: 0; right: 0; width: 100%; } .w-nav-overlay .w--nav-menu-open { top: 0; } .w-nav[data-animation="over-left"] .w-nav-overlay { width: auto; } .w-nav[data-animation="over-left"] .w-nav-overlay, .w-nav[data-animation="over-left"] .w--nav-menu-open { right: auto; z-index: 1; top: 0; } .w-nav[data-animation="over-right"] .w-nav-overlay { width: auto; } .w-nav[data-animation="over-right"] .w-nav-overlay, .w-nav[data-animation="over-right"] .w--nav-menu-open { left: auto; z-index: 1; top: 0; } .w-nav-button { position: relative; float: right; padding: 18px; font-size: 24px; display: none; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .w-nav-button.w--open { background-color: #c8c8c8; color: white; } .w-nav[data-collapse="all"] .w-nav-menu { display: none; } .w-nav[data-collapse="all"] .w-nav-button { display: block; } .collapse{ overflow: visible; } @media screen and (max-width: 780px) { .w-nav[data-collapse="medium"] .w-nav-menu { display: block; } .w-nav[data-collapse="medium"] .w-nav-button { display: block; } } @media screen and (max-width: 779px) { .w-nav[data-collapse="small"] .w-nav-menu { display: none; } .w-nav[data-collapse="small"] .w-nav-button { display: block; } } /* Dropdown */ .w-dropdown { display: inline-block; position: relative; text-align: left; margin-left: auto; margin-right: auto; z-index: 900; } .w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link { position: relative; vertical-align: top; text-decoration: none; color: #222222; padding: 20px; text-align: left; margin-left: auto; margin-right: auto; white-space: nowrap; } .w-dropdown-toggle { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: inline-block; cursor: pointer; padding-right: 40px; } .w-dropdown-toggle:focus { outline: 0; } .w-icon-dropdown-toggle { position: absolute; top: 0; right: 0; bottom: 0; margin: auto; margin-right: 20px; width: 1em; height: 1em; } .w-dropdown-list { position: absolute; background: #dddddd; display: none; min-width: 100%; } .w-dropdown-list.w--open { display: block; } .w-dropdown-link { padding: 10px 20px; display: block; color: #222222; } .w-dropdown-link.w--current { color: #0082f3; } .w-nav[data-collapse="all"] .w-dropdown, .w-nav[data-collapse="all"] .w-dropdown-toggle { display: block; } .w-nav[data-collapse="all"] .w-dropdown-list { position: static; } @media screen and (max-width: 991px) { .w-nav[data-collapse="medium"] .w-dropdown, .w-nav[data-collapse="medium"] .w-dropdown-toggle { display: block; } .w-nav[data-collapse="medium"] .w-dropdown-list { position: static; } } @media screen and (max-width: 767px) { .w-nav[data-collapse="small"] .w-dropdown, .w-nav[data-collapse="small"] .w-dropdown-toggle { display: block; } .w-nav[data-collapse="small"] .w-dropdown-list { position: static; } .w-nav-brand { padding-left: 10px; } } @media screen and (max-width: 479px) { .w-nav[data-collapse="tiny"] .w-dropdown, .w-nav[data-collapse="tiny"] .w-dropdown-toggle { display: block; } .w-nav[data-collapse="tiny"] .w-dropdown-list { position: static; } } /* ##################################### */ /* Navbar Custom Styles */ /* ##################################### */ .navbar { background-color: #000; font-size: 13px; font-family: "Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif; -webkit-font-smoothing: antialiased; margin-bottom: 50px; } .navlink { margin-top: 13px; margin-bottom: 13px; padding: 12px 17px; opacity: 0.5; -webkit-transition: opacity 50ms ease; transition: opacity 50ms ease; color: #fff; font-size: 15px; line-height: 20px; font-weight: 500; } .navlink:hover { opacity: 1; color: #fff; } .portalname { padding-left: 10px; float: left; color: #fff; font-size: 20px; line-height: 27px; } .logoimage { margin-top: 2px; float: left; } .navlink.w--current { opacity: 1; } .navlink.currentnavlink { opacity: 1; } .nav-menu { padding-top: 0px; padding-bottom: 0px; padding-left: 10px; } .menubutton { color: #fff; } .logo { margin-top: 14px; padding-top: 7px; padding-bottom: 7px; -webkit-transition: color 50ms ease, opacity 50ms ease; transition: color 50ms ease, opacity 50ms ease; } .logo:hover { opacity: 0.65; } .navdropdown { margin-top: 13px; margin-bottom: 13px; padding: 12px 22px 12px 17px; opacity: 0.5; -webkit-transition: opacity 50ms ease; transition: opacity 50ms ease; color: #fff; font-size: 15px; line-height: 20px; font-weight: 500; } .navdropdown:hover { opacity: 1; } .navdropdownicon { margin-right: 0px; } .dropdownmenu.w--open { margin-top: -4px; padding-top: 7px; padding-bottom: 7px; border-radius: 3px; background-color: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .17); } .dropdownmenulink { min-width: 130px; padding: 8px 12px; font-size: 15px; font-weight: 500; } .dropdownmenulink:hover { background-color: #eef0f3; } /*@media (max-width: 1110px) { .customcontainer { padding-right: 10px; padding-left: 10px; } }*/ @media (max-width: 991px) { .navlink { padding-right: 14px; padding-left: 14px; } /* .customcontainer { max-width: 738px; }*/ } @media (max-width: 767px) { .navlink { margin-top: 5px; margin-bottom: 5px; padding: 10px 20px; font-size: 14px; } .nav-menu { display: block; overflow: hidden; width: 100%; height: auto; margin-top: 0px; margin-right: auto; margin-left: auto; padding-top: 0px; padding-bottom: 30px; padding-left: 0px; border-radius: 0px; background-color: #000; } .logo { margin-top: 9px; padding-left: 0px; } .portalname { font-size: 20px; } .logoimage { width: 82px; } .menubutton { padding-right: 0px; } .menubutton.w--open { background-color: transparent; } .navcontainer { padding-right: 20px; padding-left: 20px; } .navdropdown { margin-top: 5px; margin-bottom: 5px; padding: 10px 20px; } .navdropdownicon { position: static; display: inline-block; } .dropdownmenu.w--open { display: block; margin-top: 0px; padding-top: 0px; padding-bottom: 0px; background-color: transparent; } .dropdownmenulink { margin-top: 5px; margin-bottom: 5px; padding-left: 31px; opacity: 0.5; color: #fff; } .dropdownmenulink:hover { background-color: transparent; opacity: 1; color: #fff; } .navdropdowntext { display: inline-block; margin-right: 8px; } /*.customcontainer { max-width: 100%; margin-right: 20px; margin-left: 20px; padding-right: 0px; padding-left: 0px; }*/ } @media (max-width: 479px) { .logo { width: auto; } } /* ------------------------------------- */ /* DEFAULT STYLES OVERRIDES */ /* ------------------------------------- */ body { font-family: -apple-system,BlinkMacSystemFont,"Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif; color: rgba(33, 41, 51, 1); /* Default text color */ } /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;*/ h1,h2 { font-family: "Akkurat",-apple-system,BlinkMacSystemFont,"Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif; color: rgba(33, 41, 51, 1); /* Default text color */ } h3,h4,h5,h6 { font-family: -apple-system,BlinkMacSystemFont,"Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif; color: rgba(33, 41, 51, 1); /* Default text color */ } h1 { font-weight: 300; font-size: 40px; line-height: 130%; margin-top: 0; letter-spacing: -0.6px; } h3 { font-size: 22px; line-height: 1.2; margin-bottom: 11px; font-weight: 400; letter-spacing: .4px; margin-top: -5px; } p, li, aside.quote { color: rgba(33, 41, 51, 1); /* Default text color */ } a { color: #146EF4; /* primary-blue */ } a:hover, a:focus { /*color: #146EF4;*/ /* primary-blue */ color: rgba(33, 41, 51, 1); /* Default text color */ text-decoration: none; } .subnav-section { padding: 22px 0 20px; background: #F7F8FA; margin-bottom: 28px; border-bottom: 1px solid rgba(30, 42, 73, 0.06); /* UI black */ line-height: 1px; } .portal-nav { margin-bottom: 12px; } .portal-sidebar .add-idea-button { margin-bottom: 0; } .filters { margin: 0px 0px 20px 0; } .filters .filter { font-size: 14px; transition: background-color 100ms ease; } .filters .filter strong { font-weight: 400; } .filters .filter:hover { background-color: rgba(20, 110, 244, 0.10); /* primary-blue */ color: rgba(58, 76, 211, 1); /* primary-blue darker */ } .filters .filter span { color: rgba(30, 42, 73, 0.4); } .filters .filter:hover span { color: rgba(30, 42, 73, 0.8); } .filters .filter:focus { text-decoration: none; } .filters .filter.active { background-color: rgba(33, 41, 51, 1); /* black */ } .filters .filter.active:hover { background-color: rgba(33, 41, 51, 1); /* black */ color: white; } .filters .filter.active .close { color: transparent; text-shadow: none; } .filters .filter.active .close:before { font-family: 'icomoon' !important; content: "\e911"; font-size: 10px; color:white !important; text-shadow: none; margin-right: -10px; } .filters .filter.active:hover { background-color: rgba(33, 41, 51, 0.8); } .filters .filter .category-collapser { width: 11px; text-align: left; } .portal-sidebar h4 { margin-bottom: 3px; font-size: 12px; font-weight: 500; } /* idea note */ .idea-count-description { border-radius: 3px; padding: 17px 17px 10px; background: #f7f8fa; margin: 20px 0 10px; border: 1px solid rgba(30, 42, 73, 0.06); } .idea-count-description p { color: rgba(33, 41, 51, 0.6); } .idea-count-description strong { color: rgba(33, 41, 51, 1); } .idea-count-description strong.endorsements_used_text { color: rgba(29, 190, 126, 1); } .idea-count-description hr { display: none; } /* Vote Button */ .btn-vote { width: 70px; border: none; background-color: white; text-decoration: none; border-radius: 0; text-align: center; color: #999; } .btn-vote.voted:hover { background-color: transparent; } .btn-vote:hover { background-color: transparent; } .btn-vote:focus { background-color: transparent; } .btn-vote .vote-count { display: block; font-size: 25px; font-weight: 400; line-height: 57px; margin-top: 0px; margin-bottom: 5px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.25); /* UI black */ /*background-color: rgba(30, 42, 73, 0.02);*/ /* UI black */ background-color: transparent; color: rgba(33, 41, 51, 1); /* Default text color */ transition: box-shadow 100ms ease, color 100ms ease, background-color 100ms ease; } .btn-vote .vote-status { background-color: rgba(33, 41, 51, .92); /* Text black */ padding: 4px 0px 4px 2px; border-radius: 2px; transition: background-color 100ms ease; font-size: 11px; } .btn-vote:hover .vote-count { box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.45); /* UI black */ /*background-color: rgba(30, 42, 73, 0.02);*/ /* UI black */ } .btn-vote:hover .vote-status { background-color: rgba(0,0,0,1); } .btn-vote.voted .vote-count { color: rgba(29, 190, 126, 1); /* primary-green */ box-shadow: inset 0 0 0 1px rgba(23, 160, 106, 0.5); /* dark-green */ background-color: rgba(29, 190, 126, .03); } .btn-vote.voted .vote-status { background-color: rgba(29, 190, 126, 1); /* primary-green */ } .btn-vote.voted:hover .vote-count { box-shadow: inset 0 0 0 1px rgba(23, 160, 106, 0.6); /* dark-green */ /*background-color: rgba(29, 190, 126, 0.06);*/ color: rgba(23, 160, 106, 1); /* dark-green */ } .btn-vote.voted:hover .vote-status { background-color: rgba(23, 160, 106, 1); /* dark-green */ } .btn-vote .vote-status:hover, .btn-vote.voted .vote-status:hover { color: white; } .btn-vote .vote-status:hover .caret, .btn-vote.voted .vote-status:hover .caret { border-top-color: white; } .btn-vote .vote-count:hover { color: rgba(33, 41, 51, .92); /* UI black */ } .btn-vote.voted .vote-count:hover { color: rgba(23, 160, 106, 1); /* dark-green */ } .btn-vote .vote-status .caret { margin-top: 7px; margin-left: 1px; } .btn-vote:not(.merged):hover, .btn-vote:not(.merged):focus, .btn-vote.voted:not(.merged):hover, .btn-vote.voted:not(.merged):focus { background-color: transparent; } .btn-vote .vote-status.dropdown-toggle { min-width: 77px; } /* Status Label */ .status-pill { border-radius: 3px; font-size: 14px; border: 0px solid; } /* Ideas */ .ideas .idea { border-bottom: 1px solid rgba(30, 42, 73, 0.10); padding: 15px 0px; } .ideas .idea .description { min-height: 20px; font-size: 14px; line-height: 140%; margin-bottom: 15px; } .ideas .idea .idea-details { width: 82%; } .ideas .idea a:visited h3 { color: rgba(133, 138, 144, 1) !important; /* dim text grey */ } .ideas .idea a:visited .description { color: rgba(133, 138, 144, 1); /* dim text grey */ } .ideas .idea a .idea-details h3 { transition: color 100ms ease; } .ideas .idea a .idea-details h3::after { content: "→"; display: inline; opacity: 0; transition: opacity 100ms ease; } .ideas .idea a .idea-details:hover h3::after { /*color: #146EF4; */ /*text-decoration: underline;*/ opacity: 1; } .ideas .idea a .idea-details h3, .ideas .idea a .idea-details .description { /*transition: opacity 100ms ease;*/ } .ideas .idea a .idea-details:hover h3, .ideas .idea a .idea-details:hover .description { /*opacity: 0.7;*/ } .ideas .idea a:visited { color: inherit; } .ideas .idea .idea-details .idea-meta .avatar img { margin-top: -3px; margin-right: 11px; } .ideas .idea .idea-details .idea-meta { color: rgba(133, 138, 144, 1); } .ideas .idea .idea-details .idea-meta .comment-count, .ideas .idea .idea-details .idea-meta .comment-count i { color: rgba(30, 42, 73, 0.4); /* UI black */ transition: color 100ms ease; vertical-align: middle; } .ideas .idea .idea-details .idea-meta .comment-count:hover, .ideas .idea .idea-details .idea-meta .comment-count:hover i { color: #253343; } /* Avatar */ .avatar { position: relative; } .avatar img { border: 0px solid transparent; border-radius: 50px; width: 26px; } .avatar.avatar-large img { border-radius: 50px; } .avatar img.admin-user { border: 2px solid rgba(252, 71, 131, 1); /* pink */ } .avatar .user-type { font-size: 11px; line-height: 13px; text-transform: capitalize; color: rgba(252, 71, 131, 1); /* pink */ font-weight: 400; margin-top: 4px; margin-left: -6px; } /*span.avatar img::before { content:""; border:1px solid red; position: absolute; top: 0; left:0; right:0; bottom:0; }*/ /* Tabs */ .nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus { font-weight: 500; } .nav-tabs>li>a { padding-top: 0; padding-bottom: 0; padding: 12px 18px; margin-right: 3px; transition: background-color 100ms ease; } .nav>li>a:hover, .nav>li>a:focus { /*background-color: rgba(30, 42, 73, 0.06);*/ /* UI black */ color: #146EF4; /* primary-blue */ background-color: rgba(20, 110, 244, .08); } .nav-tabs>li>a:hover, .nav-tabs>li>a:focus { border-color: transparent transparent transparent; } /* Button Styles */ .btn { padding: 9px 24px; font-size: 14px; line-height: 20px; font-weight: 400; color: white; text-shadow: none; background-color: #146EF4; background-image: none; background-image: none; background-image: none; background-image: none; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='transparent', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); border: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; transition: 100ms background-color ease, box-shadow 100ms ease; } .btn i { margin-right:3px; } .btn-outline { color: #146EF4; /* primary-blue */; border: none; box-shadow: inset 0 0 0 1px #146EF4; /* primary-blue */; background-color: white; } .btn:focus { outline: 0; } .btn.btn-outline:hover, .btn.btn-outline:active, .btn.btn-outline:focus, .btn.btn-outline.active, .btn.btn-outline.disabled, .btn.btn-outline[disabled] { background-color: white; /* UI black */ text-shadow: none; color: #146EF4; /* primary-blue */; border-color: none; box-shadow: inset 0 0 0 2px #146EF4; /* primary-blue */; } .btn-outline.btn-primary, .btn-outline.btn-primary:focus, .btn-outline.btn-primary.disabled, .btn-outline.btn-primary[disabled] { color: white; border-color: transparent; background-color: #146EF4; /* primary-blue */ box-shadow: none; transition: 100ms background-color ease; } .btn-outline.btn-primary:hover, .btn-outline.btn-primary:active { background-color: rgba(58, 76, 211, 1); /* primary-blue darker */ color: white; box-shadow: none; } .btn-outline:disabled,.btn-outline[disabled],.btn-outline.disabled { background-color:rgba(30, 42, 73, 0.7)!important; color: white !important; border: none !important; box-shadow: none !important; outline: 0 !important; } .current-user-info { margin-bottom: 0px; /*padding: 10px; background-color: rgba(30, 42, 73, 0.06);*/ /* UI black */ /*border-radius:3px; box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.06);*/ /* UI black */ } .current-user-info:first-child { margin-bottom: 20px; } .current-user-info .user-name .caret { margin-top: 8px; } .dropdown-toggle:hover { color: #146EF4; /* primary-blue */ } .dropdown-toggle:hover .caret { border-top-color: #146EF4; /* primary-blue */ } .dropdown-menu { background-color: #ffffff; border: none; box-shadow: 0 0 0 1px rgba(30, 42, 73, 0.1), 0 1px 10px rgba(30, 42, 73, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .dropdown-menu>li>a { padding: 6px 20px; vertical-align: middle; color: rgba(30, 42, 73, 1); } .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { /*background-color: #146EF4;*/ /* primary-blue */ background-color: rgba(30, 42, 73, 0.10); /* UI color */ color: rgba(30, 42, 73, 1); background-image: none; } .dropdown-menu>li>a>i { margin-right:2px; } /* Forms / inputs */ .portal-content .input-xxlarge, .portal-content select.input-xxlarge, .portal-content .select2-container.select2-container-multi.input-xxlarge { width: 100%; height:40px; box-sizing: border-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } select, .portal-content select.input-xxlarge { background-image: url(https://d3e54v103j8qbb.cloudfront.net/images/caret-down-medium.e548cd2725.svg); background-position: 98% center; background-repeat: no-repeat; background-size: 12px; } select:active, select:hover, select:focus { outline: none } select:focus { -webkit-box-shadow: inset 0 0 0 2px #146EF4; /* default blue */ -moz-box-shadow: inset 0 0 0 2px #146EF4; /* default blue */ box-shadow: inset 0 0 0 2px #146EF4; /* default blue */ } select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { box-sizing: border-box; background-color: #fff; border: none; outline: none; -webkit-box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.25); /* UI black */ -moz-box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.25); /* UI black */ box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.25); /* UI black */ height: 40px; padding: 10px 10px 11px; margin-bottom: 10px; font-size: 14px; line-height: 20px; color: #253343; /* primary-black */ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; vertical-align: middle; -webkit-transition: border ease 100ms, box-shadow ease 100ms; -moz-transition: border ease 100ms, box-shadow ease 100ms; -o-transition: border ease 100ms, box-shadow ease 100ms; transition: border ease 100ms, box-shadow ease 100ms; } textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus { border: none; outline: 0; -webkit-box-shadow: inset 0 0 0 2px #146EF4; /* default blue */ -moz-box-shadow: inset 0 0 0 2px #146EF4; /* default blue */ box-shadow: inset 0 0 0 2px #146EF4; /* default blue */ } textarea::-webkit-input-placeholder, input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="datetime"]::-webkit-input-placeholder, input[type="datetime-local"]::-webkit-input-placeholder, input[type="date"]::-webkit-input-placeholder, input[type="month"]::-webkit-input-placeholder, input[type="time"]::-webkit-input-placeholder, input[type="week"]::-webkit-input-placeholder, input[type="number"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="url"]::-webkit-input-placeholder, input[type="search"]::-webkit-input-placeholder, input[type="tel"]::-webkit-input-placeholder, input[type="color"]::-webkit-input-placeholder, .uneditable-input::-webkit-input-placeholder { color: rgba(33, 41, 51, 0.35); } .field-with-errors input, .field-with-errors select, .field-with-errors textarea, .field-with-errors input[type="text"], .field-with-errors input[type="password"], .field-with-errors input[type="datetime"], .field-with-errors input[type="datetime-local"], .field-with-errors input[type="date"], .field-with-errors input[type="month"], .field-with-errors input[type="time"], .field-with-errors input[type="week"], .field-with-errors input[type="number"], .field-with-errors input[type="email"], .field-with-errors input[type="url"], .field-with-errors input[type="search"], .field-with-errors input[type="tel"], .field-with-errors input[type="color"], .field-with-errors .uneditable-input, .field-with-errors .select2-choices, .field-with-errors input:focus, .field-with-errors select:focus, .field-with-errors textarea:focus, .field-with-errors input[type="text"]:focus, .field-with-errors input[type="password"]:focus, .field-with-errors input[type="datetime"]:focus, .field-with-errors input[type="datetime-local"]:focus, .field-with-errors input[type="date"]:focus, .field-with-errors input[type="month"]:focus, .field-with-errors input[type="time"]:focus, .field-with-errors input[type="week"]:focus, .field-with-errors input[type="number"]:focus, .field-with-errors input[type="email"]:focus, .field-with-errors input[type="url"]:focus, .field-with-errors input[type="search"]:focus, .field-with-errors input[type="tel"]:focus, .field-with-errors input[type="color"]:focus, .field-with-errors .select2-choices:focus, .field-with-errors .uneditable-input:focus { border-color: none; -webkit-box-shadow: inset 0 0 0 2px rgba(252, 71, 131, 1) !important; /* pink */ -moz-box-shadow: inset 0 0 0 2px rgba(252, 71, 131, 1)!important; /* pink */ box-shadow: inset 0 0 0 2px rgba(252, 71, 131, 1)!important; /* pink */ } input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { opacity: .6; } input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus { border-color: none; -webkit-box-shadow: inset 0 0 0 2px rgba(252, 71, 131, 1); /* default blue */ -moz-box-shadow: inset 0 0 0 2px rgba(252, 71, 131, 1); /* default blue */ box-shadow: inset 0 0 0 2px rgba(252, 71, 131, 1); /* default blue */ color: rgba(252, 71, 131, 1); } .field-with-errors .control-label, .field-with-errors .help-block, .field-with-errors .help-inline { color: rgba(252, 71, 131, 1); } .help-inline { padding-left: 0px; } label { margin-bottom: 8px; font-size: 15px; } label .sub-label.required { background-color: rgba(30, 42, 73, 0.25); color: white; border-radius: 2px; padding: 1px 4px 2px; font-size: 11px; margin-left: 5px; text-transform: uppercase; } /* Search */ .search-field input { margin: 0; padding: 0px 5px 1px 30px; height: 34px; line-height: 26px; font-size: 12px; width: 100%; -webkit-box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.20); /* UI black */ -moz-box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.20); /* UI black */ box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.20); /* UI black */ } .search-field input:focus { border: none !important; -webkit-box-shadow: inset 0 0 0 2px #146EF4 !important; /* default blue */ -moz-box-shadow: inset 0 0 0 2px #146EF4 !important; /* default blue */ box-shadow: inset 0 0 0 2px #146EF4 !important; /* default blue */ } .search-field:before { font-family: 'icomoon' !important; content: "\e91c"; font-size: 16px; color: #253343; /* primary-black */ padding-left: 4px; top: 3px; position: absolute; } .idea-search-form i.icon-remove-sign { left: auto; font-size: 17px; top: 7px; right: 8px; z-index: 100; color: rgba(30, 42, 73, 1); } .idea-search-form i.icon-remove-sign:hover { color: #146EF4; } .search-field .clear-button { top: 2px; color: rgba(30, 42, 73, 1); } .search-field .clear-button:hover { color: #146EF4; } /* New Idea */ .found-ideas { margin-bottom: 25px; } .found-ideas h4 { margin-bottom: 8px; font-size: 15px; font-weight: 600; text-transform: inherit; /*color: rgba(252, 71, 131, 1);*/ /* pink */ color: rgba(29, 190, 126, 1); /* green */ } .found-ideas ul.ideas { overflow: auto; border: none; padding: 15px 15px 0 15px; margin-bottom: 10px; max-height: 300px; /*background-color: rgba(252, 71, 131, 0.10);*/ /* pink */ background-color: rgba(29, 190, 126, .1); /* green */ /*box-shadow: inset 0 0 0 1px rgba(205, 58, 106, 0.08);*/ /* dark pink */ box-shadow: inset 0 0 0 1px rgba(23, 160, 106, 0.1); /* dark green */ border-radius: 4px; } .found-ideas ul.ideas .idea { padding: 0 0; border-bottom-color: rgba(23, 160, 106, 0.15); /* dark green */ margin-bottom: 17px; } .found-ideas ul.ideas .idea:last-child { margin-bottom: 0px; } .found-ideas ul.ideas .idea .idea-details { width: 100%; margin-bottom: 12px; } .found-ideas .ideas .idea a:visited h3, .found-ideas .ideas .idea a:visited .description { color: rgba(33, 41, 51, 1); /* primary-black */ } .found-ideas ul.ideas .idea a .idea-details:hover h3 { color: #253343; /* primary-black */ /*text-decoration: underline;*/ } .found-ideas .ideas .idea .idea-details .idea-meta .status-pill { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); } /* Breadcrumbs */ .breadcrumb { margin: 0 0 17px; } .breadcrumb:only-child { margin: 0; } /* Alerts */ .alert { padding: 14px 37px 15px 16px; margin-bottom: 20px; text-shadow: none; background-color: #F7F8FA; border: 1px solid rgba(30, 42, 73, 0.1); /*background-color: #FFF9EF; border: 1px solid #F8EEE0;*/ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #253343; /* primary-black */ font-size: 17px; line-height: 22px; } /*.alert .close { top: -1px; right: -21px; color: #253343; opacity: 0.5; }*/ .alert h4 { font-size: 19px; line-height: 25px; font-weight: 500; text-transform: capitalize; margin: 0 0 15px; display: inline-block; color: #253343; } .alert p { margin-bottom: 0; font-size: 16px; line-height: 24px; } .alert::before { font-family: 'icomoon' !important; content: "\e929"; font-size: 24px; vertical-align: text-top; margin-right: 10px; } .alert-danger::before, .alert-error::before { content: "\e92b"; } .alert-success::before { content: "\e925"; } .idea-response.alert-success::before { display: none; } .alert .close { color: transparent; text-shadow: none; top: 2px; right: -19px; line-height: 16px; opacity: .4; transition: opacity 100ms ease; } .alert .close::before { font-family: 'icomoon' !important; content: "\e91b"; font-size: 16px; color: #253343; /* primary-black */ text-shadow: none; margin-right: -16px; } .alert .close:hover { opacity: 1; } .alert-danger, .alert-error { background-color: #FFF1F5; border: 1px solid #FAE5EB; color: rgba(252, 71, 131, 1); } .alert-danger .close::before, .alert-error .close::before { color: rgba(252, 71, 131, 1); } .alert-success { background-color: rgba(29, 190, 126, .1); border: 1px solid rgba(23, 160, 106, .1); color: rgba(23, 160, 106, 1); /* dark green */ } .alert-success .close::before { color: rgba(23, 160, 106, 1); } .alert-info { background-color: #F2F7FF; border: 1px solid #E4ECFA; color: #146EF4; /* default blue */ } .alert-info .close::before { color: #146EF4; /* default blue */ } .idea-response.alert.alert-success { background-color: rgba(252, 71, 131, 0.08); /* pink */ border: 1px solid rgba(205, 58, 106, 0.08); /* dark pink */ margin-top: 30px; } .idea-response.alert.alert-success h4 { } .idea-responses .idea-response h4, .idea-responses .idea-response .time { color: rgba(252, 71, 131, 1); /* dark pink */ font-size: 15px; } /* Detail Page */ .user-content p, .comment-text p { margin: 0 0 10px; font-size: 14px; line-height: 145%; } .idea-content h2 { font-size: 36px; line-height: 130%; margin-bottom: 17px; font-weight: 300; letter-spacing: -.6px; margin-top: -8px; } .idea-content { width: 55%; } .idea-content .description { margin-bottom: 25px; } .idea-content .idea-products-and-categories { margin: 14px 0px 13px; } .idea-content .idea-products-and-categories a { background-color: white; padding: 4px 11px 5px; border-radius: 50px; font-size: 14px; color: #253343; /* primary-black */ box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.20); /* UI black */ transition: box-shadow 100ms ease, color 100ms ease; } .idea-content .idea-products-and-categories a:hover { box-shadow: inset 0 0 0 1px #146EF4; /* default blue */ color: #146EF4; /* default blue */ text-decoration: none; } .idea-comments ul.comments>li .body .comment-header .name, .idea-comments ul.comments>li .body .comment-header .controls { font-size: 14px; color: rgba(30, 42, 73, 0.45); /* UI black */ } .idea-comments ul.comments>li .body { width: calc(100% - 55px); border-bottom: 1px solid rgba(30, 42, 73, 0.2); /* UI black */ padding-bottom: 24px; padding-left: 0; margin-bottom: 12px; } .idea-comments ul.comments>li.idea-comment-new { margin-bottom: 40px; } .sidebar-section { margin-bottom: 23px; border-bottom: 1px solid rgba(30, 42, 73, 0.2); /* UI black */ padding-bottom: 23px; } .sidebar-header { margin-bottom: 7px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0; } .related-ideas, .idea-categories { list-style-type: disc; padding-left: 17px; } .related-ideas li, .idea-categories li { margin-bottom: 6px; font-size: 14px; color: rgba(30, 42, 73, 1); } .idea-comments ul.comments>li .body > .comment-header { margin-bottom: 10px; } .user-content b, .comment-text b, .user-content b a, .comment-text b a { font-weight: 700; } .user-content ul, .comment-text ul, .user-content ol, .comment-text ol { padding: 0; margin: 0 0 12px 30px; font-size: 14px; } .user-content ul li, .comment-text ul li, .user-content ol li, .comment-text ol li { line-height: 145%; } .user-content a, .comment-text a { text-decoration: underline; color: rgba(33, 41, 51, 1); } .user-content a:hover, .comment-text a:hover { color: #146EF4; } .attachment .img-container .attachment-thumbnail { /* box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.20); border-radius: 3px; padding: 1px; transition: box-shadow 100ms ease, color 100ms ease;*/ overflow: visible; border: none; background-color: transparent; } .attachment .img-container .attachment-thumbnail img { border-radius: 2px; } .attachment .img-container .attachment-thumbnail:hover { /*box-shadow: inset 0 0 0 2px #146EF4; */ } .attachment .img-container:hover .attachment-thumbnail img { box-shadow: 0 0 0 2px #146EF4; } .attachment .caption { color: rgba(30, 42, 73, 0.45); /* UI black */ word-wrap: break-word; line-height: 15px; } .attachments { margin-top: 5px; margin-bottom: -15px; } .attachment { padding: 0px; padding-right: 15px; margin-bottom: 15px; } .idea-response .attachment .img-container .attachment-thumbnail .image-helper { height: auto; } /*.idea-content .idea-meta li { list-style-type: none; list-style-image: url('bla.svg') }*/ /*.idea-content .idea-meta li:not(:first-child) { list-style-type: none; }*/ .idea-content .idea-meta li { font-size: 14px; line-height: 25px; } .idea-content .idea-meta li:first-child { list-style-type: none; line-height: 25px; } .idea-meta > li > .status-pill { display: inline-block; margin-top: -1px; padding-top: 0px; } .public .search-form { width: 27%; } .public .search-form .search-field { width: 100%; } .public .breadcrumb li:not(:first-child) { display: none; } /*.public .breadcrumb li .divider { display: none; }*/ .breadcrumb li a:hover { text-decoration: none; color: #212933; /* dark text color */ } .breadcrumb > li > a i { margin-right: 4px; } /* Replace detail page breakcrumb link - START */ /*.idea .breadcrumb li a::before { content: "← Back to Wishlist"; }*/ /*.breadcrumb > li > a i { display: none; }*/ /*.idea .breadcrumb li i.icon-home::before { font-family: -apple-system,BlinkMacSystemFont,"Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif; content: "←"; display: none; }*/ /* Replace detail page breakcrumb link - END */ /*.idea-meta-secondary:not(:first-child)::before { content:"Category: "; display: inline; }*/ /* Layout */ .container, .customcontainer { max-width: 1110px; padding: 0; display: block; margin-right: auto; margin-left: auto; } .portal-content { width: 70%; padding-left: 0px; float: left; box-sizing: border-box; } .portal-sidebar, .right-sidebar { width: 27%; float: right; margin-right: 0; margin-left: 3%; padding: 2%; border: 1px solid rgba(30, 42, 73, 0.15); border-radius: 3px; box-sizing: border-box; } .portal-sidebar br { display:none; } .portal-sidebar .my-ideas-filters-wrapper { margin-top: 20px; } .portal-sidebar .categories-filters-wrapper { margin-bottom: 40px; } /* Vote Buttons */ .idea-endorsement, .idea-sidebar { width: auto; text-align: left; min-width: 77px; max-width: 77px; margin-right: 17px; } .btn-vote, .btn-vote.dropdown { width: 77px; } .portal-aha-footer { min-height: 80px; } .portal-aha-footer .container { display: none; } .btn-vote .dropdown-vote { border-radius: 0 0 3px 3px; margin-top: 0px; padding: 6px 0; } .btn-vote .dropdown-vote li a { padding: 3px 9px; } /* Random */ .edit-profile .user-fields:last-child { border-bottom: none; } .portal-user.popover form .controls input { max-width: 100%; } .portal-user.popover form h3 { text-align: center; margin-top: 15px; font-size: 16px; letter-spacing: 0; font-weight: 500; margin-bottom: 15px; } .portal-user.popover form label { font-size: 14px; margin-top: 0px; } .label-private-idea { font-family: -apple-system,BlinkMacSystemFont,"Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif; line-height: 130%; font-size: 14px; text-transform: capitalize; font-weight: 500; padding: 4px 7px 3px; background-color: #FFF26A; border-radius: 3px; color: #3D3200; letter-spacing: 0; } .modal-footer { padding: 14px 15px 15px; margin-bottom: 0; text-align: right; background-color: rgba(30, 42, 73, 0.04); border-top: 1px solid rgba(30, 42, 73, 0.1); -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .modal-header h3 { font-size: 20px; font-weight: 500; } .attachment-modal .open-attachment { padding: 4px 10px; margin: 2px 10px 0 0; letter-spacing: 0; font-weight: 500; } .attachment-modal .modal-header .close { top: inherit; right: inherit; line-height: 30px; margin-top: 0px; } .attachment-modal .modal-header .close::before { color: black; } .modal.fade.in { top: 20%; } .wishlist-logo-link { color: #253343; transition: opacity ease 100ms; } .wishlist-logo-link:hover { opacity: 0.5; color: #253343; } /* Signup */ body.external-app .login-popup section input { font-size: 14px; font-family: -apple-system,BlinkMacSystemFont,"Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif; } body.external-app .login-popup section label { font-weight: 400; } body.external-app .login-popup h2 { border-bottom: 1px solid rgba(30, 42, 73, 0.1); /* UI black */ font-size: 25px; font-weight: 300; font-family: -apple-system,BlinkMacSystemFont,"Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif; } .form-horizontal .control-label { padding-top: 9px; } /* MCE Overrides */ .mce-panel { border: 0 solid rgba(30, 42, 73, 0.2); /* UI black */ background-color: white; } .aha-editor-link-edit-panel .mce-container.mce-tinymce:not(.mce-tinymce-inline).mce-edit-focus, #tinymce .mce-container.mce-tinymce:not(.mce-tinymce-inline).mce-edit-focus { border-color: #146EF4; box-shadow: 0 0 0 1px #146EF4; /* default blue */ outline: none; } .mce-edit-area.mce-container.mce-panel.mce-last.mce-stack-layout-item { border-color: transparent; } #tinymce, .mce-content-body.user-content { background-color: #FFFFFF; font-family: -apple-system,BlinkMacSystemFont,"Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif !important; font-size: 14px !important; line-height: 17px !important; margin: 10px !important; padding: 2px !important; } .mce-btn i { text-shadow: none; } .attachment-button { padding: 0; font-size: 14px; color: rgba(30, 42, 73, 0.45); /* UI black */ line-height: 140%; margin-bottom: 19px; } .aha-editor-link-edit-panel .mce-container { background: #F4F4F6; /* UI black */ } .mce-container.mce-flow-layout-item.mce-btn-group:nth-child(1) { display:none; } .mce-container.mce-flow-layout-item.mce-btn-group:nth-child(2) > div .mce-widget.mce-btn:nth-child(3) { display:none; } .mce-container.mce-flow-layout-item.mce-btn-group:nth-child(2) > div .mce-widget.mce-btn:nth-child(4) { display:none; } .mce-container.mce-flow-layout-item.mce-btn-group:nth-child(3) { display:none; } .mce-container.mce-flow-layout-item.mce-btn-group:nth-child(4) > div .mce-widget.mce-btn:nth-child(3) { display:none; } .mce-container.mce-flow-layout-item.mce-btn-group:nth-child(4) > div .mce-widget.mce-btn:nth-child(4) { display:none; } .mce-container.mce-flow-layout-item.mce-btn-group:nth-child(5) > div .mce-widget.mce-btn:nth-child(1) { display:none; } .mce-container.mce-flow-layout-item.mce-btn-group:nth-child(7) { display:none; } #mce-modal-block.mce-in { opacity: .6; filter: alpha(opacity=60); } .mce-container.mce-panel.mce-floatpanel.mce-window.mce-in { border: none; border-radius: 6px; } .mce-container .mce-btn.mce-primary button { text-shadow: none; font-size: 14px; padding: 0px; background-color: #146EF4; } .mce-container .mce-btn.mce-primary button:hover { background-color: rgba(58, 76, 211, 1); } .mce-floatpanel .mce-title { font-family: -apple-system,BlinkMacSystemFont,"Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif; font-size: 20px; line-height: 1.2; font-weight: 400; margin: 4px 0px; } .mce-tooltip-inner { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .aha-editor-link-edit-panel .mce-btn:hover, #tinymce .mce-btn:hover { background: transparent; } .aha-editor-link-edit-panel .mce-btn:hover button i, #tinymce .mce-btn:hover button i { color: #146EF4; /* primary-blue */ } .aha-editor-link-edit-panel .mce-btn.mce-active, #tinymce .mce-btn.mce-active, .aha-editor-link-edit-panel .mce-btn.mce-active:hover, #tinymce .mce-btn.mce-active:hover, .mce-btn:not(.mce-disabled):active { background-color: transparent; background-image: none; background-image: none; background-image: none; background-image: none; background-image: none; background-repeat: repeat-x; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .aha-editor-link-edit-panel .mce-btn.mce-active button i, #tinymce .mce-btn.mce-active button i, .aha-editor-link-edit-panel .mce-btn.mce-active:hover button i, #tinymce .mce-btn.mce-active:hover button i { color: #146EF4; /* primary-blue */ } .mce-edit-area.mce-container.mce-panel.mce-last.mce-stack-layout-item iframe{ min-height: 110px; } /* Footer Styles */ footer { padding: 40px 0; text-align: center; margin-top: 60px; border-top: 1px solid #E9EAED; } .footer-text { color: rgba(133, 138, 144, 1); /* dim text grey */; display: inline-block; font-weight: 300; font-size: 14px; } .footer-divider { margin: 0 5px; } .footer-link { color: rgba(133, 138, 144, 1); /* dim text grey */; } .footer-link:hover, .footer-link:focus { color: rgba(133, 138, 144, 1); /* dim text grey */; text-decoration: underline; } @media (min-width: 767px) { .portal-nav .search-form { -webkit-justify-content: flex-start; justify-content: flex-start; } } @media (max-width: 1110px) { .container, .customcontainer { padding: 0 10px; } @media (max-width: 960px) { .right-sidebar, .private .right-sidebar, .public .right-sidebar, .submit-only .right-sidebar { width: 100%; box-sizing: border-box; margin: 0 auto; float: none; clear: left; } } @media (max-width: 767px) { .public .search-form { width: 100%; margin-bottom: 15px; } } @media (max-width: 670px) { .private .portal-sidebar, .public .portal-sidebar, .submit-only .portal-sidebar { width: 100%; margin-right: 0; margin-bottom: 20px; margin-left: 0; height: 100%; } .public .idea-sidebar .idea-endorsement { margin: 0 auto 0 0; } .private .right-sidebar, .public .right-sidebar, .submit-only .right-sidebar { padding: 15px; width: 100%; } .ideas .idea .idea-details .idea-meta .idea-meta-created { width: 40%; } .private .search-query, .public .search-query, .submit-only .search-query { display: block; } .public .idea-sidebar { width: 20%; margin-right: 2%; min-width: 0; max-width: none; } .public .idea-content { width: 78%; } .breadcrumb { margin: 0px; } } @media (max-width: 500px) { .nav-tabs>li>a { padding: 13px 13px; } .idea-endorsement, .idea-sidebar { margin-bottom: 18px; float: left; width: 15%; } } @media (max-width: 400px) { .public .idea-sidebar { width: 20%; margin-right: 5%; } .public .idea-content { width: 75%; } } /* ################################################### */ /* ################################################### */ /* END */ /* ################################################### */ /* ################################################### */ </style> <header class="webflow-header">  <div class="navbar w-nav" data-animation="default" data-collapse="small" data-duration="400"> <div class="customcontainer w-clearfix"> <a class="logo w-clearfix w-nav-brand" href="https://webflow.com"><img alt="home" class="logoimage" src="https://uploads-ssl.webflow.com/52b1d97cd25933e36e000134/6529c1beac2fb6a71ab69e60_Full_Logo_Blue_White%20(1).svg" width="122"> </a> <a class="logo w-clearfix w-nav-brand" href="https://wishlist.webflow.com"> <div class="portalname">Wishlist</div> </a> <nav class="nav-menu w-nav-menu" role="navigation"> <a class="navlink w-nav-link" href="https://university.webflow.com/videos">Courses</a> <a class="navlink w-nav-link" href="https://university.webflow.com/articles">Guides</a> <a class="navlink w-nav-link" href="https://forum.webflow.com/">Forum</a> <a class="navlink w-nav-link" href="https://university.webflow.com/contact">Contact</a> <div class="w-dropdown" data-delay="0" data-hover="1"> <div class="navdropdown w-dropdown-toggle"> <div class="navdropdowntext">More</div> <div class="navdropdownicon w-icon-dropdown-toggle"></div> </div> <nav class="dropdownmenu w-dropdown-list"> <a class="dropdownmenulink w-dropdown-link" href="https://developers.webflow.com">API Docs</a> <a class="dropdownmenulink w-dropdown-link" href="https://university.webflow.com/glossary">Glossary</a> </nav> </div> </nav> <div class="menubutton w-nav-button"> <div class="menubuttonicon w-icon-nav-menu"></div> </div> </div> </div> <script type="text/javascript" src="https://daks2k3a4ib2z.cloudfront.net/52cf50823d343d6104000288/js/webflow.b67a707b9.js"></script> </header> <div class="container">  <div class="idea" id="6694176356779818346"> <div class="portal-nav"> <ul class="breadcrumb"> <li> <a href="/ideas"> <i class='fa-regular fa-home'></i> Home </a> <span class="divider">/</span> </li> <li class="active"> <a href="/ideas?project=WEBFLOW">WEBFLOW</a>-I-2038 <span class="divider">/</span> </li> <li> <a href="/portal_session/new?return_to=%2Fideas%2Fnew">New idea</a> </li> </ul> <div class="search-form"> <form class="form-horizontal idea-search-form" action="/ideas/search" accept-charset="UTF-8" method="get"> <div class="search-field"> <input type="text" name="query" id="query" class="input-medium search-query" placeholder="Search ideas" aria-label="Search ideas" /> <a class="fa-regular fa-circle-xmark clear-button" style="display:none;" href="/ideas"></a> </div> </form></div> </div> <div class="clearfix"></div> <div class="idea-sidebar"> <div class="idea-endorsement" id="idea-6694176356779818346-endorsement"> <a class="btn-vote" data-disable="true" href="/auth/jwt?return_to=%2Fideas%2FWEBFLOW-I-2038%3Freturn_to_action%3Dvote_6694176356779818346"> <span class="vote-count"> 838 </span> <span class="vote-status"> Vote </span> </a> <div class="popover vote-popover portal-user"></div> </div> </div> <div class="idea-content"> <div class="ajax-flash"></div> <h2> Add modern File Types like JPEG 2000, JPEG XR and WebP </h2> <div class="description"> <div class="note" data-reactive-preserve-attributes="true"> <p>The Loading Time would be much faster. Google Page Speed say that it could be 7 seconds faster with this modern File types. <br><br><b>Admin Note:</b><br>Due to limited browser support, it's unlikely that we'll build the ability to use <a href="https://caniuse.com/?search=JPEG%202000" rel="nofollow noreferrer noopener" target="_blank">JPEG 2000</a>, <a href="https://caniuse.com/?search=JPEG%20XR" rel="nofollow noreferrer noopener" target="_blank">JPEG XR</a>, or <a href="https://caniuse.com/?search=Webp" rel="nofollow noreferrer noopener" target="_blank">WebP</a> until there's full browser support.</p> </div> </div> <ul class="idea-meta"> <li> <span class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/3615efca540a8bab6b6c53c5d705d049?default=mm&rating=G&size=32" width="32" height="32" /> </span> Dominik Klich </li> <li> May 23 2019 </li> <div class="clearfix"></div> </ul> <div class="idea-products-and-categories"> <a href="/ideas?category=6374425167182394346">Assets</a> </div> <ul class="idea-responses" style="margin-top: 3rem;"> <li class="idea-response alert alert-success"> <div class="time pull-right"> Aug 1, 2022 </div> <h4>Admin response</h4> <div class="content-reader user-content"> <div class="note" data-reactive-preserve-attributes="true"> <div class="aha-editor-field-static-content-wrapper" data-reactive-preserve="true"> <div id="note_7127001287678823763_content" class="aha-editor-field aha-editor-field-static aha-editor-field-static-content aha-editor-field-inline"> <div class="aha-editor-content"> <div class="aha-editor-body"> <p style="text-align:start;">For those who’ve been asking, the wait is over: we’ve just added support for WebP images in Webflow! </p><p style="text-align:start;">For the uninitiated, <a href="https://developers.google.com/speed/webp" rel="nofollow noreferrer noopener" target="_blank">WebP is a modern, more compact image format</a> that lets you serve high-quality images at a smaller file size than traditional JPEG and PNG formats — which means your site loads faster (and ranks better) without compromising the quality of your images. </p><p style="text-align:start;"><b>A note on browser support:</b> while <a href="https://caniuse.com/webp" rel="nofollow noreferrer noopener" target="_blank">a very small percentage</a> of old browsers don’t support WebP images, WebP is considered very widely supported (with coverage by more than 96% of browsers). That said, if your site visitors tend to come from browsers (such as IE 11), you may want to stick with more traditional image formats.</p> </div> </div> </div> </div> <div class="aha-editor-field__wrapper " data-reactive-preserve-attributes="true"> <div data-react-class="AhaEditorField" data-react-props="{"value":{"object":"value","document":{"object":"document","data":{},"nodes":[{"object":"block","type":"paragraph","data":{"alignment":"start"},"nodes":[{"object":"text","text":"For those who’ve been asking, the wait is over: we’ve just added support for WebP images in Webflow! ","marks":[]}]},{"object":"block","type":"paragraph","data":{"alignment":"start"},"nodes":[{"object":"text","text":"For the uninitiated, ","marks":[]},{"object":"inline","type":"link","data":{"href":"https://developers.google.com/speed/webp"},"nodes":[{"object":"text","text":"WebP is a modern, more compact image format","marks":[]}]},{"object":"text","text":" that lets you serve high-quality images at a smaller file size than traditional JPEG and PNG formats — which means your site loads faster (and ranks better) without compromising the quality of your images. ","marks":[]}]},{"object":"block","type":"paragraph","data":{"alignment":"start"},"nodes":[{"object":"text","text":"A note on browser support:","marks":[{"object":"mark","type":"bold","data":{}}]},{"object":"text","text":" while ","marks":[]},{"object":"inline","type":"link","data":{"href":"https://caniuse.com/webp"},"nodes":[{"object":"text","text":"a very small percentage","marks":[]}]},{"object":"text","text":" of old browsers don’t support WebP images, WebP is considered very widely supported (with coverage by more than 96% of browsers). That said, if your site visitors tend to come from browsers (such as IE 11), you may want to stick with more traditional image formats.","marks":[]}]}]},"annotations":{}},"name":"note[editor_content]","enclosingSelector":".note","popupBoundaries":null,"placeholderElement":null,"placeholderText":null,"onPlaceholderDismissed":null,"isReactive":false,"attachmentPath":"/notes/7127001287678823763/attachments","reactComponent":"AhaEditorField","documentId":"7127001287678823763","objectType":"Note","parentType":"Ideas::IdeaResponse","className":"aha-editor-field-inline","focusOnMount":null,"disableAttachments":null,"supportsFullscreen":true,"supportsEmbeddedViews":false,"supportsEmbeddedViewsViewOnly":null,"showEmbeddedViewsTooltip":false,"markdownPasteEnabled":false,"supportsDeletingEmbeddedAttachments":true,"supportsEmbeddedWhiteboards":false,"showEmbeddedWhiteboardsTooltip":false,"hasCommandMenu":false,"supportsAssistant":false,"supportsTemplates":false,"anchorsEnabled":true,"tableOfContentsEnabled":true,"ariaLabel":null,"publishing":false,"defaultProject":null,"templateProject":null,"modelType":"Ideas::IdeaResponse","editLocked":false,"editorMoreApparent":null,"fullScreenURL":"/ideas/idea_responses/7127001287654961849","nonFullScreenURL":"/ideas/idea_responses/7127001287654961849","baseURL":"/notes/7127001287678823763","reactivePath":"Note-7127001287678823763","reactiveURL":"/notes/7127001287678823763.json","hasSharedPath":null,"readOnly":true,"staticContentId":"note_7127001287678823763_content","onComponentDidMount":"hideStaticContent","persisted":true,"historyURL":null,"autosave":{"url":"/notes/7127001287678823763","indicator":"note_7127001287678823763_save_indicator","errorIndicator":"note_7127001287678823763_error_indicator","hasSharedPath":null},"projectId":"6374421995878984165","supportsReferences":false,"canFacilitate":false}" data-reactive-preserve="true"></div> </div> <div id="note-editing_7127001287678823763" class="note-editing full-width" data-reactive-preserve="true" data-note-editing-type="note"></div> </div> </div> </li> </ul> <div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"> <a data-toggle="tab" href="#comments"> <span class="comment-count"> Comments (76) </span> </a> </li> <li> <a data-toggle="tab" href="#votes"> <span class="vote-count"> Votes (838) </span> </a> </li> <li> <a data-toggle="tab" href="#merged-ideas"> Merged ideas (5) </a> </li> </ul> <div class="tab-content comments-tab-content"> <div class="tab-pane active idea-comments" id="comments"> <ul class="comments"> <li class="idea-comment idea-comment-new " id="idea-comment-new--top-level"> <div class="full-body"> <div class="save-btn"> <a class="btn btn-small btn-primary btn-outline" href="/auth/jwt?return_to=%2Fideas%2FWEBFLOW-I-2038">Post comment</a> </div> </div> <div class="popover comment-popover comment-popover--classic comment-popover--top-level portal-user"></div> </li> <script> //<![CDATA[ //]]> </script> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/87d83b007797f7901e8a165b0e623200?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Ross Newton commented </span> </div> <div class="controls"> <span class="posted"> July 12, 2022 21:32 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>Another vote to add this. Upload and display webp, seems easy enough.</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7119602247741141306" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/7724b177d4f08b71e0d4168864cdc0d7?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Anton Jonsson commented </span> </div> <div class="controls"> <span class="posted"> July 07, 2022 15:55 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>Why havent you guys fixed this yet. Hurry Hurry. :-)</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7117659800910915934" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/f17d710c6e61ef03aca8e7d28edb84f7?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Tomasz Łuczak commented </span> </div> <div class="controls"> <span class="posted"> July 07, 2022 09:14 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>Please add it ASAP! Let's make the web faster for everyone. <br>Remember Devs that not all the world is sitting on fiber optics & LTE+</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7117556414828692993" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/2c28aa457e89c0a006b68c59a16582f9?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Ethan McNeese commented </span> </div> <div class="controls"> <span class="posted"> July 05, 2022 18:49 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>WebP is supported in all but dead browsers or browsers that make up 0.05% of web use. AVIF is gaining support daily. Let's get some Next Gen formats on the go!</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7116962540343128905" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/2ee7c35cfd1048ff2ac2b1e723ac3150?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Hakan Fragapane commented </span> </div> <div class="controls"> <span class="posted"> July 03, 2022 18:15 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p><span style="color:#64B80B;">Yes, finally: </span><a href="https://stacket.app/" rel="nofollow noreferrer noopener" target="_blank"><span style="color:#64B80B;"><u>https://stacket.app/</u></span></a><span style="color:#64B80B;"><u> supports WebP and AVIF </u></span></p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7116211608808417924" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/d400df3179820a19a2cbfb1e4b74278f?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Lauren Jones commented </span> </div> <div class="controls"> <span class="posted"> June 30, 2022 21:07 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>We really need this feature! Not being able to use modern file types is killing us on site loading speed and core vitals. Please add this.</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7115142598817866408" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/cb1996adbdbf5716da0d32df1cbc8aab?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Maher Mansour commented </span> </div> <div class="controls"> <span class="posted"> June 20, 2022 19:10 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>come on please add it</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7111401629181929728" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/50b95ec504e79a9988b53d747fc8fe8f?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Goldyn Daupin commented </span> </div> <div class="controls"> <span class="posted"> June 16, 2022 16:26 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>We really need this! This is the biggest factor in our mobile site speed. And since most people are converting on mobile, this directly impacts our business.</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7109875139236557384" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/8cdce84b3adc0fc0e295e6d8308e4ad6?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Austin Shipp commented </span> </div> <div class="controls"> <span class="posted"> June 15, 2022 21:41 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>Now that IE11 is out of the picture, can we please have this? Pretty Please? :)</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7109585263446723351" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/3751603674c166332ed9f1e873a5fd7e?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Guillaume MESNARD commented </span> </div> <div class="controls"> <span class="posted"> June 15, 2022 15:14 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>Like many others before me, I don't understand why a CMS that seeks to dethrone all the others does not allow uploading the WebP format... it's not comprehensible in 2022 (especially since it doesn't shouldn't be a big feature to add).</p><p>I hope Webflow tech support reads some comments on this forum.</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7109485331681581695" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/d6be72d85d2961437bb91bcfccd25693?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Olivier Roth commented </span> </div> <div class="controls"> <span class="posted"> June 15, 2022 14:30 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>We need this to optimize site speed...</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7109474059684985794" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/3d926ea2b4b7b8eb864b33205ac84012?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Guest commented </span> </div> <div class="controls"> <span class="posted"> May 31, 2022 10:50 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>Stacket <a href="https://stacket.app" rel="nofollow noreferrer noopener" target="_blank"><span style="color:#64B80B;">https://stacket.app</span></a> will give you <span style="color:#64B80B;">WebP</span> and even <span style="color:#64B80B;">AVIF</span> Images. </p><p><br></p><p>Don't wait for Webflow.</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7103851049885013390" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/b99851be6ba03e48df0939f5c7b5679e?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Yappie Yappieton commented </span> </div> <div class="controls"> <span class="posted"> May 25, 2022 03:08 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>"Due to limited browser support"</p><p><br></p><p>We're in May 2022, time to revisit this!</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7101505651527383092" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/f0849a4343eece1a44c5c6b9bdb84b52?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Brent Lagerman commented </span> </div> <div class="controls"> <span class="posted"> April 19, 2022 20:00 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>can @webflow please add the votes with this wishlist item: <a href="https://wishlist.webflow.com/ideas/WEBFLOW-I-1102" rel="nofollow noreferrer noopener" target="_blank">https://wishlist.webflow.com/ideas/WEBFLOW-I-1102</a></p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7088407245172143947" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/0e7dee136881b7ba679ebc39d40405d2?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Laurence O'Toole commented </span> </div> <div class="controls"> <span class="posted"> April 01, 2022 21:00 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>Hi guys - This thread is almost 3 years old. </p><p> </p><p>We all know about the importance of SEO to website owners and we all know that page speed is one of many core ranking factors - highlighted by Google pushing webmasters everywhere to aspire to achieving the standards laid out in their Core Web Vitals. </p><p> </p><p>It's been said by lots of users already; images play a big role in how fast a page loads for a user - and supporting .webp would be a big step in the right direction for us all and for every user who happens to visit a site built with WebFlow. </p><p> </p><p>According to https://caniuse.com/ .webp support is now greater than .gif which is supported by WebFlow. </p><p>I can see why you might choose to wait for .avif (unless you can also come up with an elegant fallback solution). </p><p> </p><p>.png - 97.85% of global users. </p><p>.svg - 97.81% of global users. </p><p>.AVIF - 68.86% of global users. </p><p>.webp - 94.25% of global users. </p><p>.gif - 93.41% of global users. </p><p> </p><p>Every client understands the importance of a fast loading site for users, and more and more are asking for site designers and developers to achieve 90+ scores on Core Web Vitals in their site build briefs. </p><p> </p><p>So, can you at least provide a view from the WebFlow product management as to when, if ever, this might be rolled-out?</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7081743224544041740" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/9730d91a3d6a31a3c39dba7f20ed73cf?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Guest commented </span> </div> <div class="controls"> <span class="posted"> March 24, 2022 16:31 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p><a href="https://stacket.app" rel="nofollow noreferrer noopener" target="_blank">https://stacket.app</a> </p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7078705141565838073" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/347599d11097f9c75197ad59ca1f5bc0?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Dylan Cunliffe commented </span> </div> <div class="controls"> <span class="posted"> March 04, 2022 19:30 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>got to be time for this!!</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7071329525162978547" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/6c839bc3891360315f80ce6b78993441?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Carl Hickerson commented </span> </div> <div class="controls"> <span class="posted"> March 01, 2022 00:45 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>It's time!</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7069926475755737206" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/3db052a5ca804694a663e8186b931cbb?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Dayron Gallardo commented </span> </div> <div class="controls"> <span class="posted"> February 28, 2022 22:34 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>when? you guys it's 2022 this is a MUST</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7069892777383003591" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/90c1028fc8a4c285d76b3a706f0ece7a?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Dajana Dimovska commented </span> </div> <div class="controls"> <span class="posted"> February 28, 2022 13:39 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>It's been almost 3 years.....</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7069754852182375177" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment comment-more"> <a class="js-comment-more-link" href="#">Load older comments</a> </li> <script> //<![CDATA[ $(".js-comment-more-link").rebind('click.load-more-comments', function (event) { event.preventDefault(); $('.comment-more').remove(); $.get("https://wishlist.webflow.com/ideas/6694176356779818346/idea_comments.js?before=2022-02-28T13%3A39%3A32Z") }); //]]> </script> </ul> </div> <div class="tab-pane" id="votes"> <ul class="show-votes"> <li data-id="7437763969252515991" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/f2e5b466621beb56fb6ea2393c4ba512?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7437003945757508760" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/958df620bd4db68b33de1d054b362c5b?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7436898966005435394" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/792bb2d140abbf91de4cbeeb6ac64d7f?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7429248785023724261" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/a4031ce9a3c0e881904003e9929a4001?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7415533255307587885" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/a20a07f8faf800ed89eb3b6bd2c0bbae?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7395658981894769750" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/85c80151f3dc43b4d7715e832e0d04fe?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7381935024382380670" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/e4c54e89db621d15da268cdfcac9ca65?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7381901321278948997" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/47d98c91e0366c45078092f3407c7edc?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7377845911977038305" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/73e55abad9a499d22ab3b2f39cace5c6?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7363794129715226814" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/f25caf104b9ebc19fb049aed8872af96?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7351449439445591564" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/feca079ec98c4889687c3bf3eac57e7a?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7345562782455483804" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/294b5d40c179088463d6bfe7bdaec370?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7344109597310894963" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/f00a5d50bbfc9e9bfbca5339875bb800?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7323697009841560776" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/15115a5ce50503aaf791d82ee1346d27?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7322480843145093184" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/b0fc2ec2382ef1f46783d47633a1c2c8?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7321376570010344535" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/471a3ff745e4b7385ac37c4754ccb6a7?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7312230957909389972" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/3ed91b7f127158e8060fcca763c4ce41?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7311404402540661468" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/9da6b7f672c6280fd1435a87b36f1298?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7307174562328237448" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/ab4c8a92b94414a5c477d8cab8784d9b?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7307009054414530644" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/53e1161f15f3952680ca9c0b6b72b187?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7306936405240224113" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/1faea7a4551cd737c33dabf9a2ea656d?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7305667808508715158" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/619d2a6fc7e8fef0f531437f79c41121?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7300667907308483130" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/399d2f9a1f2214d0eb8dd5cd9bf097bb?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7299891956722430182" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/a18116055867195ac8b81d72752b7c3b?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7293929546296409598" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/02fdba0b375b7883b4eeef5a25a1329e?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7292186421416965078" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/71d314e4a4e2e55d2d4ea10970683efd?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7286919137270473359" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/b8a09bcb0eca1209eae009824049eae6?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7286118003197647257" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/ae1ad5add8ecb68b66b5cc40cc82e152?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7270185084888799327" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/241d2e2ce361fc30171c0c45363bb48b?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7265204474513998514" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/6883a36a5ef6903e86a2ed3dd0081809?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7262038290475638219" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/de9c6d08532547d53cf857f404943e2b?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7259475280311091166" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/38dd091ed3cd23aec727bdf8760c09fb?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7254995992219324392" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/583d9a0b6c5f10636540db8f64f9ddd3?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7247532893801093931" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/f435868d7fb790fb398266643bc5c198?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7243541870498349511" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/fb9b525488c5d135f2eb7ccd7463fbe9?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7237699953831789275" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/c551c7e5e2482e28b5d017046e4dd7b0?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7235984064187108573" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/4af208d778518ff92d9e34b5ae9d2d93?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7233433249977890621" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/63f53fef7866a38b7bf295ca5f3dd017?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7228703596310147515" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/6c96f8ae7cc2d86964f9663808b617e1?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7227051566244564300" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/9d1bbec7345a964f744f8e10555d286c?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7226357316061892731" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/2d5229bb532976dd52611e9b788f870b?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7213544842616994200" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/df1eb38131b65c9e57c4b183194269c5?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7213272041767545254" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/8c5c272ee7d00c5f8191d6ab6433aab8?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7208544999289168303" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/e909bb0891d3ad044a87ec43ff386cc7?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7203660528623146297" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/3dc72f92ea81c49c15eb07696a6bc97f?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7202599886300769790" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/b0dd577a92c08109c63cf33370c2bc05?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7201013302397967072" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/f6fbdbb1ebd12ca68484c656e6f59d73?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7182130791370907959" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/ee202e9b7a33bd23fda99f6c839533a6?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7178856489789422244" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/e73944ae55b45b93a86390df33f24442?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7174970523858772316" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/0ceef1c5bc57a201034502eae5662692?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7174666425692603693" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/6d00242d63490597eefd0a07118a00f8?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7168957441166041483" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/ceb2bac58a22c4a194c30cecbe28643f?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7168672635861949597" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/47bd46dbebaa5e4c40142dd1d2d8557a?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7168224303846999759" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/33ae9003179979baa93ba8cc05d5ea61?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7166100345695859803" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/797cbc30b72ad683c32bb710f9f6695b?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7165139632840960226" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/1f7dad6a03de5e20f161614f71a31faa?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7164375389375268195" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/f69e172ad6c26b54893a0023fcfff326?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7153569202923369357" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/ec1adc31b92d1d5ff2a36d435e3488c5?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7153521976067713240" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/76b8f6155903104fa5b5f042b9b867b0?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7152913400205362940" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/9e4662122e0efc5479fdd9f38c6ccf5a?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7150418601991876047" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/2344323994c6d3d8a83f0431e1f4ba30?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7140391986826807961" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/f74b1e09dd7914a251cf542e6983ac89?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7138848309609302246" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/b2784f68f63362cf6dcde0b0cf9db2c2?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7133174091379734760" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/d9071dd1f1eecaf05912c0746e243201?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7127544584803727822" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/3224775c70c9f622ae56e486f5653509?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7124950854369233229" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/81e471a1cab87b31edcffb96b3c6f78b?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7124605215762740592" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/91c8327cade2e4bc37e62cc7be3389fc?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7123508851813005673" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/7f037353ed173f3b209062c412b1c8d6?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7122878497264182873" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/8f11471ad3cf657204a9bacc3e703ae8?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7122432781171937341" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/110e69ddb1e3ae8bb83617e8c55886df?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7120069182284325406" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/7e552db782b044178344b5010d8a2090?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7119601767566593134" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/87d83b007797f7901e8a165b0e623200?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7119390061096825088" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/33b9d3764d1572b354f3c6978624f33e?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7119131160859955952" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/5b08fcea6d2c0e2bddfe9c2a13123d55?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7119110686655650448" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/3735a5cf9a221ec285d149da7ac7d736?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7118795237078881376" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/8ec510a101b4504af9d15f9aabcaaab6?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7118690621794682278" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/22191227c0b54f115c2a9cf67eea7c65?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7118684814250689982" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/af18f3e6ed08046d20cbb4053bbd8d17?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7118458882911337190" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/33b94137c6a0b5b93711b8aacc20cdb9?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7117556167344177736" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/f17d710c6e61ef03aca8e7d28edb84f7?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7116960621357438573" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/2c28aa457e89c0a006b68c59a16582f9?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7115996013384449097" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/ae0de3ec0a52eaddbdc76f4aa0772010?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7115470130028748988" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/dc4e475aae8343fe0e93cc4042c1e26e?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7115040738454995363" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/23adec0ea2bf42ac8de0fc99ab4e4860?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7114705818496947800" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/c9060860b21f35097bbb12afabafa7de?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7114613001432754340" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/3d1a75a5522f2b51377033b8c77b3744?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7114570073003014786" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/8edd6e6d08c6fec3b94605278079322d?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7113952954409628818" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/e406886199664e29a58d4dad1cf1577b?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7113859770271177733" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/5db510aa4feb101a7fdc90166c3788fb?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7113512227729817710" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/fb2ffdda8fc59de7013baf5d375f5c5b?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7113224395054250906" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/1e5ddf4400ed07a45d3f2272c69d46c7?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7112789584827299526" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/8b621ed4bd201972363ba0dd96a98e49?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7112760515595739194" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/f4e5a1856e5bb25e6133ebb0dd00438d?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7111950996250619510" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/712904284883b9637c99f2a7a40eb59d?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7111401651867912373" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/cb1996adbdbf5716da0d32df1cbc8aab?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7111333277302205734" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/e4a9fde7ca7db5c346fcad5affffbfbf?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7111323071941467700" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/9d2ba9b22eb2a5c1422359903d900c71?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7111217613134017271" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/4e296c806cd0feb0a68b4f29113d683a?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7110887892190945803" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/607ac10c6fa83657b989d3429d18c9dc?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7110738678959575854" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/e0f39027a3f5cd5cfffaa1dcfa9d8dae?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li> +738 </li> </ul> </div> <div class="tab-pane" id="merged-ideas"> <ul class="merged-ideas ideas"> <li class="idea" id="6717143642565265142"> <div class="idea-endorsement" id="idea-6717143642565265142-endorsement"> <a class="btn-vote" data-disable="true" href="/auth/jwt?return_to=%2Fideas%2FWEBFLOW-I-2038%3Freturn_to_action%3Dvote_6717143642565265142"> <span class="vote-count"> 7 </span> <span class="vote-status"> Vote </span> </a> <div class="popover vote-popover portal-user"></div> </div> <a class="idea-link" href="/ideas/WEBFLOW-I-2155"> <div class="idea-details"> <h3> JPEG 2000 <span class="label-private-idea"> <span class="tooltip-trigger-container" tabindex="0"> <i class="fa-solid fa-merge"></i> </span> <aha-tooltip> Merged </aha-tooltip> </span> </h3> <div class="description"> Google says that I have better rank if I use this kind of files </div> <div class="idea-meta"> <span class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/6f7cecf3926a556767d6573a1f34cdbd?default=mm&rating=G&size=32" width="32" height="32" /> </span> <div class="idea-meta-created"> <div class="idea-meta-secondary"> Created 24 Jul 08:27 by Ernesto Garcia </div> <div class="idea-meta-secondary"> Assets </div> </div> <span class="comment-count"> <i class="fa-regular fa-comments"></i> 1 </span> <div class="clearfix"></div> </div> </div> <div class="clearfix"></div> </a> <div class="clearfix"></div> </li> <li class="idea" id="6927643415587694922"> <div class="idea-endorsement" id="idea-6927643415587694922-endorsement"> <a class="btn-vote" data-disable="true" href="/auth/jwt?return_to=%2Fideas%2FWEBFLOW-I-2038%3Freturn_to_action%3Dvote_6927643415587694922"> <span class="vote-count"> 8 </span> <span class="vote-status"> Vote </span> </a> <div class="popover vote-popover portal-user"></div> </div> <a class="idea-link" href="/ideas/WEBFLOW-I-3918"> <div class="idea-details"> <h3> Add WebP jpeg xr and jpeg 2000 to make sites load faster. <span class="label-private-idea"> <span class="tooltip-trigger-container" tabindex="0"> <i class="fa-solid fa-merge"></i> </span> <aha-tooltip> Merged </aha-tooltip> </span> </h3> <div class="description"> My website health score on ahref is low and many pages are too slow. That's really bad for my business. Please add WebP jpeg xr and jpeg 2000 to make sites load faster. And consider other solutions for faster loading. </div> <div class="idea-meta"> <span class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/09d60aa22e1cee333aea4a69ac1cc0c3?default=mm&rating=G&size=32" width="32" height="32" /> </span> <div class="idea-meta-created"> <div class="idea-meta-secondary"> Created 10 Feb 14:34 by Kanybek Nur-tegin </div> <div class="idea-meta-secondary"> Assets </div> </div> <span class="comment-count"> <i class="fa-regular fa-comments"></i> 1 </span> <div class="clearfix"></div> </div> </div> <div class="clearfix"></div> </a> <div class="clearfix"></div> </li> <li class="idea" id="6772411584967692932"> <div class="idea-endorsement" id="idea-6772411584967692932-endorsement"> <a class="btn-vote" data-disable="true" href="/auth/jwt?return_to=%2Fideas%2FWEBFLOW-I-2038%3Freturn_to_action%3Dvote_6772411584967692932"> <span class="vote-count"> 2 </span> <span class="vote-status"> Vote </span> </a> <div class="popover vote-popover portal-user"></div> </div> <a class="idea-link" href="/ideas/WEBFLOW-I-2455"> <div class="idea-details"> <h3> Support for jp2 (JPEG 2000) images <span class="label-private-idea"> <span class="tooltip-trigger-container" tabindex="0"> <i class="fa-solid fa-merge"></i> </span> <aha-tooltip> Merged </aha-tooltip> </span> </h3> <div class="description"> Google Page Speed Insights suggest Image formats like JPEG 2000 which provide better compression than PNG or JPEG --> faster downloads and less data consumption </div> <div class="idea-meta"> <span class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/6f12036d9d43b48ebac5578533489f38?default=mm&rating=G&size=32" width="32" height="32" /> </span> <div class="idea-meta-created"> <div class="idea-meta-secondary"> Created 20 Dec 06:55 by MANISHA SHAH </div> <div class="idea-meta-secondary"> Assets </div> </div> <span class="comment-count"> <i class="fa-regular fa-comments"></i> 1 </span> <div class="clearfix"></div> </div> </div> <div class="clearfix"></div> </a> <div class="clearfix"></div> </li> <li class="idea" id="6862023372384402782"> <div class="idea-endorsement" id="idea-6862023372384402782-endorsement"> <a class="btn-vote" data-disable="true" href="/auth/jwt?return_to=%2Fideas%2FWEBFLOW-I-2038%3Freturn_to_action%3Dvote_6862023372384402782"> <span class="vote-count"> 25 </span> <span class="vote-status"> Vote </span> </a> <div class="popover vote-popover portal-user"></div> </div> <a class="idea-link" href="/ideas/WEBFLOW-I-3218"> <div class="idea-details"> <h3> Serve images in next-gen formats <span class="label-private-idea"> <span class="tooltip-trigger-container" tabindex="0"> <i class="fa-solid fa-merge"></i> </span> <aha-tooltip> Merged </aha-tooltip> </span> </h3> <div class="description"> I think this will be very useful because it will improve sites speed considerably and it would add to the advantages that webflow can offer compared to its competitors. </div> <div class="idea-meta"> <span class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/9530c7e244b1e6583049af5824142d2a?default=mm&rating=G&size=32" width="32" height="32" /> </span> <div class="idea-meta-created"> <div class="idea-meta-secondary"> Created 17 Aug 18:35 by Studio Two </div> <div class="idea-meta-secondary"> Assets </div> </div> <span class="comment-count"> <i class="fa-regular fa-comments"></i> 3 </span> <div class="clearfix"></div> </div> </div> <div class="clearfix"></div> </a> <div class="clearfix"></div> </li> <li class="idea" id="6995652474633878845"> <div class="idea-endorsement" id="idea-6995652474633878845-endorsement"> <a class="btn-vote" data-disable="true" href="/auth/jwt?return_to=%2Fideas%2FWEBFLOW-I-2038%3Freturn_to_action%3Dvote_6995652474633878845"> <span class="vote-count"> 0 </span> <span class="vote-status"> Vote </span> </a> <div class="popover vote-popover portal-user"></div> </div> <a class="idea-link" href="/ideas/WEBFLOW-I-4422"> <div class="idea-details"> <h3> Support for next-gen images like JPEG 2000, JPEG XR, and WebP. <span class="label-private-idea"> <span class="tooltip-trigger-container" tabindex="0"> <i class="fa-solid fa-merge"></i> </span> <aha-tooltip> Merged </aha-tooltip> </span> </h3> <div class="description"> Every time I test my client's sites on PageSpeed Insights, my images really really slow down my site. I've gone through the process of making them as small as possible without loosing quality and I compress all of them on Tiny PNG. However, my pag... </div> <div class="idea-meta"> <span class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/cc559d8042abcf9083225a5b1a5845be?default=mm&rating=G&size=32" width="32" height="32" /> </span> <div class="idea-meta-created"> <div class="idea-meta-secondary"> Created 12 Aug 21:04 by Timothy Prescott </div> <div class="idea-meta-secondary"> Elements </div> </div> <span class="comment-count"> <i class="fa-regular fa-comments"></i> 0 </span> <div class="clearfix"></div> </div> </div> <div class="clearfix"></div> </a> <div class="clearfix"></div> </li> </ul> </div> </div> </div> </div> <div class="right-sidebar"> <div class="sidebar-section"> <div class="signup-link"> <a href="/portal_session/new?return_to=%2Fideas%2FWEBFLOW-I-2038">Log in / Sign up</a> </div> </div> <div class="sidebar-section idea-subscription" id="idea-6694176356779818346-subscription"> <a class="btn btn-outline btn-subscribe" href="/auth/jwt?return_to=%2Fideas%2FWEBFLOW-I-2038%3Freturn_to_action%3Dsubscribe_6694176356779818346">Subscribe</a> <p class="reason">You won't be notified about changes to this idea.</p> <div class="popover subscribe-popover portal-user"></div> </div> <h3 class="sidebar-header"> Related ideas </h3> <div id="idea-related-ideas"> <img src="https://cdn.aha.io/assets/busy.b7e3690b94c43e444483fbc7927a6a9a.gif" /> <script> //<![CDATA[ $("#idea-related-ideas").load('/ideas/WEBFLOW-I-2038/related_ideas') //]]> </script> </div> </div> </div> </div> <script> //<![CDATA[ //]]> </script> <footer> <div class="w-container"> <span class="footer-text">© 2025, Webflow, Inc. All Rights Reserved.</span> <span class="footer-text footer-divider">|</span> <a class="footer-text footer-link" href="https://webflow.com">Webflow Home</a> <span class="footer-text footer-divider">|</span> <a class="footer-text footer-link" href="https://university.webflow.com/">Webflow University</a> </div> </footer> <script type="text/javascript"> try { window.ignoreEvalErrors = true; window.eval("//Replace post comment button if the user is not logged in\nvar commentBtn = document.querySelector(\".idea-comment a\");\nif (commentBtn){\n commentBtn.parentNode.removeChild(commentBtn);\n var alertDiv = document.createElement(\"div\");\n alertDiv.setAttribute('class', 'alert');\n var node = document.createTextNode(\"Log into your Webflow account to leave a comment.\");\n alertDiv.appendChild(node);\n var parentElement = document.querySelector(\"div.tabbable\");\n var referenceNode = document.querySelector(\"div.tab-content.comments-tab-content\")\n parentElement.insertBefore(alertDiv, referenceNode);\n}\n\n//Replace SSO alert in Edit Profile page\nvar ssoAlert = document.querySelector(\".edit-profile div.alert\");\nif (ssoAlert){\n ssoAlert.innerHTML = \"Update your profile through \u003ca href='https://webflow.com/dashboard/account/general'\u003eWebflow account settings\u003c/a\u003e\"\n}\n\n//Set message for empty wishlist\nvar ideasUl = document.querySelector(\"ul.list-ideas.ideas\");\nif (ideasUl){\n if (ideasUl.getElementsByTagName(\"li\").length == 0){\n var alertDiv = document.createElement(\"div\");\n alertDiv.setAttribute('class', 'alert');\n var node = document.createTextNode(\"No wishlist ideas found\");\n alertDiv.appendChild(node);\n var parentElement = document.querySelector(\"div.portal-content\");\n parentElement.appendChild(alertDiv);\n }\n}\n\n//Add custom styles for iframe\nwindow.onload = function() {\n checkIframeLoaded(10)();\n var titleEl = document.getElementsByTagName(\"title\")[0];\n var docEl = document.documentElement;\n\n if (docEl \u0026\u0026 docEl.addEventListener) {\n docEl.addEventListener(\"DOMSubtreeModified\", function(evt) {\n var t = evt.target;\n if (t === titleEl || (t.parentNode \u0026\u0026 t.parentNode === titleEl)) {\n titleModified();\n }\n }, false);\n } else {\n document.onpropertychange = function() {\n if (window.event.propertyName == \"title\") {\n titleModified();\n }\n };\n }\n};\n\nfunction titleModified() {\n checkIframeLoaded(10)();\n}\n\nfunction checkIframeLoaded(times) {\n return function() {\n // Get a handle to the iframe element\n var iframe = document.querySelector(\"div.mce-edit-area iframe\");\n if (iframe){\n var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;\n // Check if loading is complete\n if ( iframeDoc.readyState == 'complete' ) {\n // The loading is complete, call the function we want executed once the iframe is loaded\n afterLoading();\n return;\n } \n }\n\n if(times \u003e 0) { \n // If we are here, it is not loaded. Set things up so we check the status again in 100 milliseconds\n window.setTimeout(checkIframeLoaded(times - 1), 100);\n }\n }\n}\n\nfunction afterLoading(){\n var iframe = document.querySelector(\"div.mce-edit-area iframe\");\n if (iframe){\n var link = document.createElement('link');\n link.type = \"text/css\";\n link.rel = \"stylesheet\";\n link.href = \"https://d3e54v103j8qbb.cloudfront.net/css/wishlist-mce-styles-v2.93240b9fa7.css\";\n iframe.contentWindow.document.querySelector(\"head\").appendChild(link);\n }\n}"); } catch(e) { window.console && console.error(e); } </script> <div class="modal hide fade" id="modal-window"></div> </body> </html>

CINXE.COM

Add modern File Types like JPEG 2000, JPEG XR and | Webflow Wishlist