Retina 100% Resolution

[Hancock]

Hi, 

I have a problem. 

I'm working with a Macbook Pro, Retina, 13 '' , at this time my monitor is on 1440 * 900 Pixels. 

In Affinity Photo in 100% should 1 Pixel be 1 Pixel. But Affinity Photo shows more than 2700 * 1200 which is more than the maximum capacity of the 13'' Retina (which has maximum 1680 * 1050 Pixel. 

It is a problem if i prepare photos for Websites, because in Safari the pics are normal size, in Affinity photos, due to the big resolution, the photos are half size of what they should be (View 100% Pics with 72 dpi) 

Any help? 

Mike

 

[Hancock]

I worked with Photoshop a long time an in Photoshop 100% view means: 1Pixel in the Photo is 1 Pixel on the screen. 

Maybe Affintiy doesn't have the same function with the 100%. But I find it very helpful. 

[All Media Lab]

Hi Mike,

No problem at all! Just keep the proper pixel sizes in Affinity for your web design and don't even look at 72 DPI, because in web design only the size in pixels counts not DPI (=only for print).

In Affinity you can always zoom in and out (it doesn't effect the image) as long as the "document size" and/or "export size" in pixels is what you want. Of course you can edit a 8000px X 8000px image on a 1080 x 1920, 4K or 5K screen it doesn't matter. A bigger screen resolution is only more handy for larger images nothing more or less. 

Regards,

David

[Lee D]

For viewing at Actual size use ⌘8, for Pixel size use ⌘9 on macOS or CTRL 8, 9 on Windows.

Here's a snippet from the Zooming section of the help file:

When creating a new document, the Document Units define the exact size of your document on screen. For example, if you chose 'pixels', one pixel in your document corresponds to one pixel on screen; your document will display at its exact pixel size at 100%. Similarly, for physical Document Units (e.g., millimetres) you'll get the exact print size on screen using the Actual Size option.

[Hancock]

Thanks. 

so the only confusing thing is: Coming from Photoshop, I was used to 100% = Pixel Size. 

(Which makes somehow sense) 

⌘9 which makes the photo 200% for Pixel size seems to be funny. But I can live with this. 

 

 

 

[Hancock]

I have to complain. 

It is not the same. 

A tried right now a photo for Internet. 500*400

In Affinity Photo on 200% it has the right size. But the pic looks pixeled. When I open the same photo with safari, it has the same size but does look smooth. 
In Affinity help it is written: View 100% should be 1 Pixel = 1 Pixel on the screen. 

 

So something seems not to work fine. 

Mike

[R C-R]

23 hours ago, Hancock said:

In Affinity Photo on 200% it has the right size. But the pic looks pixeled. When I open the same photo with safari, it has the same size but does look smooth. 

In Safari, tap ⌘+ one or a few times. Does everything still look smooth?

Basically, there is no "right size" for web pages -- the display size (& smoothness) depends on several factors that you can completely control only for your own browser running on your computer, but not on anybody else's. For that matter, you can't even be certain if others will see any images at all, if the size of text relative to the size of images that you see will be the same for everyone, & possibly several other things.

The analogy is not perfect but a web page is like a recipe plus a variable number of ingredients that either are or can be delivered to your browser as needed. How closely the cook follows that recipe & how many & how much of those ingredients are asked for & used is decided by the cook, whose kitchen may have a different array of cooking tools & devices to choose from.

[All Media Lab]

Quote

Basically, there is no "right size" for web pages -- the display size (& smoothness) depends on several factors that you can completely control only for your own browser running on your computer, but not on anybody else's. 

Yes you can control the image size "right size" on every browser from anybody loading your website and on any device by using:

<picture> and <scrset>

In your image HTML code and let the browser decide what image to load/show based on screen resolution in pixels and or device width etc. etc..

Example:

<picture>
                      <source media="(max-width: 475px) and (orientation: portrait)"
                      type="image/webp"
                      data-sizes="auto"
                      srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                      data-srcset="
                      Responsive-Images/Home/background-image/bg-Phone-webp/Home-Phone_gaoz5z_c_scale%2Cw_480.webp 480w,
                      Responsive-Images/Home/background-image/bg-Phone-webp/Home-Phone_gaoz5z_c_scale%2Cw_909.webp 909w,
                      Responsive-Images/Home/background-image/bg-Phone-webp/Home-Phone_gaoz5z_c_scale%2Cw_1200.webp 1200w" class="lazyload">
                      <source media="(max-width: 475px) and (orientation: portrait)"
                      data-sizes="auto"
                      srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                      data-srcset="
                      Responsive-Images/Home/background-image/bg-Phone-jpg/Home-Phone_gaoz5z_c_scale%2Cw_480.jpg 480w,
                      Responsive-Images/Home/background-image/bg-Phone-jpg/Home-Phone_gaoz5z_c_scale%2Cw_909.jpg 909w,
                      Responsive-Images/Home/background-image/bg-Phone-jpg/Home-Phone_gaoz5z_c_scale%2Cw_1200.jpg 1200w" class="lazyload">
                      <source
                      media="(min-width: 476px) and (orientation: portrait)"
                      type="image/webp"
                      data-sizes="auto"
                      srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                      data-srcset="
                      Responsive-Images/Home/background-image/bg-Tablets-webp/Home-tablet_jmso5a_c_scale%2Cw_768.webp 768w,
                      Responsive-Images/Home/background-image/bg-Tablets-webp/Home-tablet_jmso5a_c_scale%2Cw_1210.webp 1210w,
                      Responsive-Images/Home/background-image/bg-Tablets-webp/Home-tablet_jmso5a_c_scale%2Cw_1536.webp 1536w" class="lazyload">
                      <source
                      media="(min-width: 476px) and (orientation: portrait)"
                      data-sizes="auto"
                      srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                      data-srcset="
                      Responsive-Images/Home/background-image/bg-Tablets-jpg/Home-tablet_jmso5a_c_scale%2Cw_768.jpg 768w,
                      Responsive-Images/Home/background-image/bg-Tablets-jpg/Home-tablet_jmso5a_c_scale%2Cw_1210.jpg 1210w,
                      Responsive-Images/Home/background-image/bg-Tablets-jpg/Home-tablet_jmso5a_c_scale%2Cw_1536.jpg 1536w" class="lazyload">
                      <source media="(max-width: 4800px)"
                      type="image/webp"
                      data-sizes="auto"
                      srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                      data-srcset="
                      Responsive-Images/Home/background-image/bg-wide-webp/Home-Wide_xev1iq_c_scale%2Cw_800.webp 800w,
                      Responsive-Images/Home/background-image/bg-wide-webp/Home-Wide_xev1iq_c_scale%2Cw_1755.webp 1755w,
                      Responsive-Images/Home/background-image/bg-wide-webp/Home-Wide_xev1iq_c_scale%2Cw_2390.webp 2390w,
                      Responsive-Images/Home/background-image/bg-wide-webp/Home-Wide_xev1iq_c_scale%2Cw_2977.webp 2977w,
                      Responsive-Images/Home/background-image/bg-wide-webp/Home-Wide_xev1iq_c_scale%2Cw_3514.webp 3514w,
                      Responsive-Images/Home/background-image/bg-wide-webp/Home-Wide_xev1iq_c_scale%2Cw_3840.webp 3840w" class="lazyload">
                      <img data-sizes="auto"
                      srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                      data-srcset="
                      Responsive-Images/Home/background-image/bg-wide-jpg/Home-Wide_xev1iq_c_scale%2Cw_800.jpg 800w,
                      Responsive-Images/Home/background-image/bg-wide-jpg/Home-Wide_xev1iq_c_scale%2Cw_1755.jpg 1755w,
                      Responsive-Images/Home/background-image/bg-wide-jpg/Home-Wide_xev1iq_c_scale%2Cw_2390.jpg 2390w,
                      Responsive-Images/Home/background-image/bg-wide-jpg/Home-Wide_xev1iq_c_scale%2Cw_2977.jpg 2977w,
                      Responsive-Images/Home/background-image/bg-wide-jpg/Home-Wide_xev1iq_c_scale%2Cw_3514.jpg 3514w,
                      Responsive-Images/Home/background-image/bg-wide-jpg/Home-Wide_xev1iq_c_scale%2Cw_3840.jpg 3840w" class="lazyload"
                      src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Full screen image">
                    </picture>

 

[R C-R]

16 minutes ago, All Media Lab said:

Yes you can control the image size "right size" on every browser from anybody loading your website ...

Most modern browsers permit users to override or ignore HTML attributes like those. For example, Apple's Safari browser allows its users to set a default zoom level on a per website basis, to use "Reader Mode" on compatible web pages, to change the "User Agent" string it sends to the server (including to an arbitrary custom string), or even to completely disable loading images. Similar features are either built into most other modern browsers or can be added via extensions.

And of course, even when the browser uses those attributes just changing the size of the browser window can change the "right size" image the server sends to it.

So no, even if you have complete control over the website server(s), you cannot completely control what someone's else's browser(s) will do with the content served to it.

[All Media Lab]

With the code I showed you in my previous reply zooming in or out in a browser results in loading higher or lower resolution images. With resolution we mean size in pixels in webdesign.

Quote

Most modern browsers permit users to override or ignore HTML attributes like those. For example, Apple's Safari browser allows its users to set a default zoom level on a per website basis, to use "Reader Mode" on compatible web pages, to change the "User Agent" string it sends to the server (including to an arbitrary custom string), or even to completely disable loading images. Similar features are either built into most other modern browsers or can be added via extensions.

Sorry but I make websites for 15 years now and common user just look at a website and enjoy it!

 

[R C-R]

13 minutes ago, All Media Lab said:

Sorry but I make websites for 15 years now and common user just look at a website and enjoy it!

I have no idea what a "common user" might do when visiting a web site but my point remains that site designers cannot completely control what users see when they do that, whether or not the designer includes those attributes.

[Fixx]

When nowadays browsers and devices can be about anything and users routinely zoom in & out the browser windows it is rather pointless to aim to true and only 100 % resolution. Just find the right balance between resolution, quality and filesize (and by all means offer several resolution if you like).

OP problem is that retina resolution handling is a bit complicated to grasp, also because different apps offer different means of tackling it. 

[All Media Lab]

Quote

I have no idea what a "common user" might do when visiting a web site but my point remains that site designers cannot completely control what users see when they do that, whether or not the designer includes those attributes.

Why do have to be so negative? The general user will visit a website or web application and experience exactly  what the meaning is behind the site or app on all devices with images loaded in all  necessary resolutions. That's how browsers work nowadays. Companies like Amazon cloud services, Cloudinary and Imagekit  serve millions of websites in browsers around the world  with the proper image resolution in that particular device on that particular moment. 

You can achieve it with simple HTML:

<picture>
<srcset>

So in general you can say that you can control it for almost a 100% and the people who shut off JavaScript or else you can count on one hand.

How do we know this? Because we use all kinds of analytics software and bots to get that info from the users. (of course with respect for their privacy).

[R C-R]

1 hour ago, All Media Lab said:

So in general you can say that you can control it for almost a 100% and the people who shut off JavaScript or else you can count on one hand.

How do we know this? Because we use all kinds of analytics software and bots to get that info from the users. (of course with respect for their privacy).

Ignoring those HTML attributes has nothing to do with shutting off Javascript. Also, the ability to change User Agents means the analytics about which browser & OS is in use is of limited accuracy.

Edited August 25, 2019 by R C-R
Added link to User Agent info

[thomaso]

On 8/22/2019 at 7:44 PM, Hancock said:

Macbook Pro, Retina, 13 '' , at this time my monitor is on 1440 * 900 Pixels. 

In Affinity Photo in 100% should 1 Pixel be 1 Pixel. But Affinity Photo shows more than 2700 * 1200 which is more than the maximum capacity of the 13'' Retina (which has maximum 1680 * 1050 Pixel. 

@Hancock, I have no experience with the way Retina calculates and can imagine that the 100% = 2700 px on 13" do confuse you.

Possibly this ancient little tool might help because it never zooms. It always presents you a ruler for comparison with real pixel dimensions. (if it runs in your macOS + copes with retina at all). http://www.pascal.com/software/freeruler/

 

[thomaso]

On 8/24/2019 at 5:34 PM, R C-R said:

In Safari, tap ⌘+ one or a few times. (...)

Basically, there is no "right size" (...)

... and, in any browser and various apps, tapping  ⌘0  brings you back to "default" size.

[R C-R]

50 minutes ago, thomaso said:

... and, in any browser and various apps, tapping  ⌘0  brings you back to "default" size.

In some apps (Apple's Preview is one of them), you have the option of defining the "default," "actual" or "100% scale" size two different ways.