Why not always use 2x images when creating web pages?

Question

Yesterday I had a discussion with a female designer, the main points of which I will discuss below:

• 2x images are large files, but not 4x, which you might think of. In one example, a 1x image file is 47kb, and its 2x counterpart is only 55 kb.
• 2x images are only for Retina screens, and although they are phased on the side of a desktop / laptop, the truth is that most retina screens are mobile.
• While Wi-Fi is becoming quite common, desktop computers (mostly 1x) are the only devices that should never download data from a cellular network.

All this made me answer the question: why do we spend energy on providing 2x images when they mainly get access to mobile devices that have the most bandwidth limitations?

After sleep, I began to wonder: well, if we ignore this last question, why not just deal with only 2x? CSS can handle image scaling anyway (maybe I'm not right here?), So why not save media queries and save the effort to create and store 2 copies of each image, just using 2x everywhere?

I've gone crazy?

Answer 1

The file size issue is bothering me. I think everything should be as small as possible.

If this doesn't bother you, the only temporary problem I can think of is browser support for background-size . IE8 does not support it, and it is still used enough to worry about it (at least in my projects). There is a polyfill for him, but it is not up to sniff with the real thing.

Answer 2

I think the answer depends on where you live in the world. Believe it or not, I live in an area with a lot of country roads that still only have dial-up access. Sometimes even that doesn't work. We are still not as fast as we should be with desktops. I can’t imagine that they need to download this extra data when they see 1x.

So, I think it depends on your target audience, where they are more likely to live or what devices they use. We will get there on time, but for some, not yet.

Answer 3

Let analytics be your guide

I use the 5% rule. After any function exceeds 2 standard deviations from the norm, I refuse it. In the browser, this means that IE6 and IE7 went to me, but I support IE8 support, because this feature is used for use in audience sizes. Yes, big guys like Google threw him away, but I still see a good chunk of traffic from him on many sites. Why should they suffer?

Now, how does this relate to your question: ask yourself what percentage of your audience is connected to 10 Mbps + LTE with a retina screen. Perhaps in your case it is 95% of the retina with LTE on mobile devices, but check your analytic package. I guess this is probably less than 20%, and in this case, having downs gives the best UX to 80% of your audience - it’s easily worth the effort.

Answer 4

In my opinion, I see these problems:

• Some older phone models (e.g. iPhone 3G) and tablets (e.g. iPad 1) have low memory. A large enough image may cause memory errors.

• to scale the image that the system must load at full size, and perform a complex scaling operation every time he draws it (sometimes it is cached).

• The thumbnail doesn’t look so good.

• you may run into problems with them in older browsers (as Bill Chriswell mentioned)

• It increases the download size. If we consider a 10kb increase in size / image * 10 images per page, you will get 100 kilobytes per page load. If your page needs to display a lot of images (think social), than a lot of overhead.

• You can improve your search engine rankings if your page loads faster and less.

Answer 5

The only serious problem is the file size. And, as you state, in many cases the differences in file size are minimal.

If we are talking mainly about icons, the advantage is that a) the icons are not huge, so the file size is minimal and b) the icons benefit most from retina resolution.

On the other hand, if we are talking about “full-screen” news photos, they may be slightly larger in size of the files, but also look great if they are not a retina (since they are a continuous tone) so there is a less urgent need to make this retina. if you are aiming for a mobile device.

A compromise for the latter may be lazy loading. Check screen size. If the size of the phone, upload a regular image and call it good. For example, if the phone is larger than the phone, upload a regular image, then go back and get the retina version for iPad 3.

The only technical issue is IE8 and later. They cannot handle the CSS that you usually use for retina images. There are workarounds, but not for sprites - which you usually use for icons.

In the end, we will see more SVG support that will solve this problem - at least for the icons. For example, when I do pure work with iOS, most of my images are SVG. It is smaller and automatically prepared mesh.