Hancock Posted August 22, 2019 Share Posted August 22, 2019 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 Quote Link to comment Share on other sites More sharing options...
Hancock Posted August 23, 2019 Author Share Posted August 23, 2019 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. Quote Link to comment Share on other sites More sharing options...
All Media Lab Posted August 23, 2019 Share Posted August 23, 2019 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 Quote Link to comment Share on other sites More sharing options...
Staff Lee D Posted August 23, 2019 Staff Share Posted August 23, 2019 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. Quote Link to comment Share on other sites More sharing options...
Hancock Posted August 23, 2019 Author Share Posted August 23, 2019 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. Quote Link to comment Share on other sites More sharing options...
Hancock Posted August 23, 2019 Author Share Posted August 23, 2019 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 Quote Link to comment Share on other sites More sharing options...
R C-R Posted August 24, 2019 Share Posted August 24, 2019 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. Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
All Media Lab Posted August 24, 2019 Share Posted August 24, 2019 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> Quote Link to comment Share on other sites More sharing options...
R C-R Posted August 24, 2019 Share Posted August 24, 2019 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. Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
All Media Lab Posted August 24, 2019 Share Posted August 24, 2019 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! Quote Link to comment Share on other sites More sharing options...
R C-R Posted August 24, 2019 Share Posted August 24, 2019 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. Bryce 1 Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
Fixx Posted August 25, 2019 Share Posted August 25, 2019 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. Quote Link to comment Share on other sites More sharing options...
All Media Lab Posted August 25, 2019 Share Posted August 25, 2019 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). Quote Link to comment Share on other sites More sharing options...
R C-R Posted August 25, 2019 Share Posted August 25, 2019 (edited) 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 Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
thomaso Posted August 25, 2019 Share Posted August 25, 2019 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/ Quote macOS 10.14.6 | MacBookPro Retina 15" | Eizo 27" | Affinity V1 Link to comment Share on other sites More sharing options...
thomaso Posted August 25, 2019 Share Posted August 25, 2019 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. Quote macOS 10.14.6 | MacBookPro Retina 15" | Eizo 27" | Affinity V1 Link to comment Share on other sites More sharing options...
R C-R Posted August 25, 2019 Share Posted August 25, 2019 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. Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.