[{"data":1,"prerenderedAt":57},["ShallowReactive",2],{"\u002Fglossary\u002Fdevice-pixel-ratio-dpr":3,"\u002Fglossary\u002Fdevice-pixel-ratio-dpr:related":40},{"id":4,"title":5,"author":6,"authorImage":7,"body":8,"category":24,"date":25,"description":26,"draft":27,"extension":28,"letter":29,"meta":30,"navigation":31,"path":32,"readTime":33,"related":34,"seo":35,"stem":37,"term":38,"__hash__":39},"glossary\u002Fglossary\u002Fdevice-pixel-ratio-dpr.md","Device Pixel Ratio (DPR)","Fabian Krumbholz","\u002Fimages\u002Fauthors\u002Ffabian-krumbholz.webp",{"type":9,"value":10,"toc":20},"minimark",[11],[12,13,14,15,19],"p",{},"The Device Pixel Ratio indicates the density of pixels on a device's screen. High-resolution displays (like Apple's \"Retina\" screens) have a DPR of 2 or more, meaning they use a 2x2 grid of physical pixels to render what is a single CSS pixel. This is important for ",[16,17,18],"strong",{},"Image Optimization",", as you should serve higher-resolution images to these devices for sharpness, but not images that are so large they waste bandwidth and slow down loading.",{"title":21,"searchDepth":22,"depth":22,"links":23},"",2,[],null,"April 8, 2026","The Device Pixel Ratio indicates the density of pixels on a device's screen. High-resolution displays (like Apple's \"Retina\" screens) have a DPR of 2 or more, meaning they use a 2x2 grid of physica…",false,"md","D",{},true,"\u002Fglossary\u002Fdevice-pixel-ratio-dpr","1 min read",[],{"title":36,"description":26},"Device Pixel Ratio (DPR): Definition | Web Performance Glossary","glossary\u002Fdevice-pixel-ratio-dpr","Device Pixel Ratio","qZvfssLotuHNJnD_lwtoI8c9ZXyUCCVMB-A1FA6vNcE",[41,45,49,53],{"path":42,"title":43,"description":44,"letter":29},"\u002Fglossary\u002Fdom-document-object-model","DOM (Document Object Model)","The DOM is a tree-like representation of all the elements in an HTML document that is created by the browser when it loads a page.",{"path":46,"title":47,"description":48,"letter":29},"\u002Fglossary\u002Fdom-content-loaded","DOM Content Loaded","DOM Content Loaded (DOMContentLoaded or DCL) is a browser event that fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.",{"path":50,"title":51,"description":52,"letter":29},"\u002Fglossary\u002Fdom-size","DOM Size","DOM Size refers to the total number of elements (nodes) and the complexity of their nesting within a page's HTML structure.",{"path":54,"title":55,"description":56,"letter":29},"\u002Fglossary\u002Fdeferred-js-loading","Deferred JS loading","Deferred JS loading is a technique for loading JavaScript files in a non-blocking way using the `defer` attribute on a `\u003Cscript>` tag.",1787756713896]