Pinterest Stumbleupon Whatsapp
Ads by Google

A 4K monitor Should You Buy A 4K / Ultra HD Television? Should You Buy A 4K / Ultra HD Television? About a decade ago, manufacturers started to sell what's now widely known as an HDTV. But now HD is old news, so the industry has decided to push another new technology; Ultra HD, also known... Read More can be a huge boon to productivity Get Things Done! 5 Ideas To Make The Best Productive Use Of Your Desktop Get Things Done! 5 Ideas To Make The Best Productive Use Of Your Desktop People love their desktops! Whether you're on a Mac, Windows or Linux computer, the desktop is an open space that isn't pre-defined by a rigid structure. Unlike the interfaces of mobile devices or Windows 8's... Read More . The large, pixel-dense space provides plenty of room to open windows, so it’s quite possible to work with four or five programs simultaneously.

One of those will probably be a web browser, but there lies a problem. Not all browsers handle 4K resolution with equal grace. Scaling of both the interface and the content rendered by the browser is important. I’ve taken a look at the three most popular browsers – Chrome, Firefox and Internet Explorer – to see which one works best with a shiny new Ultra HD What’s the Difference Between HD Ready & Full HD? What’s the Difference Between HD Ready & Full HD? Television manufacturers can be a tricky bunch. Just when you think you’ve figured out their acronyms and slang, things change again. In the early days of HDTV people were scrambling to figure out the difference... Read More monitor.

The Problem

If you’ve never used a 4K monitor before you may wonder – what’s the problem? Does 4K really change how a browser is used?

The answer is yes, but explaining why is difficult. A screenshot of a browser running at 4K PC Gaming at 4K: Is It Worth The Money? PC Gaming at 4K: Is It Worth The Money? A resolution revolution is on its way. Ultra HD televisions and monitors are finally starting to drop to reasonable prices. Has Ultra HD matured, or is it still too much money for too little benefit? Read More doesn’t capture the problem if you’re viewing on a 1080p monitor. To get around this I’m going to show you a photo of a 4K display with several browser windows open, each at default 100% scaling.

4kdesktopsmall1

Now you can see pros and cons for yourself. On the upside, my 4K monitor can show three websites horizontally at once without much trouble. That’s great for productivity (and procrastination)!  Unfortunately, the text is so small in each window that it’s often hard to read. Images are also tiny and in some cases it’s hard for me to tell what I’m looking at.

Ads by Google

A frustrating user experience can result. Everything looks great, but not everything is usable. Scaling helps reach a compromise by making interfaces, fonts and photos larger, but it often compromises sharpness in the process. For a browser to work well with 4K, it must have an interface that scales well (or looks great at 4K by default) and the ability to render text and scale photos The Basics of How to Properly Resize Images in Photoshop The Basics of How to Properly Resize Images in Photoshop Read More  across a range of sizes without compromising sharpness.

Windows Vs. Browser Scaling

Scaling in Windows is handled through the operating system’s display personalization options. Windows 8.1 can scale as high as 200%, though at anything beyond 150% it starts to look quite blurry. Windows’ scaling is better than nothing, but it doesn’t work properly with all apps and doesn’t provide the best visual quality.

Browsers handle scaling with their zoom function, but they do more than just show a page at a larger size. Zooming can radically change page elements. Images, text and widgets may change location. In some extreme examples a page may switch from a desktop to mobile format. This article is all about scaling via the zoom feature, which is found in the main menu of each browser. Windows 8.1 was set to 100% scale for the duration.

First Impressions

Installing Chrome and Firefox is the same on a 4K monitor as any other. Neither browser’s installer is complicated enough to be impacted one way or another by resolution. Internet Explorer didn’t need to be installed, of course.

Once all three were available, I launched each and dismissed any tutorial or first-start screens that appeared, bringing me to the default screen of each browser. Here’s what I saw.

4kbrowserfirstimpressionssmall

