Resolutions of 1x, 2x & 3x

I Need Help
1

Under what circumstances are each of the 3 resolutions displayed in the browser?

I created a new Blocs document and added a single IMG to the page. I then created 3 pics (1200px wide, 2400px wide & 3600px wide) and added them to the appropriate 1x/2x/3x places in the right sidebar in Blocs. When I then preview on my 5K iMac in Safari, regardless of the browser window width, if I click-and-drag the pic to the address bar, I see from the filename that it is the 2x pic. Does the 1x pic only show on normal (non-Retina) screens? If so, then when does the 3x pic display?

Furthermore…

Why is the IMG box blank when I add pics to 1x/2x/3x? Is this a bug? The placeholder image goes missing and the box contents are blank until I mouseover, at which time I only see the blue circular dual-arrow icon in the middle. Since all 3 pics (1x/2x/3x) are the same pic, just different resolutions, why not display one of them?

Thanks.

2

Blocs uses srcset for its retina graphics, I’m not 100% sure when the x3 is used by the browser, it was my understanding it was used for 4k+ displays. It’s standard html5 markup so maybe some browsers aren’t taking advantage on it yet.

As for the blue box, that sounds like a bug. If you clear the X3 image does the image then show? Blocs uses the safari WebKit engine so maybe it’s picking up the 3x image but failing to load it for some reason?

I don’t have a 5k iMac to test on so feel free to fiddle around there and see what makes the image show up on the design canvas.

3

Norm,

On my 5k iMac running MacOS Sierra 10.12.4, I tested in the latest versions of Safari, Firefox, Chrome and Opera. In all 4 browsers, only the 2x pic is used. Browser window width does not matter. So I am very, very curious when or even if that 3x pic is used.

Regarding the empty container box, Blocs v2.4b3 shows only the 1x pic, either the default Placeholder pic or any 1x pic I add. But as soon as I add a 2x and/or a 3x pic, then the container box goes blank. Even if I remove the 1x pic and just add a 2x pic, it still blanks the container box. So I think this is a bug.

4

This is odd because on my Mac Pro Retina it shows the @2x image. I may have broken something when I added preview in Place so I’ll double check that.

1 Like
5

I got exactly the same bug. When loading multi resolution image @x1 in 1024 and @2x in 2048, I got the blank icon in blocs editor, and such page when loaded in any web browser show the image but always in 2x 2048.

6

The X3 image should be used on the iPhone 7 plus and iPhone 6 plus, I believe. Possibly also the iPad Pro.

1 Like
7

I just tested with the iOS simulator on my 5K iMac. (I loaded different devices one by one, loaded my Blocs-generated page hosted on my web server in Safari, long-clicked on a graphic, Copied, then pasted in the Notes section of Reminders, which pastes the URL of the graphic, allowing me to know if it is 1x/2x/3x.) Here is the result of my test:

iPhone6+: 3x
iPhone6S+: 3x
iPhone7: 2x
iPhone7+: 3x
iPad Pro 9.7": 2x
iPad Pro 12.9": 2x

So at present, it’s only the iPhone 6+ & 6S+ & 7+ that use 3x pics, which is downright silly in light of their small screens.

1 Like
8

At least we now have confirmation on the usage.

1 Like
9

The use of the 3X images is because of the pixel density of the screens, not just their physical size - exactly the same reason that we have the 2X options.