Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Terrance Corley
11,990 PointsHow to optimize for 4K displays?
I'm still a newbie so bare with me if this is a rudimentary question.
When I was inspecting my site the other day in the dev tools I realized that when I viewed the "4K version" of my site, the site itself seemed way too small, as if it was being crunched down. I decided to inspect other more popular websites to compare and I was seeing the same issue, so I'm guessing the problem is that I can't see how my site will display in 4K because I don't have a 4K display myself?
Aside from going out and buying a 4K monitor is there a way to see how my site looks on a 4K display? I just want to make sure I'm optimizing for 4K screens and I'm not sure how to go about doing so.
Here's my website for reference.
3 Answers
Kevin Korte
28,149 Points4K is a higher resolution, so your page should have zoomed in...how did you simulate 4K?
So the trick is, images have a fixed number of pixels. Resolution is pixels per inch. The more pixels per inch, the sharper a display tends to look. But don't get confused by an image's physical size. At native resolution, an image's physical size will changed depending on the screens resolution.
Lets break this down in simple numbers.
Lets say I have an image that is 200px by 200px. Let's say your monitor 1080p and is 100px per inch. On your monitor, that image will be 2" x 2" in physical size, at your monitors native resolution.
But lets say that another user comes by with a 4K monitor, and he has 400px per inch. On his screen, at native resolution, that same 200px by 200px would be 0.5" x 0.5". This simple scaling is probably why the sites got smaller. But your 4K users aren't actually using your site at that physical scale, instead they and their computer expect everything to be at a 1:1 scale, they expect that picture we used earlier in our example to still be at 2" x 2" physical size, but their are no more pixels to satisfy both the 2" x 2" size and keep the native resolution so the display must do what's called, upscaling - meaning it has to create for every pixel it actually has, it needs 3 more, so it turns your 200px by 200px into an 800px by 800px, still at the physical size of 2" x 2".
So what needs to happen is you set your resolution that of a 4k monitor. You could use your dev tools and set your viewport to 3840 pixels × 2160 as a starting point. This should scale everything up, so you have scroll bars both horizontal and vertical. Now you should still see your assets in a simulated 4k resolution. Your 2" x 2" image at your monitors native resolution should now be 8" x 8" physical size, so that your monitor must do what a 4k monitor is doing, and that's upscale the image, it needs to turn that 200px by 200px image into an 800px by 800px and display that at your monitors native resolution of 100px per inch...thus allowing you to see how good, or bad your pixel dependent assets deteriorate.
I hope I explained that well. Let me know.
Terrance Corley
11,990 PointsAh, so in regards to that responsive meta tag it would allow for the browser to display my image at the right physical width, but I would still need to include different resolutions of those images in my project so that they display sharp at higher resolutions?
I'm about to start a new project and this time I'll be using relative units for my font sizes, media queries, and for most of my margins and paddings; so we'll see how that goes.
Thanks again Kevin! I really appreciate it.
Kevin Korte
28,149 PointsIdeally, yes, you would have multiple images of various resolutions ready to go (this is why vector is so great when it can be used, because its resolution independent). Forever, we've not had a great way to deal with this. Do you serve an ultra hi-res image and punish those on slower internet connects or using limited phone data plans, or serve a standard image and it looks bad for users with hi-res displays?
Check usability, but we're adopting the <picture> element for HTML5. This allows to define many sources, and the browser will pick and display the best one for it.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
And I quote: The HTML <picture> element is a container used to specify multiple <source> elements for a specific <img> contained in it. The browser will choose the most suitable source according to the current layout of the page (the constraints of the box the image will appear in) and the device it will be displayed on (e.g. a normal or hiDPI device.)
Look into the more, and see if it's not the right fit for you.
Terrance Corley
11,990 PointsI haven't even heard of the <picture> element, thanks for the heads up! I'll definitely be looking into everything you've told me. Thanks again Kevin!
Kevin Korte
28,149 PointsYou're welcome, good luck
Terrance Corley
11,990 PointsTerrance Corley
11,990 PointsHi Kevin,
First of all thank you so much for taking the time to go in depth to try to explain the issue to me. I know I'll need to spin this around my head a bit more before I fully understand it, but the way you broke down image pixels vs resolution really made sense. The reason my site appeared zoomed out at 4K resolution was because the chrome dev tools would only should me the site at 15% so I was seeing a "zoomed out" version of the site. I was able to simulate 4K at 100% in firefox and I now understand why there is so much white space in my body and excessive spacing between my text in the header, it's because of the length units I used for those elements. Since 4K screens have a higher pixels per inch I would've had to make my 940px container div 3,760px to have the same "appearance" (right?), or I could've just used a percentage value or a more relative length unit. I definitely need to study this aspect of web development more but thanks for giving me a good foundation on what's going on.
Kevin Korte
28,149 PointsKevin Korte
28,149 PointsNo problem Terrance,
Yes, this takes awhile to wrap your brain around. I've been working in various forms of digital media for years, and even though I know it well, it took awhile, and I had to stop and fact check myself and scribble some sketches and do some math to make sure I was trying to be as accurate as possible. It seems simple in theory, but there is always a lot of confusion around this topic.
You're right, because a pixel is not a pixel, you would have to adjust pixel set units of length depending on the screens pixel density..BUT..we can let the computer do this for us.
You've probably seen this meta tag before
<meta name="viewport" content="width=device-width, initial-scale=1">what this means is we're telling the browser to make the browser viewport whatever the physical width of the screen is, not the pixel width - meaning not only can it tell the pixel density of the screen, but it can do the math so that your 900px element still is about the same physical width as the 900px element on a different pixel density screen.