Click the following links for full 4K images of: Internet Explorer, Chrome, Firefox

Internet Explorer sticks out as the only one defaulting to a real website. Firefox and Chrome show start pages, and in that area Firefox has the upper hand. Chrome’s initial scaling is a bit too small, resulting in almost useless thumbnails and a lot of empty white space. The options buttons at the bottom of Firefox are also larger and more readable than those in the upper right of Chrome.

Another problem with Chrome is the proximity of its thin tabs to the top of the display. All three browsers have thin tabs, of course, but Chrome renders them so close to the bezel that they feel cramped and are more difficult the read. This is an issue that you may not be able to see in the screenshots I’ve provided, but I did find it a bit distracting.

Digging Deeper Into The Menus

It’s arguable that, on a basic level, each browser has a similar interface. Once you move past the home page of each, you’ll find the location and size of tabs and menu elements to be similar. Dig deeper into the menus, however, and differences emerge.

Both Internet Explorer and Chrome are controlled through very simple drop-down menus that are entirely made of text. This approach is familiar, but it’s not the best choice on a 4K display. Text is rather small when Windows is scaled to 100% Easily Fix These Common Windows 8.1 Frustrations Easily Fix These Common Windows 8.1 Frustrations Windows 8.1 can be frustrating, not just because of how different it is. We're talking about blurry text, laggy mouse pointers, touchpad issues, and SecureBoot problems -- typical Windows annoyances. Here's how to fix them. Read More . Scaling Windows up will change the size of text in these menus, but also reduces sharpness, which defeats the point of going 4K. I personally found the menus usable, but I have 20/20 vision (with glasses on). Someone with slightly worse vision would have to squint or lean forward to read the text.

The similarities between IE and Chrome only exist in the main menus, however. The options menus, once reached through the main menu, are very different. IE of course uses Windows’ built in Internet Options. I don’t like it for a lot of reasons, but the big problem on a 4K display is the fact it can’t be dynamically scaled. You can only scale it using Windows’ system-wide scaling options, and any changes you make there will only apply to this menu as you log out and log back in. Not exactly convenient, is it?

Chrome, on the other hand, shows options in a new browser tab. Unfortunately they suffer from poor default scaling. Text is uncomfortably small and there’s a lot of useless white space. Unlike IE, though, Chrome users can dynamically scale using the browser zoom function, making menus more readable.

4kmenucomparisonsmall-2

Click the following links for full 4K images of: Internet Explorer, Chrome, Firefox

Firefox has both of them beat. Its main menu uses text similar in size to the competition but accompanies each option with a handy icon that’s easy to identify at any resolution. This also creates larger clickable areas, a pleasing boon at 4K resolution.  Small buttons can be tricky to hit.

Opening the options menu from the main menu reveals a slightly less pleasant experience. Text here is a bit small and while icons are used to identify each tab, the options listed within the tabs can be tricky to manipulate. Also, like Internet Explorer, this menu can only be scaled using Windows’ scaling options. On the plus side, the font used by Firefox is larger than what’s in IE and bolder than that of Chrome.

Overall, Firefox’s user interface is clearly the best at 4K, but it’s not a devastating victory. Some areas of Firefox, like the History view, are at least as small and difficult to read as the competition. All three browsers show room for improvement.

Extreme Text Scaling

Reading web content can be a problem on 4K monitors. Most sites are tuned for 1080p resolution and many (including MakeUseOf) attempt to accommodate a range of devices from tiny smartphones to tablets to full-blown desktops. An Ultra HD monitor will often render tiny text with a lot of white space, so you’ll frequently use browser scaling to make things easier to read.

To test scaling I opened a MakeUseOf article in each, placed them side-by-side, and then scaled text up to 200%. This scenario is more likely than you’d think. A 4K display has so many pixels that even in this test, where each browser takes up only a third of the display’s horizontal area, our website renders with significant white space and small text. A third of a 4K display’s 3840 horizontal resolution is 1280 pixels – larger than the main content area of many websites.

