Screen Resolution Optimization

Here is how, in Unreal Engine 5, I profile GPU performance of a packaged project to make it as reliable as possible. Usually doing any measurements in the Editor will introduce some overhead so if you want to know the real performance of the actual product it is best to make a standalone package and run the executable file. To get high-level overview of the GPU performance I call 𝗦𝘁𝗮𝘁 𝗚𝗣𝗨 and 𝗦𝘁𝗮𝘁 𝗨𝗡𝗜𝗧 commands from the UE's console. The top part of the attached image shows the result. We get a list of all GPU render passes sorted by execution time, starting with the most expensive one. This list is updated in real-time. To get a detailed GPU snapshot of a single frame run the command called 𝗣𝗿𝗼𝗳𝗶𝗹𝗲𝗚𝗣𝗨 or alternatively use the keys combo 𝗦𝗵𝗶𝗳𝘁+𝗖𝘁𝗿𝗹+[𝗰𝗼𝗺𝗺𝗮]. This will dump to the Log file a much more comprehensive list of timers, as shown in the bottom part of the attached image. The log file can be found under the path: [𝘗𝘈𝘊𝘒𝘈𝘎𝘌𝘋_𝘗𝘙𝘖𝘑𝘌𝘊𝘛]/[𝘗𝘙𝘖𝘑𝘌𝘊𝘛_𝘕𝘈𝘔𝘌]/𝘚𝘢𝘷𝘦𝘥/𝘓𝘰𝘨𝘴 There are two caveats to be mindful of when measuring GPU performance. - The first one is that you need to turn off VSync. You can do that by calling command 𝗿.𝗩𝗦𝘆𝗻𝗰 𝟬. - The second one is that you need to turn off Async Compute. Overall Async Compute is a good thing for performance (saves ~1 ms of frame time) and you want it enabled in the final product, but when measuring individual render passes performance it is best to turn this off with the command 𝗿.𝗥𝗗𝗚.𝗔𝘀𝘆𝗻𝗰𝗖𝗼𝗺𝗽𝘂𝘁𝗲 𝟬. I wrote more extensively on that in one of my previous posts. And finally it is good to measure performance under various resolutions. And that includes both the actual screen/window's resolution and the internal render resolution. As you probably know, Unreal comes with powerful Temporal Super Resolution (TSR) upscaler which not only can anti-alias the image but also upsample it from say 1920x1080 internal resolution to 3840x2160. ------------------------------ To change the resolution of the screen/window you can use the command: 𝗿.𝗦𝗲𝘁𝗥𝗲𝘀 𝗪𝘅𝗛[𝗳/𝘄] - W and H are the screen size in pixels, and f/w determines if you want the 𝗳ullscreen or the 𝘄indowed mode. ------------------------------ The size of the internal resolution is determined as the percentage of the screen's resolution. If you want 50% of pixels on both the width and height use this command: 𝗿.𝗦𝗰𝗿𝗲𝗲𝗻𝗣𝗲𝗿𝗰𝗲𝗻𝘁𝗮𝗴𝗲 𝟱𝟬 ------------------------------ Finally, I often opt to disable dynamic resolution scaling so that I have consistent measurements regardless of the GPU workload. You can disable dynamic resolution scaling with the command: 𝗿.𝗗𝘆𝗻𝗮𝗺𝗶𝗰𝗥𝗲𝘀.𝗢𝗽𝗲𝗿𝗮𝘁𝗶𝗼𝗻𝗠𝗼𝗱𝗲 𝟬 ------------------------------ As an example, calling: 𝗿.𝗦𝗲𝘁𝗥𝗲𝘀 𝟯𝟴𝟰𝟬𝘅𝟮𝟭𝟲𝟬𝗳 𝗿.𝗦𝗰𝗿𝗲𝗲𝗻𝗣𝗲𝗿𝗰𝗲𝗻𝘁𝗮𝗴𝗲 𝟱𝟬 will result in the fullscreen mode at 3840x2160 resolution, and 1920x1080 internal rendering resolution. .

Every Web Developer Should Know : Here’s how I ensure every website I build is fully responsive and optimized for every screen: 1. Mobile-First Approach - Start with mobile, then scale up. - The majority of users browse on mobile devices. Always design and develop for small screens first, then use media queries to scale for larger screens. Prioritize mobile usability. 2. Flexible Layouts with Fluid Grids - Use relative units (like %, vh, vw) - instead of fixed units (like px) for widths, heights, and margins. - Fluid grids allow your layout to adapt based on the screen size, ensuring a seamless experience on any device, from phones to desktops. 3. Responsive Images - Use `srcset` and `sizes` attributes to load different image sizes based on screen resolution. ( serving better images to the user,improving the website loading time ) 4.Media Queries for Custom Breakpoints -Set breakpoints based on content, not device sizes. - Use media queries to adjust styles for different screen widths. Don’t just rely on the standard breakpoints – customize them to fit your design. 5. Viewport Meta Tag for Proper Scaling - Always include the viewport meta tag in the head of your HTML document. - This tag ensures that your website scales correctly on different devices and prevents zooming issues on mobile. 6.Optimized Fonts and Icons - Use scalable vector graphics (SVGs) for icons. - SVGs are lightweight, resolution-independent, and perfect for responsive design. - Also, use `font-display: swap` for faster text rendering and better UX.

💡How to design for different screen resolution When designing for digital interfaces, especially on mobile devices like the iPhone, there's often confusion between the physical screen resolution (measured in pixels) and the logical resolution used in design tools. Originally, pixels were straightforward 1x1 squares. However, the introduction of high-density "Retina" displays changed this status quo, and designers made a shift to a new abstraction: points (iOS) or density-independent pixels (dp) (Android). In iOS design, the logical resolution (using points) is independent of the physical pixel count. Each point can be represented by multiple pixels depending on the screen's scale factor: This helps achieve consistency across different devices: @1x (1 pixel per point) @2x (4 pixels per point) @3x (9 pixels per point) Examples iPhone 16 Pro Max Logical resolution 440 × 956 pixels Scale factor @3x Screen resolution 1320 × 2868 pixels iPhone 11 Pro Logical Resolution = 375 x 812 pixels Scale Factor @3x Screen Resolution = 1125 × 2436 pixels This abstraction makes it possible to create responsive designs that work well on a variety of devices, regardless of their screen resolution. 📕 Practical tips for designing for different resolution 1️⃣ Design at @1x logical resolution Always use logical resolution when setting up artboards in design tools like Figma. This avoids confusion and matches the numbers developers need to implement. 2️⃣ Use scalable assets Export assets as SVGs for vector elements to ensure they scale perfectly across different resolutions. For raster images (JPEG/PNG), export versions at @1x, @2x, and @3x to maintain high-quality visuals on high-density screens. 3️⃣ Consider Android differences On Android, use density-independent pixels (dp) and scalable pixels (sp for fonts). These units adjust for various screen densities, similar to iOS points. 4️⃣ Keep files lightweight Designing at @1x helps maintain better performance and smaller file sizes, which is crucial when dealing with complex projects with many screens. 📖 Guides & tools ✔ The Ultimate Guide to Screen Resolution (by Francesco Fagioli) https://lnkd.in/dwxBgfKd ✔ Resolution map for Apple devices (iPhone, iPad, Watch) https://iosref.com/res #UI #uidesign #productdesign #design #UX #uxdesign #iOS #android