How to correctly add high resolution images?

Hello,

I have (another) stupid question looking for some advice.

In the FW reference I read about high resolution images (“retina”-ready) and want to use this feature. But I’m unsure about the way to handle it exactly.

Let’s assume I have a 300*600 px sized image that should show with these dimensions on my web page.

When I turn on “high resolution” it shrinks to 150300 px on “normal” displays - but that’s not my intention. Can I then just enlarge the image box again to 300600 px or do I need to create an image box of 600*1200 px before switching on high resolution?

Thank you. :slight_smile:

Tom.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hi Tom,

Yep, it’ll need to make the image twice the width and height of the container in Freeway for it to be displayed in high-resolution on Retina and high-dpi screens.

For every pixel on a standard resolution display, Retina screens have four (twice the width, twice the height). When on a high-resolution display, if an image is the same width and height as its container there will one image pixel displayed over four screen pixels, making the image look blurry. If the image is twice the width and height of its container and scaled down, then the image pixels line up perfectly with the screen pixels making the image look sharp.

I hope this helps.
Joe

On 27 Jun 2016, at 10:46, Tom email@hidden wrote:

Hello,

I have (another) stupid question looking for some advice.

In the FW reference I read about high resolution images (“retina”-ready) and want to use this feature. But I’m unsure about the way to handle it exactly.

Let’s assume I have a 300*600 px sized image that should show with these dimensions on my web page.

When I turn on “high resolution” it shrinks to 150300 px on “normal” displays - but that’s not my intention. Can I then just enlarge the image box again to 300600 px or do I need to create an image box of 600*1200 px before switching on high resolution?

Thank you. :slight_smile:

Tom.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hi Joe, thank you for explaining it.

Just to be sure (I don’t have a retina display to test), is this the correct proceeding for implementing an image with a physical dimesion of 300*600 px (fixed space to take for layout reasons)?

  1. Create an image slot of 600*1200 px and upload an image with a resolution of the same dimension.

  2. Enable “high-res” option. The slot will shrink to the intended size of 300*600 px.

  3. On a “normal” display as well as on a high-res capable one, the image is shown with physical dimensions of 300*600 px. Correct?


freewaytalk mailing list
email@hidden
Update your subscriptions at: