AP 100% view is half size of browser view

[TracyRe]

I am new to Affinity Photo, after having used Adobe Photoshop for years. I am editing images for a website, mainly cropping and sharpening. I realized that 100% view in Affinity Photo is half the size of what I see when the image is placed on the web page. If I zoom to 200%, the image appears the same size as on the web page. This is a problem because sharpening doesn't work well at 200% view and at 100% view, the image is too small for me to see details, and determine how it will appear when it is placed on the page.

Is there a way to configure AP to accurately represent what I will see in my web browser at 100%?

Screensnaps below - somehow they doubled in size when I pasted them here, so imagine them half this size. Actual size is supposed to be 514px wide

Screensnap 1 - Affinity Photo

 

Screensnap 2 - Same image, exported as .png, placed in web page

  

[Leftshark]

If you are using a Mac Retina/Windows HiDPI screen, this is technically correct...and Photoshop does it too.

Photoshop and Affinity Photo define 100% to mean 1:1, which is one screen pixel to one image pixel. On a high resolution display, these pixels are much smaller than on older screens, so if you show an image 1:1 on a higher resolution screen, it is natural that it be much smaller too. 514px wide is a lot shorter distance across on a high resolution screen.

Now to explain the web browser. This is the tricky one. Modern web standards measure web pages in pixels that are not hardware screen pixels. Instead they are CSS reference pixels, which are intended to be device independent so that an object will be a consistent size across screens of multiple resolutions. (Technically, a CSS web pixel is based on an angular measure.) This is actually a very good thing, for example, it is why web graphics did not all suddenly start to look tiny on high res computer and phone screens. But it is a different way of defining 100% than most photo editors use, so 100% is a different size, and yes that is frustrating.

Personally I have compensated for this in Affinity Photo and Photoshop by using the keyboard shortcut editor in both programs to redefine the 200% view shortcut to use the shortcut usually assigned to 100% (on a Mac that is Command-1). I hit Command-1 and I get 200%. It isn't perfect, because the scaling factor is not always exactly 2x, but at least it's not too tiny any more.

The other workaround...do all your work on an older low resolution monitor (72-120 ppi).

[TracyRe]

Thank you for the explanation. This is exactly what I expected. I was hoping there was a way to get the Retina display or Affinity Photo to adjust to compensate show "half-retina" view so I could at least work WYSIWYG for web browsers. As it is, I cannot see well enough to do sharpening at 100%. I would hate to think that I have to give up a career in design because of the technology. 

[R C-R]

3 hours ago, TracyRe said:

... so I could at least work WYSIWYG for web browsers.

That isn't always going to happen no matter what you do or the app offers. That is because browsers can display images differently depending on their capabilities & how users have set the up. For example, I can set Safari on my Mac to increase or decrease the size of everything on a web page, or to change the size of text objects independently of everything else, & in recent versions to automatically set the zoom level on a per site basis. It also offers "Reader Mode" that can remove some page elements & change the background color. Some browsers (or an OS level feature) can be set to smooth images, often too improve accessibility for sight-impaired users. Plus, various browser extensions can alter images or other page content in a variety of ways.

To oversimplify a bit, you can think of web page content as a recipe & the browser as the cook, who may or may not follow the recipe as its author intended.