4kcomparisonmakeuseofsmall

Click the image for full 4k view

There are two things that stand out here. First, actual text size is different between browsers even at the same scale (IE is on the left, Chrome is in the middle, Firefox is on the right). Firefox and Chrome are close to each other, but Internet Explorer is much smaller and some users might need to scale it further.

Second, Firefox looks the best. The text it renders is so crisp that it doesn’t look scaled at all. The other two aren’t bad, however, and if I didn’t have Firefox to use as reference, I don’t think I’d find anything to complain about.

Our articles are a simple example because our website takes a minimalist approach to design. How might the browsers deal with a more complex page? To find out I visited The Tech Report, one of my favorite PC hardware news outlets. This website has a main page designed with desktops in mind that includes two main content areas, a large image and various sidebar extras. I also reduced scaling to 150% because this website’s format is very broad and does not change based on browser size, making it difficult to view at 200%.

4kcomparisontechreportsmall

Click the image for full 4K view

Not a lot has changed here, honestly. All three browsers do a decent job of displaying text sharply, though once again Internet Explorer looks small by comparison. Importantly, all three browsers have no trouble handling the format of this site. I even tried scaling as large as 300% and saw no issues. Everything from text to images to ads appeared where it should, albeit at jumbo size.

Let’s wrap things up with The Verge, a technology website that uses a lot of dynamic page elements. In this scenario I am going with 200% scale again but will provide screenshots of each browser, full-screen, on its own. This is because The Verge automatically switches to a smartphone-friendly format at 133% scale in Firefox and 125% scale in Chrome if the browser window is smaller than about half a 4K monitor, making a direct comparison on the same screen impossible.

4ktheverge200percentcomparisonsmall-1

Click the following links for full 4K images of: Internet Explorer, Chrome, Firefox

At this extreme scale the Verge’s large images and expansive format look quite attractive. Internet Explorer and Chrome provide the best fit while Firefox actually looks oversized. However, Firefox is remarkably crisp given how large the text it’s displaying appears. Users could always scale down the browser for even sharper text and a more readable website.

Extreme Image Scaling

Now that we’ve examined text, let’s do the same with photographs. We’ll start off with a promotional image that was recently run by Sony for its PlayStation brand and in a news story at MakeUseOf. The image has a lot of texture and text, making it a decent representation for your average header image or advertisement. I’ve taken full-screen shots at 200% scaling in each browser and isolated a portion of the image for direct comparison. Once again I’ve arranged the example so that Internet Explorer is on the left, Firefox is in the middle, and Chrome is on the right.

4kimagescalingcomparison-640x480-1

Click the following links for a full 4K images of: Internet Explorer, Chrome, Firefox

The differences are hard to see at first glance, but they do exist. Try focusing on the text in each image. You’ll notice that Firefox blurs the image quite a bit more than Chrome despite the fact that both browsers render the image at roughly the same size. Internet Explorer renders the image smaller, but it too shows a significant loss of clarity. Chrome earns a clear win here.

Now let’s look at a real, low-resolution photograph of an Apple I computer from Wikipedia. This photo has less fine detail (as many photographs do) so it may obscure some of the problems faced by Firefox. The same scaling and order applies in this test image as before.

4kimagescalingcomparison-640x480-2

Click the following links for a full 4K images of: Internet Explorer, Chrome, Firefox

Here the gap between each browser is much harder to notice because the low-resolution source photo obscures problems introduced by each browser. I think if you look really hard and cross your eyes a small sharpness gap is noticeable between Chrome and Firefox, but it’s hard to see. Internet Explorer once again shows roughly similar image quality even though it renders the image at a much smaller size.

I think the difference between browsers is more difficult to see in image scaling than text scaling. However, it’s clear that Chrome handles this workload better than the competition. Google’s browser is preferable if you view a lot of images or care more about crisp photos than sharp text.

