{"resource":{"title":"Foundations: Why Image Optimisation Matters & How Browsers Load Images","isPremium":true,"requires":["premium.fsd"],"content":{"type":1,"body":"*Part 1 of 8 — Image Optimisation for the Modern Web*\r\n\r\nIt's a familiar pattern. A team profiles their app to figure out why a page feels slow. The JavaScript bundle is lean. The API is fast. The CSS is minified, gzipped, and tree-shaken. Everything the performance checklists ask for has been done....","isInternal":true},"isActive":true,"stats":{"views":68,"used":0,"likes":0},"published":true,"author":{"id":"3eh0kijZwMrHum8TkMqX","name":"Devtools Tech","username":"devtoolstech"},"resourceId":"CLrYWAoK0LTA67R9oV9H","slug":"foundations-why-image-optimisation-matters-and-how-browsers-load-images---rid---CLrYWAoK0LTA67R9oV9H","createdAt":1779622248760,"showPaywall":true,"needsUpgrade":true,"minimumPlan":"yearly"},"currentUser":null,"isOwner":false,"recommendations":{"questions":[{"_id":"635d19908ea34063779992af","content":{"languages":["javascript","typescript"],"difficulty":1},"tags":["","javascript","arrays","javascript polyfills","interview question","frontend","coding","devtools tech","programming","codedamn","frontend masters","egghead","razorpay","hotstar","tata1mg","swiggy","zomato","array","array find","array every"],"slug":"how-to-implement-array-prototype-every-javascript-interview-question-or-problem-solving-or-javascript-polyfills---qid---z73LTBqI8n43iyjzmPu7","title":"How to implement Array.prototype.every? JavaScript Interview Question | Problem Solving | JavaScript Polyfills","questionId":"z73LTBqI8n43iyjzmPu7"},{"_id":"6307a2a177f9961d5b7cbf53","content":{"languages":["javascript","typescript"],"difficulty":1},"tags":["","javascript","problem solving","oops","inhertiance","javascript prototype","methods","javascript interview questions","vanilla js","beginner frontend questions"],"slug":"how-to-implement-a-developer-builder-interface-or-frontend-problem-solving-or-javascript-interview-question---qid---CjH1hGv2r19ouztiDck2","title":"How to implement a Developer Builder Interface? | Frontend Problem Solving | JavaScript Interview Question ","questionId":"CjH1hGv2r19ouztiDck2"},{"_id":"69d38017a18a6decde96c272","content":{"languages":["javascript","typescript"],"difficulty":1},"tags":["javascript","ui","ux","devtools tech","coding","frontend interview","challenge","array","loopsdd"],"slug":"time-since-last-train---qid---rMKs0FytJJlCqQcRJF8L","title":"Time Since Last Train","questionId":"rMKs0FytJJlCqQcRJF8L"},{"_id":"6689145240795030470d532c","content":{"languages":["react"],"difficulty":4},"tags":["avatar","coding","ui challenge","frontend","devtools tech","take home assignment","frontend ui challenge","tutorial","question","gmail"],"slug":"how-to-build-an-avatar-picker-frontend-ui-coding-challenge---qid---HuqxD3sw8pTmDfz3NvCi","title":"How to build an Avatar Picker? Frontend UI Coding Challenge","questionId":"HuqxD3sw8pTmDfz3NvCi"},{"_id":"5e8ce28fb2cdcd5697fea7bd","content":{"languages":["javascript","typescript"],"difficulty":2},"tags":["node.js","lodash","groupBy","javascript","frontend","code","interview"],"title":"How to implement lodash groupBy functionality? | JavaScript Interview Question | Frontend Problem Solving","questionId":"RDj0FSzOBMyCIuZcgvJc","slug":"how-to-implement-lodash-groupby-functionality-or-javascript-interview-question-or-frontend-problem-solving---qid---RDj0FSzOBMyCIuZcgvJc"}],"resources":[{"_id":"694fda82e4605484c24c29de","content":{"difficulty":4,"domain":1,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","urls","ui","ux","frontend system design","questions","resources","tooling"],"slug":"urls-and-routing-in-frontend-applications---rid---n9dDAOaX0nmLvjnDn0uU","title":"URLs and Routing in Frontend Applications","resourceId":"n9dDAOaX0nmLvjnDn0uU"},{"_id":"692964c58f12450e2fdc9fc1","content":{"difficulty":4,"domain":1,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","ui","software engineering","frontend","coding","ux","devtools tech","tutorial"],"slug":"better-pull-requests-a-practical-guide---rid---H5RpFEKniVoWHsKe15Bg","title":"Better Pull Requests: A Practical Guide","resourceId":"H5RpFEKniVoWHsKe15Bg"},{"_id":"6a12f5ac4b3e6d922c54a48c","content":{"difficulty":1,"domain":1,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","ui","ux","devtools tech","coding","frontend","lazy loading images","responsive images","web performance"],"slug":"lazy-loading-images---rid---YdibwFfrwv3NjOL8RtUV","title":"Lazy Loading Images","resourceId":"YdibwFfrwv3NjOL8RtUV"},{"_id":"5f1ff867cbec5f7ffc0c2fb6","content":{"difficulty":2,"domain":2,"type":1},"tags":["javascript","frontend","reactjs","profiling","performance","chrome","devtools","advanced frontend"],"slug":"profiling-react-performance-with-react-16-and-chrome-devtools---rid---Oj6vkw9ga5NIqw4266kr","title":"Profiling React performance with React 16 and Chrome Devtools.","resourceId":"Oj6vkw9ga5NIqw4266kr"},{"_id":"62056636e12bce537863f36a","content":{"difficulty":1,"domain":1,"type":1,"isInternal":true},"tags":["javascript","remix run","social login","login with google","session","encryption","js fundamentals","remix server"],"slug":"add-social-authentication-to-remix-run-project-or-remix-server---rid---GEN4IbgWorJNeQL7Gkm8","title":"Add Social Authentication to Remix Run Project | Remix Server","resourceId":"GEN4IbgWorJNeQL7Gkm8"}]}}