[{"data":1,"prerenderedAt":1005},["ShallowReactive",2],{"sidebar-posts":3,"post-count":78,"post-\u002Foptimized-responsive-lazyloading-images-with-nuxt":79,"page-\u002Foptimized-responsive-lazyloading-images-with-nuxt":995,"neighbours-\u002Foptimized-responsive-lazyloading-images-with-nuxt":997,"post-projects-\u002Foptimized-responsive-lazyloading-images-with-nuxt":1002},[4,8,12,16,19,23,27,31,35,39,43,47,50,54,58,62,66,70,74],{"path":5,"title":6,"date":7},"\u002Fbuilding-take-contentin-mobile-app","I built a ContentIn mobile app in one night and tested it from the sauna","2026-10-29",{"path":9,"title":10,"date":11},"\u002Fmac-mini-claude-code-dev-server","My Mac Mini is my dev server, and one Claude Code session runs each project","2026-10-27",{"path":13,"title":14,"date":15},"\u002Fmax-out-claude-code-every-week","Max out Claude Code every week until I make 10K a month","2026-10-26",{"path":17,"title":18,"date":15},"\u002Fmaxing-out-claude-code-week-1","Maxing out Claude Code, week 1: a new blog, an app stuck in review and a full Mac Mini",{"path":20,"title":21,"date":22},"\u002Ffully-ai-coded-blog-claude-code","This blog is now fully AI coded and run by an agent I just talk to","2026-10-24",{"path":24,"title":25,"date":26},"\u002Fwhy-i-built-pepelly","Why I built Pepelly, a YouTube app for my daughter without the brain rot","2026-10-22",{"path":28,"title":29,"date":30},"\u002Fhow-i-built-an-equity-tracking-app-for-bootstrap-founders-in-a-weekend","How I Built an Equity Tracking App for Bootstrap Founders in a Weekend","2024-11-25",{"path":32,"title":33,"date":34},"\u002Fbuilding-directory-website-with-ai-in-a-day","How I Built a Directory Website in a Day with AI—and Why It's a Game-Changer for SaaS Traffic","2024-11-10",{"path":36,"title":37,"date":38},"\u002Fnetlify-build-plugin-for-nuxt-dynamic-routes","Use a netlify build plugin to generate your nuxt routes","2020-08-08",{"path":40,"title":41,"date":42},"\u002Foptimized-responsive-lazyloading-images-with-nuxt","How to use optimized, responsive and lazyloading images in a nuxt project","2019-11-16",{"path":44,"title":45,"date":46},"\u002Fnuxt-jam-stack","Building a SEO optimized blog with a Nuxt JAM stack and Markdown files","2019-11-07",{"path":48,"title":49,"date":46},"\u002Fprismjs-nuxtjs-static-pages","Getting Prismjs working with Nuxt",{"path":51,"title":52,"date":53},"\u002Fkeylogs-live-on-producthunt","My second launch this year: Keylogs is LIVE on Product Hunt today!","2018-02-12",{"path":55,"title":56,"date":57},"\u002Fa-new-year-and-a-new-startup","A new year and a new startup","2018-01-19",{"path":59,"title":60,"date":61},"\u002Fabout-mydash-whats-the-stack-and-why-did-i-choose-it","About myDash - What’s the stack and why did I choose it?","2017-10-16",{"path":63,"title":64,"date":65},"\u002Fsuper-fast-wordpress-hosting-germany","WordPress hosting test: super fast on raidboxes.eu","2016-12-09",{"path":67,"title":68,"date":69},"\u002Fbest-resources-for-stock-images","Best resources for stock images","2016-12-05",{"path":71,"title":72,"date":73},"\u002Fset-up-automatic-backups-for-parse-server-on-digital-ocean","Set up automatic backups for parse-server on digital ocean","2016-05-25",{"path":75,"title":76,"date":77},"\u002Fhow-to-run-parse-dashboard-alongside-parse-server-on-digital-ocean","How to setup parse-dashboard alongside parse-server on Digital Ocean","2016-05-18",19,{"id":80,"title":41,"body":81,"date":42,"description":982,"draft":983,"extension":984,"image":985,"meta":986,"navigation":130,"path":40,"projects":987,"readingTime":324,"seo":989,"stem":990,"tags":991,"updated":995,"__hash__":996},"posts\u002Foptimized-responsive-lazyloading-images-with-nuxt.md",{"type":82,"value":83,"toc":971},"minimark",[84,99,106,117,141,144,154,159,173,177,186,230,241,286,297,463,470,531,534,538,546,549,577,583,601,604,665,679,682,699,704,709,805,809,827,865,868,872,885,888,912,923,927,930,948,951,955,958,964,967],[85,86,87],"p",{},[88,89,90,91,98],"span",{},"Photo by ",[92,93,97],"a",{"href":94,"rel":95},"https:\u002F\u002Funsplash.com\u002F@chuttersnap?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText",[96],"nofollow","chuttersnap"," on Unsplash",[85,100,101,102,105],{},"So the goal was to get this blog super fast by using static pages and hosting it on netlify to make use of their CDN. So after getting Nuxt to work with markdown and render all pages as described ",[92,103,104],{"href":44},"here"," I uploaded the files to netlify - eager to see the site's speed.",[85,107,108,109,116],{},"Imagine my face when I saw a big red, devastating ",[88,110,112],{"style":111},"color:red;font-weight:600",[113,114,115],"strong",{},"22%"," on GT-Metrix.",[118,119,122,131],"div",{"className":120},[121],"mx-auto",[123,124],"iframe",{"className":125,"src":126,"width":127,"height":128,"frameBorder":129,"allowFullScreen":130},[121],"https:\u002F\u002Fgiphy.com\u002Fembed\u002FaWPGuTlDqq2yc",480,252,"0",true,[85,132,135],{"className":133},[134],"text-center",[92,136,140],{"href":137,"className":138},"https:\u002F\u002Fgiphy.com\u002Fgifs\u002Fcelebrity-reshuffle-aWPGuTlDqq2yc",[139],"text-sm","via GIPHY",[85,142,143],{},"On closer inspection I found out that the website was actually well up in the high 90ies for every aspect but for images. The rating was brought down exclusively by these two factors:",[145,146,147,151],"ul",{},[148,149,150],"li",{},"Serve scaled images",[148,152,153],{},"Optimize images",[155,156,158],"h2",{"id":157},"lazyloading-and-optimization-to-the-rescue","Lazyloading and optimization to the rescue",[85,160,161,162,167,168,172],{},"So obviously I had to do something. In other projects I tend to use a service like ",[92,163,166],{"href":164,"rel":165},"https:\u002F\u002Fwww.imgix.com\u002F",[96],"imgx"," for ease of image handling but this seemed overkill to implement in a simple blog like this. Also CDN already comes with netlify. I wanted a way to kinda automatically use a ",[169,170,171],"code",{},"srcset"," to serve optimized images and also lazy load images on the page. So I dived into the vast world of webpack\u002Fnuxt\u002Fnpm packages to find something that would solve my issue.",[155,174,176],{"id":175},"lazyloading-images-in-nuxt","Lazyloading images in nuxt",[85,178,179,180,185],{},"Lazyloading was actually fairly easy to implement. The package I found working best is ",[92,181,184],{"href":182,"rel":183},"https:\u002F\u002Fgithub.com\u002FaFarkas\u002Flazysizes",[96],"lazysizes",". Simply install it with you package manager of choice:",[187,188,193],"pre",{"className":189,"code":190,"language":191,"meta":192,"style":192},"language-bash shiki shiki-themes derkinzi-tomorrow-night","npm install lazysizes\n\u002F\u002F or\nyarn add lazysizes\n","bash","",[169,194,195,210,219],{"__ignoreMap":192},[88,196,199,203,207],{"class":197,"line":198},"line",1,[88,200,202],{"class":201},"sHQA9","npm",[88,204,206],{"class":205},"sRYIx"," install",[88,208,209],{"class":205}," lazysizes\n",[88,211,213,216],{"class":197,"line":212},2,[88,214,215],{"class":201},"\u002F\u002F",[88,217,218],{"class":205}," or\n",[88,220,222,225,228],{"class":197,"line":221},3,[88,223,224],{"class":201},"yarn",[88,226,227],{"class":205}," add",[88,229,209],{"class":205},[85,231,232,233,236,237,240],{},"Then create a nuxt plugin for it in the ",[169,234,235],{},"\u002Fplugins"," folder. Make sure to add ",[169,238,239],{},".client.js"," to the filename to make sure it's run on the client side:",[187,242,246],{"className":243,"code":244,"language":245,"meta":192,"style":192},"language-javascript shiki shiki-themes derkinzi-tomorrow-night","\u002F\u002F lazysizes.client.js\nimport lazySizes from 'lazysizes'\nexport default lazySizes\n","javascript",[169,247,248,254,275],{"__ignoreMap":192},[88,249,250],{"class":197,"line":198},[88,251,253],{"class":252},"sUXBo","\u002F\u002F lazysizes.client.js\n",[88,255,256,260,263,266,270,272],{"class":197,"line":212},[88,257,259],{"class":258},"sm2d5","import",[88,261,262],{"class":205}," lazySizes",[88,264,265],{"class":258}," from",[88,267,269],{"class":268},"s2jRq"," '",[88,271,184],{"class":205},[88,273,274],{"class":268},"'\n",[88,276,277,280,283],{"class":197,"line":221},[88,278,279],{"class":258},"export",[88,281,282],{"class":258}," default",[88,284,285],{"class":205}," lazySizes\n",[85,287,288,289,292,293,296],{},"No simply include this in the plugins sections of your ",[169,290,291],{},"nuxt.config.js"," and make sure ",[169,294,295],{},"data-src"," attributes get handled on build:",[187,298,300],{"className":243,"code":299,"language":245,"meta":192,"style":192},"plugins: [\n  '~\u002Fplugins\u002Flazysizes.client.js'\n],\nbuild: {\n  extend (config, { isDev, isClient, loaders: { vue } }) {\n    if (isClient) {\n      vue.transformAssetUrls.img = ['data-src', 'src']\n      vue.transformAssetUrls.source = ['data-srcset', 'srcset']\n    }\n  }\n}\n",[169,301,302,307,317,322,328,368,381,416,445,451,457],{"__ignoreMap":192},[88,303,304],{"class":197,"line":198},[88,305,306],{"class":268},"plugins: [\n",[88,308,309,312,315],{"class":197,"line":212},[88,310,311],{"class":268},"  '",[88,313,314],{"class":205},"~\u002Fplugins\u002Flazysizes.client.js",[88,316,274],{"class":268},[88,318,319],{"class":197,"line":221},[88,320,321],{"class":268},"],\n",[88,323,325],{"class":197,"line":324},4,[88,326,327],{"class":268},"build: {\n",[88,329,331,335,338,341,344,347,350,353,355,359,362,365],{"class":197,"line":330},5,[88,332,334],{"class":333},"s8nuv","  extend",[88,336,337],{"class":268}," (",[88,339,340],{"class":205},"config",[88,342,343],{"class":268},", { ",[88,345,346],{"class":205},"isDev",[88,348,349],{"class":268},", ",[88,351,352],{"class":205},"isClient",[88,354,349],{"class":268},[88,356,358],{"class":357},"sJEhD","loaders",[88,360,361],{"class":268},": { ",[88,363,364],{"class":205},"vue",[88,366,367],{"class":268}," } }) {\n",[88,369,371,374,376,378],{"class":197,"line":370},6,[88,372,373],{"class":258},"    if",[88,375,337],{"class":268},[88,377,352],{"class":205},[88,379,380],{"class":268},") {\n",[88,382,384,387,390,394,397,400,402,404,406,408,411,413],{"class":197,"line":383},7,[88,385,386],{"class":268},"      vue.transformAssetUrls.",[88,388,389],{"class":357},"img",[88,391,393],{"class":392},"sJYcM"," =",[88,395,396],{"class":268}," [",[88,398,399],{"class":268},"'",[88,401,295],{"class":205},[88,403,399],{"class":268},[88,405,349],{"class":268},[88,407,399],{"class":268},[88,409,410],{"class":205},"src",[88,412,399],{"class":268},[88,414,415],{"class":268},"]\n",[88,417,419,421,424,426,428,430,433,435,437,439,441,443],{"class":197,"line":418},8,[88,420,386],{"class":268},[88,422,423],{"class":357},"source",[88,425,393],{"class":392},[88,427,396],{"class":268},[88,429,399],{"class":268},[88,431,432],{"class":205},"data-srcset",[88,434,399],{"class":268},[88,436,349],{"class":268},[88,438,399],{"class":268},[88,440,171],{"class":205},[88,442,399],{"class":268},[88,444,415],{"class":268},[88,446,448],{"class":197,"line":447},9,[88,449,450],{"class":268},"    }\n",[88,452,454],{"class":197,"line":453},10,[88,455,456],{"class":268},"  }\n",[88,458,460],{"class":197,"line":459},11,[88,461,462],{"class":268},"}\n",[85,464,465,466,469],{},"That's it. If you now simply add the ",[169,467,468],{},".lazyload"," class to any image tag it should work out of the box! (If you store your images in the assets folder)",[187,471,475],{"className":472,"code":473,"language":474,"meta":192,"style":192},"language-html shiki shiki-themes derkinzi-tomorrow-night","\u003Ctemplate>\n  \u003Cimg data-src=\"~assets\u002Fimages\u002Fawesomeimage.jpg\" class=\"lazyload\">\n\u003C\u002Ftemplate>\n","html",[169,476,477,489,522],{"__ignoreMap":192},[88,478,479,482,486],{"class":197,"line":198},[88,480,481],{"class":268},"\u003C",[88,483,485],{"class":484},"sx7Ch","template",[88,487,488],{"class":268},">\n",[88,490,491,494,497,500,503,506,508,511,513,515,518,520],{"class":197,"line":212},[88,492,493],{"class":268},"  \u003C",[88,495,496],{"class":484},"img data-src",[88,498,499],{"class":268},"=",[88,501,502],{"class":268},"\"",[88,504,505],{"class":205},"~assets\u002Fimages\u002Fawesomeimage.jpg",[88,507,502],{"class":268},[88,509,510],{"class":484}," class",[88,512,499],{"class":268},[88,514,502],{"class":268},[88,516,517],{"class":205},"lazyload",[88,519,502],{"class":268},[88,521,488],{"class":268},[88,523,524,527,529],{"class":197,"line":221},[88,525,526],{"class":268},"\u003C\u002F",[88,528,485],{"class":484},[88,530,488],{"class":268},[85,532,533],{},"Just lazyloading shot up the GT-Metrix rating into the orange area of around 70-80% I think. But the \"Optimize images\" section was still very poor. So let's tackle this next.",[155,535,537],{"id":536},"automatically-serve-optimized-responsive-images-with-nuxt","Automatically serve optimized, responsive images with nuxt",[85,539,540,541],{},"This part was a lot trickier and I had to try a few packages before I got it to work smoothly. Of course one can always make a big difference with carefully pre-optimizing the images and converting them to a certain size. But responsiveness will always be tricky with this and also this blog is supposed to be easy to use so I wanted to automate this as much as possible. The package that worked for me in the end is ",[92,542,545],{"href":543,"rel":544},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fnuxt-responsive-loader",[96],"nuxt-responsive-loader",[85,547,548],{},"Let's start off by installing it:",[187,550,552],{"className":189,"code":551,"language":191,"meta":192,"style":192},"npm install nuxt-responsive-loader\n\u002F\u002F or\nyarn add nuxt-responsive-loader\n",[169,553,554,563,569],{"__ignoreMap":192},[88,555,556,558,560],{"class":197,"line":198},[88,557,202],{"class":201},[88,559,206],{"class":205},[88,561,562],{"class":205}," nuxt-responsive-loader\n",[88,564,565,567],{"class":197,"line":212},[88,566,215],{"class":201},[88,568,218],{"class":205},[88,570,571,573,575],{"class":197,"line":221},[88,572,224],{"class":201},[88,574,227],{"class":205},[88,576,562],{"class":205},[85,578,579,580,582],{},"Then include the module in your ",[169,581,291],{},":",[187,584,586],{"className":243,"code":585,"language":245,"meta":192,"style":192},"modules: ['nuxt-responsive-loader']\n",[169,587,588],{"__ignoreMap":192},[88,589,590,593,595,597,599],{"class":197,"line":198},[88,591,592],{"class":268},"modules: [",[88,594,399],{"class":268},[88,596,545],{"class":205},[88,598,399],{"class":268},[88,600,415],{"class":268},[85,602,603],{},"This should be enough to make it work. Try it in the markup by using:",[187,605,607],{"className":472,"code":606,"language":474,"meta":192,"style":192},"\u003Ctemplate>\n  \u003Cimg :data-src=\"'~\u002Fassets\u002Fimages\u002Fawesomeimage.jpg\" :data-srcset=\"require('~\u002Fassets\u002Fimages\u002Fawesomeimage.jpg).srcSet\" class=\"lazyload\">\n\u003C\u002Ftemplate>\n",[169,608,609,617,657],{"__ignoreMap":192},[88,610,611,613,615],{"class":197,"line":198},[88,612,481],{"class":268},[88,614,485],{"class":484},[88,616,488],{"class":268},[88,618,619,621,624,626,628,631,633,636,638,640,643,645,647,649,651,653,655],{"class":197,"line":212},[88,620,493],{"class":268},[88,622,623],{"class":484},"img :data-src",[88,625,499],{"class":268},[88,627,502],{"class":268},[88,629,630],{"class":205},"'~\u002Fassets\u002Fimages\u002Fawesomeimage.jpg",[88,632,502],{"class":268},[88,634,635],{"class":484}," :data-srcset",[88,637,499],{"class":268},[88,639,502],{"class":268},[88,641,642],{"class":205},"require('~\u002Fassets\u002Fimages\u002Fawesomeimage.jpg).srcSet",[88,644,502],{"class":268},[88,646,510],{"class":484},[88,648,499],{"class":268},[88,650,502],{"class":268},[88,652,517],{"class":205},[88,654,502],{"class":268},[88,656,488],{"class":268},[88,658,659,661,663],{"class":197,"line":221},[88,660,526],{"class":268},[88,662,485],{"class":484},[88,664,488],{"class":268},[85,666,667,668,671,672,675,676,678],{},"See how it combines well with the ",[169,669,670],{},"data"," prefix and class of the lazyloading above. Use normal ",[169,673,674],{},":src","and ",[169,677,171],{}," if you don't want\u002Fhave that.",[85,680,681],{},"While this should work out of the box I had a few issues with the setup:",[145,683,684,687,690,693,696],{},[148,685,686],{},"Image sizes did not really fit my needs",[148,688,689],{},"Image names where random hashes which is not cool for SEO",[148,691,692],{},"building the project took long and sometimes felt like it's clogging up",[148,694,695],{},"Browser was picking up the wrong image sizes",[148,697,698],{},"images in the blog content where not effected",[700,701,703],"h3",{"id":702},"optimize-image-sizes-and-names","Optimize image sizes and names",[85,705,706,707,582],{},"Luckily the first two points where easy to adjust in the plugins settings in ",[169,708,291],{},[187,710,712],{"className":243,"code":711,"language":245,"meta":192,"style":192},"...\nresponsiveLoader: {\n  name: 'images\u002F[name]-[width].[ext]', \u002F\u002F use [name] to keep the original filename\n  sizes: [320, 640, 768, 960, 1024, 1280, 1600, 1920], \u002F\u002F array of image sizes - adjust to your layout needs\n  quality: 85 \u002F\u002F 85 is default. Tweak this if you need to\n...\n",[169,713,714,719,724,741,790,801],{"__ignoreMap":192},[88,715,716],{"class":197,"line":198},[88,717,718],{"class":392},"...\n",[88,720,721],{"class":197,"line":212},[88,722,723],{"class":268},"responsiveLoader: {\n",[88,725,726,729,731,734,736,738],{"class":197,"line":221},[88,727,728],{"class":268},"  name: ",[88,730,399],{"class":268},[88,732,733],{"class":205},"images\u002F[name]-[width].[ext]",[88,735,399],{"class":268},[88,737,349],{"class":268},[88,739,740],{"class":252},"\u002F\u002F use [name] to keep the original filename\n",[88,742,743,746,749,751,754,756,759,761,764,766,769,771,774,776,779,781,784,787],{"class":197,"line":324},[88,744,745],{"class":268},"  sizes: [",[88,747,748],{"class":333},"320",[88,750,349],{"class":268},[88,752,753],{"class":333},"640",[88,755,349],{"class":268},[88,757,758],{"class":333},"768",[88,760,349],{"class":268},[88,762,763],{"class":333},"960",[88,765,349],{"class":268},[88,767,768],{"class":333},"1024",[88,770,349],{"class":268},[88,772,773],{"class":333},"1280",[88,775,349],{"class":268},[88,777,778],{"class":333},"1600",[88,780,349],{"class":268},[88,782,783],{"class":333},"1920",[88,785,786],{"class":268},"], ",[88,788,789],{"class":252},"\u002F\u002F array of image sizes - adjust to your layout needs\n",[88,791,792,795,798],{"class":197,"line":330},[88,793,794],{"class":268},"  quality: ",[88,796,797],{"class":333},"85",[88,799,800],{"class":252}," \u002F\u002F 85 is default. Tweak this if you need to\n",[88,802,803],{"class":197,"line":370},[88,804,718],{"class":392},[700,806,808],{"id":807},"make-nuxt-build-process-faster","Make nuxt build process faster",[85,810,811,812,814,815,818,819,822,823,826],{},"As for the building speed ",[169,813,545],{}," allows the use of two image processers. By default it uses ",[169,816,817],{},"jimp",". If you feel like this makes your build too slow I highly recommend trying the other one ",[169,820,821],{},"sharp",". Simply ",[169,824,825],{},"npm i sharp"," and set it in the config file:",[187,828,830],{"className":243,"code":829,"language":245,"meta":192,"style":192},"...\nresponsiveLoader: {\n  adapter: require('responsive-loader\u002Fsharp'),\n...\n",[169,831,832,836,840,861],{"__ignoreMap":192},[88,833,834],{"class":197,"line":198},[88,835,718],{"class":392},[88,837,838],{"class":197,"line":212},[88,839,723],{"class":268},[88,841,842,845,848,851,853,856,858],{"class":197,"line":221},[88,843,844],{"class":268},"  adapter: ",[88,846,847],{"class":333},"require",[88,849,850],{"class":268},"(",[88,852,399],{"class":268},[88,854,855],{"class":205},"responsive-loader\u002Fsharp",[88,857,399],{"class":268},[88,859,860],{"class":268},"),\n",[88,862,863],{"class":197,"line":324},[88,864,718],{"class":392},[85,866,867],{},"It is still slower than without the optimization but bareable. If anybody knows how to skip the optimization in development let me know! ;)",[700,869,871],{"id":870},"make-browser-use-the-right-image-sizes","Make browser use the right image sizes",[85,873,874,875,880,881,884],{},"The next challenge I had was mainly due to my layout: because of the sidebar menu browsers would pick up the wrong size of the srcset images. They always use the full window width. After some googling around I found the answer: the ",[92,876,879],{"href":877,"rel":878},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FLearn\u002FHTML\u002FMultimedia_and_embedding\u002FResponsive_images",[96],"sizes attribute"," for the ",[169,882,883],{},"\u003Cimg\u002F>"," tag.",[85,886,887],{},"Here is how it works in my case for the featured image:",[187,889,891],{"className":472,"code":890,"language":474,"meta":192,"style":192},"\u003Cimg sizes=\"(min-width: 768px) 60vw, 95vw\"\u002F>\n",[169,892,893],{"__ignoreMap":192},[88,894,895,897,900,902,904,907,909],{"class":197,"line":198},[88,896,481],{"class":268},[88,898,899],{"class":484},"img sizes",[88,901,499],{"class":268},[88,903,502],{"class":268},[88,905,906],{"class":205},"(min-width: 768px) 60vw, 95vw",[88,908,502],{"class":268},[88,910,911],{"class":268},"\u002F>\n",[85,913,914,915,918,919,922],{},"Basically you can give it some css formats. In my case the sidebar only appears for screens bigger than 768px. So for everything bigger than that this tells the image to use ",[169,916,917],{},"60vw"," to pick the image size else default to ",[169,920,921],{},"95vw",". Pretty straight forward - however it took some trial and error to find the correct values I needed.",[700,924,926],{"id":925},"apply-lazyloading-and-optimization-to-images-in-markdown-content","Apply lazyloading and optimization to images in markdown content",[85,928,929],{},"I still haven't solved this part. There are a few ideas:",[145,931,932,935,945],{},[148,933,934],{},"parse the html to replace attributes, links and classes,",[148,936,937,938,941,942,944],{},"use tailwindcss ",[169,939,940],{},"@apply","to apply the ",[169,943,468],{}," class to all images in the content",[148,946,947],{},"or custommize somthing with the markdownIt setting of `frontmatter-markdown-loader``",[85,949,950],{},"I'll update here as soon as I've cracked it!",[155,952,954],{"id":953},"the-result","The result",[85,956,957],{},"I'm quite happy with what I got out of these two improvements:",[85,959,960],{},[389,961],{"alt":962,"src":963},"GT Metrix derkinzi.de","\u002Fimg\u002Fgt-metrix-derkinzi.jpg",[85,965,966],{},"There is always something more to optimize but for now this gets me in the range where I want to be.",[968,969,970],"style",{},"html pre.shiki code .sHQA9, html code.shiki .sHQA9{--shiki-default:#6196CC}html pre.shiki code .sRYIx, html code.shiki .sRYIx{--shiki-default:#7EC699}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sUXBo, html code.shiki .sUXBo{--shiki-default:#999999;--shiki-default-font-style:italic}html pre.shiki code .sm2d5, html code.shiki .sm2d5{--shiki-default:#CC99CD}html pre.shiki code .s2jRq, html code.shiki .s2jRq{--shiki-default:#CCCCCC}html pre.shiki code .s8nuv, html code.shiki .s8nuv{--shiki-default:#F08D49}html pre.shiki code .sJEhD, html code.shiki .sJEhD{--shiki-default:#F8C555}html pre.shiki code .sJYcM, html code.shiki .sJYcM{--shiki-default:#67CDCC}html pre.shiki code .sx7Ch, html code.shiki .sx7Ch{--shiki-default:#E2777A}",{"title":192,"searchDepth":212,"depth":221,"links":972},[973,974,975,981],{"id":157,"depth":212,"text":158},{"id":175,"depth":212,"text":176},{"id":536,"depth":212,"text":537,"children":976},[977,978,979,980],{"id":702,"depth":221,"text":703},{"id":807,"depth":221,"text":808},{"id":870,"depth":221,"text":871},{"id":925,"depth":221,"text":926},{"id":953,"depth":212,"text":954},"How I went from a devastating 22% on GT-Metrix to a fast static blog with optimized, responsive and lazyloading images in Nuxt.",false,"md","\u002Fimg\u002Foptimize-images-nuxtjs.jpg",{},[988],"derkinzi",{"title":41,"description":982},"optimized-responsive-lazyloading-images-with-nuxt",[992,993,994],"nuxt","jamstack","frontend",null,"0MKSqCfbzhrxxEhYuIWHaKHiiYwDatm9JuMeBUElltw",[998,1000],{"title":37,"path":36,"stem":999,"children":-1},"netlify-build-plugin-for-nuxt-dynamic-routes",{"title":45,"path":44,"stem":1001,"children":-1},"nuxt-jam-stack",[1003],{"id":988,"title":1004},"derkinzi.de",1793264868513]