[{"data":1,"prerenderedAt":264},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-say-no-to-image-reflow-i18n-slugs":134,"language-blog-slug-en-say-no-to-image-reflow":138},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135],{"locale":136,"value":137},"en","say-no-to-image-reflow",{"page":139},{"slug":137,"i18nSlugs":140,"social":142,"title":146,"subtitle":79,"isArchived":147,"headerIllustration":145,"date":148,"authors":149,"introTitle":158,"items":159,"pivots":251,"relatedBlogPosts":262,"tags":263,"onMountedScript":152,"onUnmountedScript":152},[141],{"locale":136,"value":137},{"title":143,"description":144,"image":145},"Say no to image reflow | De Voorhoede","How we fix image reflow by using images with fixed dimensions or a fixed ratio.",null,"Say no to image reflow",true,"2016-11-17T01:00:00.000+01:00",[150],{"name":151,"lastName":152,"slug":153,"image":154},"Jasper","","jasper",{"url":155,"alt":145,"width":156,"height":157},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,"Fixing image reflow with fixed dimensions and fixed ratio.",[160,164,168,172,175,178,183,186,190,193,196,199,202,206,209,212,215,218,221,225,228,232,235,238,241,244,247],{"__typename":161,"id":162,"title":152,"body":163},"TextSectionRecord","458543","\u003Cp>Reflow is annoying. It disorients your users and it’s bad for performance. Careless implementation of images are often the cause of reflow. The good news: you can easily improve this by using fixed dimensions or a fixed aspect ratio.\u003C\u002Fp>",{"__typename":161,"id":165,"title":166,"body":167},"458544","What is reflow?","\u003Cp>\u003Cspan>Reflow happens when the size of an element on the page changes. Such changes force the browser to recalculate the dimensions and position of all the elements and re-render the page. This process is browser-blocking, meaning user interaction or JavaScript can’t be processed until it’s done. Reflow can also cause parts of the page to shift or jump elsewhere. And that’s both annoying and disorienting to your users.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":161,"id":169,"title":170,"body":171},"458545","The image reflow issue","\u003Cp>\u003Cspan>Browsers \u003C\u002Fspan>\u003Cem>lazy load\u003C\u002Fem>\u003Cspan> images by design. Until an image starts to load, the browser doesn’t know the dimensions of the image. So, on render the image causes reflow:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":161,"id":173,"title":152,"body":174},"584391","\u003Cfigure class=\"content-figure\">\n\u003Cp class=\"demo-content demo-content--avatar\">\u003Cimg alt=\"\" data-demo-image=\"https:\u002F\u002Fwww.datocms-assets.com\u002F2850\u002F1505982520-jasper.jpg?fit=crop&h=40&w=40\" \u002F> Text next to image\u003C\u002Fp>\n\u003Cfigcaption>Text next to image reflows on image loaded.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"__typename":161,"id":176,"title":152,"body":177},"458547","\u003Cp>\u003Cspan>This happens when an image is formatted like this:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":179,"id":180,"language":181,"body":182},"CodeBlockRecord","458548","html","\u003Cimg alt=\"\" src=\"avatar.jpg\">\nText next to image.",{"__typename":161,"id":184,"title":152,"body":185},"458549","\u003Cp>\u003Cspan>Let's fix this.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":161,"id":187,"title":188,"body":189},"458550","The fixed width & height fix","\u003Cp>\u003Cspan>The browser shouldn’t have to wait for the image to be loaded to calculate its dimensions. We know which image is going to be loaded, and we know its dimensions — either by looking them up, or by requesting them from your content management system (any decent CMS can tell an image’s width & height). So we can specify the \u003C\u002Fspan>\u003Ccode>width\u003C\u002Fcode>\u003Cspan> and \u003C\u002Fspan>\u003Ccode>height\u003C\u002Fcode>\u003Cspan> directly on the image tag:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":179,"id":191,"language":181,"body":192},"458551","\u003Cimg alt=\"\" src=\"avatar.jpg\"\n     width=\"40\" height=\"40\">\nText next to image.",{"__typename":161,"id":194,"title":152,"body":195},"458552","\u003Cp>\u003Cspan>The fixed dimensions prevent reflow:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":161,"id":197,"title":152,"body":198},"584392","\u003Cfigure class=\"content-figure\">\n\u003Cp class=\"demo-content demo-content--avatar demo-content--fixed\">\u003Cimg alt=\"\" data-demo-image=\"https:\u002F\u002Fwww.datocms-assets.com\u002F2850\u002F1505982520-jasper.jpg?fit=crop&h=40&w=40\" width=\"40\" height=\"40\" \u002F> Text next to image.\u003C\u002Fp>\n\u003Cfigcaption>Fixed image \u003Cem>dimensions\u003C\u002Fem> prevent text reflow.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"__typename":161,"id":200,"title":152,"body":201},"458554","\u003Cp>\u003Cem>Fixed image dimensions prevent text reflow.\u003C\u002Fem>\u003C\u002Fp>\n\u003Cp>Note that we’ve also given our image a background color so it looks like a decent placeholder while the image loads.\u003C\u002Fp>",{"__typename":161,"id":203,"title":204,"body":205},"458555","The responsive image issue","\u003Cp>\u003Cspan>In responsive designs we change our image markup to \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.html5rocks.com\u002Fen\u002Ftutorials\u002Fresponsive\u002Fpicture-element\u002F#toc-introduction\">deliver images at an optimal size using the picture element\u003C\u002Fa>\u003Cspan>:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":179,"id":207,"language":181,"body":208},"458556","Text above image\n\u003Cpicture>\n    \u003C!-- multiple \u003Csource>s here -->\n    \u003Cimg alt=\"Visits spike at 4K around lunch time.\"\n          src=\"graph.jpg\">\n\u003C\u002Fpicture>\nText below image",{"__typename":161,"id":210,"title":152,"body":211},"458562","\u003Cp>\u003Cspan>This markup works well for page wide images which adapt to the size of the viewport. But fixed dimensions are no longer an option as we simply don’t know their width. So instead we typically resort to styles for fluid behaviour:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":179,"id":213,"language":181,"body":214},"458563","img {\n    max-width: 100%;\n    height: auto;\n}",{"__typename":161,"id":216,"title":152,"body":217},"458564","\u003Cp>\u003Cspan>Which again results in unwanted reflow:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":161,"id":219,"title":152,"body":220},"584393","\u003Cfigure class=\"content-figure\">\n\u003Cdiv class=\"demo-content demo-content--ratio\">\n\u003Cp>Text above image.\u003C\u002Fp>\n\u003Cimg alt=\"Visits spike at 4K around lunch time.\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-demo-image=\"https:\u002F\u002Fwww.datocms-assets.com\u002F2651\u002F1501062701-npo-topspin-graph.jpg?auto=compress&w=900\" \u002F>\n\u003Cp>Text below image.\u003C\u002Fp>\n\u003C!-- spacer element to prevent reflow on page: -->\n\u003Cdiv class=\"fixed-ratio\" style=\"padding-bottom: 41.015625%;\" data-demo-spacer=\"\">\n\u003Cdiv class=\"fixed-ratio-content\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cfigcaption>Text below image reflows on image loaded.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"__typename":161,"id":222,"title":223,"body":224},"458567","The fixed ratio fix","\u003Cp>\u003Cspan>The dimensions of a responsive image are no longer fixed. But what remains constant is the aspect ratio of the image height divided by its width. An 16:9 image will remain 16:9 on any screen size. We can use HTML and CSS to create a fixed ratio element:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":179,"id":226,"language":181,"body":227},"458568","\u003Celement class=\"fixed-ratio fixed-ratio-16by9\">\n  \u003Celement class=\"fixed-ratio-content\">\u003C\u002Felement>\n\u003C\u002Felement>",{"__typename":179,"id":229,"language":230,"body":231},"458569","css",".fixed-ratio {\n    display: block;\n    position: relative;\n    height: 0;\n    overflow: hidden;\n}\n\n.fixed-ratio-content {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    max-width: inherit;\n}\n\n.fixed-ratio-16by9 {\n    \u002F* ratio: 100% \u002F (16 \u002F 9) = *\u002F\n    padding-bottom: 56.25%;\n}",{"__typename":161,"id":233,"title":152,"body":234},"458570","\u003Cp>This trick is known as the\u003Cspan> \u003C\u002Fspan>\u003Cem>intrinsic ratio\u003C\u002Fem>\u003Cspan> \u003C\u002Fspan>or\u003Cspan> \u003C\u002Fspan>\u003Cem>padding-bottom hack\u003C\u002Fem>. The\u003Cspan> \u003C\u002Fspan>\u003Ccode>padding-bottom\u003C\u002Fcode>\u003Cspan> \u003C\u002Fspan>property is used to define the height as a percentage of its width. The inner element then spans the full width and height of the outer element.\u003C\u002Fp>\n\u003Cp>This trick works with any element. So we can adapt it to our picture and image element. We use an inline style to define the\u003Cspan> \u003C\u002Fspan>\u003Ccode>padding-bottom\u003C\u002Fcode>\u003Cspan> \u003C\u002Fspan>as aspect ratios differ per image:\u003C\u002Fp>",{"__typename":179,"id":236,"language":181,"body":237},"458571","Text above image\n\u003Cpicture class=\"fixed-ratio\" \n    style=\"padding-bottom:41%;\">\n    \u003C!-- multiple \u003Csource>s here -->\n    \u003Cimg alt=\"Visits spike at 4K around lunch time.\"\n          src=\"graph.jpg\"\n          class=\"fixed-ratio-content\">\n\u003C\u002Fpicture>\nText below image",{"__typename":161,"id":239,"title":152,"body":240},"458572","\u003Cp>Note that we hard-code the padding-bottom to 41%. Fancier would be\u003Cspan> \u003C\u002Fspan>\u003Ccode>style=\"padding-bottom: calc(100%\u002F(990\u002F406))\"\u003C\u002Fcode>. But\u003Cspan> \u003C\u002Fspan>\u003Ca href=\"http:\u002F\u002Fcaniuse.com\u002F#search=calc\">using division or multiplication in calc is still unsupported in ~20% of all browsers\u003C\u002Fa>. So for our site we pre-calculate the padding values server-side.\u003C\u002Fp>\n\u003Cp>With the fixed ratio in place our responsive image loads smoothly inside our placeholder:\u003C\u002Fp>",{"__typename":161,"id":242,"title":152,"body":243},"584437","\u003Cfigure class=\"content-figure\">\n\u003Cdiv class=\"demo-content demo-content--ratio demo-content--fixed\">\n\u003Cp>Text above image.\u003C\u002Fp>\n\u003Cdiv class=\"fixed-ratio\" style=\"padding-bottom: 41.015625%;\">\u003Cimg alt=\"Visits spike at 4K around lunch time.\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-demo-image=\"https:\u002F\u002Fwww.datocms-assets.com\u002F2651\u002F1501062701-npo-topspin-graph.jpg?auto=compress&w=900\" class=\"fixed-ratio-content\" \u002F>\u003C\u002Fdiv>\n\u003Cp>Text below image.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cfigcaption>Fixed image \u003Cem>ratio\u003C\u002Fem> prevent text reflow.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"__typename":161,"id":245,"title":152,"body":246},"458574","\u003Cp>You can apply the fixed ratio technique to other elements like videos too. The upcoming Twitter Bootstrap v4 even ships with a \u003Ca href=\"http:\u002F\u002Fv4-alpha.getbootstrap.com\u002Futilities\u002Fresponsive-helpers\u002F#responsive-embeds\">responsive embed helper\u003C\u002Fa> using this technique.\u003C\u002Fp>",{"__typename":161,"id":248,"title":249,"body":250},"458575","What's next?","\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fblog\u002Fwhy-our-website-is-faster-than-yours\u002F#image-delivery\">Our images are already heavily optimised\u003C\u002Fa>\u003Cspan>. But we could still save on bandwidth by only loading images just before they enter your viewport. And instead of a solid background we could start with a blurred, very low resolution version of the image inlined as a data uri to improve perceived performance. While we're considering it, you can already read about these techniques in this \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fjmperezperez.com\u002Fmedium-image-progressive-loading-placeholder\u002F\">article on progressive image loading with placeholders\u003C\u002Fa>\u003Cspan>.\u003C\u002Fspan>\u003C\u002Fp>",[252],{"title":253,"body":254,"links":255,"mailchimpValue":152,"mailchimpName":152,"mailchimpId":152,"formType":152,"contactPerson":145},"Also in love with the web?","\u003Cp>For us, that’s about technology and user experience. Fast, available for all, enjoyable to use. And fun to build. This is how our team bands together, adhering to the same values, to make sure we achieve a solid result for clients both large and small. Does that fit you?\u003C\u002Fp>\n",[256],{"__typename":257,"id":258,"title":259,"link":260},"InternalLinkRecord","163140992","Join our team",{"__typename":44,"slug":261},"jobs",[],[],1776256144410]