Closing Thoughts

All three of the browsers here show weaknesses at 4K resolution. None of them offer a menu interface that’s satisfactory in all situations. Image scaling is often an issue, too, as even the best choice for that purpose – Chrome – introduces a fair bit of blur as the scale approaches or exceeds 150%.

I’d like to leave you with a recommendation, though, and so I will. Go with Firefox. Mozilla’s browser has the best interface at 4K and does an outstanding job of scaling text. Images aren’t as crisp as in Chrome, so you may want to go with Google’s browser if you spend a lot of time viewing photos, but Firefox is otherwise superior. The fact it zooms the most at any specific scale setting is not a demerit, but instead a boon because it allows users to view web pages with less scaling than its peers.

Internet Explorer is an odd duck because of how little it scales web pages. It zooms roughly half as much as Chrome or Firefox at any specific setting. This isn’t a strength, however, because it means very aggressive scaling is required to make web pages enjoyable. As IE’s scaling is ramped the browser reveals it enjoys no actual advantage in clarity. I’m also not a fan of the IE’s reliance on small menu text and tiny buttons which can’t be improved without changing the scale settings for the entirety of Windows.

Firefox earns our nod as the best browser for 4K, but what do you think? Let us know about your experiences if you’re one of the few who’ve picked up an Ultra HD monitor.

  1. AK
    May 1, 2015 at 8:19 am

    Now imagine browsing on a 13" Dell XPS13 laptop with 4k display. Not fun, but as the author rightly said, Firefox makes it easier and more bearable than the rest.

  2. R Plenty
    November 4, 2014 at 9:41 pm

    I have the Asus 28" monitor running windows 8.1 and my browser from Chrome looks full size, and the text looks great. Most other programs also look fine. I have found only one program so far that had text too small and that was fixed by an update. Ignore this authors conclusions and get a 4K monitor and you will have no regrets. To the author: Something is wrong with the way you did your testing as the results are not accurate.

    • Matt Smith
      November 5, 2014 at 11:42 pm

      I was pretty clear about the conditions of my testing, so if something was wrong, you should be able to identify it more clearly.

    • K Walk
      November 12, 2014 at 1:30 am

      I feel like you missed the point of the author entirely. At no point did he recommend against getting a 4k monitor. I use a 4k monitor and browser issues were the first thing I noticed. Be reasonable sir. He is just saying in short firefox looks the best and serves those who prefer sharp text to marginally sharper image scaling the best.

  3. Valentin
    November 4, 2014 at 1:10 pm

    Also, if you want a larger interface in Firefox, you can go into about:config and change layout.css.devPixelsPerPx to a higher value. I have mine set to 1.4.

  4. Ziaur Rahman
    November 4, 2014 at 8:59 am

    I use FireFox.

  5. M4A
    November 4, 2014 at 2:21 am

    I think you should try android, since they had more pixel density.

    Its because the limitation from Microsoft.

  6. likefunbutnot
    November 3, 2014 at 5:45 pm

    I have a low-end Sekei 4k monitor as a secondary display. Everything DOES look a little bit weird at 4k regardless of what settings might be used. I haven't found any amount of tinkering with fonts and sizes that has given me a perfect experience, especially since my main monitor is a more reasonable but still uncommon 2560x1440. Since the 4k screen is mostly used to display remote sessions and monitoring tools, even if I got my PC right, I'd still have a problem because the remote computer isn't configured that way.

    I suspect that if I were to configure Enlightenment or some other eyecandy-centric desktop manager on Linux in place of Windows, I'd probably have a lot more and a lot better configuration options.

  7. Lucas
    November 3, 2014 at 5:31 pm

    Opera.

    • Matt Smith
      November 4, 2014 at 6:18 pm

      Opera's rendering engine is the same as Chrome's. Of course the browser interface itself is different. Its pretty usable at 4K, but not as good as Firefox.

Leave a Reply

Your email address will not be published. Required fields are marked *