[Pro] Retina Displays

Is there some FWP support for serving alternative hires images to retina display devices?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I don’t know if this would be necessary as you can import images into FW at any res you like via the pass through option. Is this what you mean?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 9 Jul 2012, 10:24 am, dunlop1980 wrote:
Is this what you mean?

Not sure. It seems that there are two solutions to this. One is that the website delivers images that are far too large for the average user and the browser resizes them to fit. This means that most everyone will be downloading pixels they don’t need. Not sure if FWP pass-through images produces this phenomenon.

The second would be a platform test that delivers the right-sized (or formatted) images based on the resolution. I am guessing that there is not current support for this.

— Ted


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Pass-through images are uploaded to the server in precisely whatever form they are given to Freeway. The only thing that can change in a pass-through is the filename, and that only under very tightly constrained circumstances. You are expected to know what you are doing when you use pass-through – the final image must be in one of the three “Web” formats (png, gif or jpeg) and it must be 72ppi and a sane set of dimensions (in pixels) for your design.

When you use Freeway’s normal (not pass-through) image boxes, you get Freeway’s optimized version of your original, and that original can be in any format that Photoshop can create (more or less) and any size or resolution. Freeway will then generate a sub-sampled copy of the original – sized, cropped, rotated, filtered, whatever – to exactly fit your layout.

Walter

On Jul 9, 2012, at 9:29 AM, tedg wrote:

On 9 Jul 2012, 10:24 am, dunlop1980 wrote:
Is this what you mean?

Not sure. It seems that there are two solutions to this. One is that the website delivers images that are far too large for the average user and the browser resizes them to fit. This means that most everyone will be downloading pixels they don’t need. Not sure if FWP pass-through images produces this phenomenon.

The second would be a platform test that delivers the right-sized (or formatted) images based on the resolution. I am guessing that there is not current support for this.

— Ted


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I believe what tedg is asking is, are there any actions or other special features of Freeway Pro that make it easy for creative web designers to design their site in an optimized way, not unlike Apple.com is designed? In other words, when I visit Apple.com with my Retina display iPad 3, I see all of the graphics in Retina resolution. The answer to tedg’s question is, no, there are no features in Freeway that I know of that easily allow me to do that. And I too am sad to see the lack of those features.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ve just come to the site looking for answers to this specific question, so obviously I wasn’t the only person interested. Until there is an action available would this work in Freeway?

http://retinajs.com

Ashley


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Retina.js has the tools you need to decide which format to serve to your visitors, but it doesn’t do anything to automate the production or organization of those resources. You would be on your own, just as any hand-coder is, to create the double-size images and upload them to your server in a precisely defined naming scheme and filesystem organization.

While Actions do have access to the filesystem, I’m not sure if they could generate a 2x version of a given layout image in your document all by themselves. And once they did, they would have to create a new file reference and specify that file in order to get Freeway to upload it to the server. While this could be trivial in a one-at-a-time Action (something you applied to each “hero” image you wanted to provide in multiple formats) it would be nearly impossible to do this automatically at the page or folder level, even if you only attacked images over a certain size. The Freeway Actions API doesn’t allow you to create a file reference “on the fly”, so an Action developer would have to decide on a certain limited number of references to pre-load into the Action. Once your page reached that limit, all remaining images would fail to be extended.

Walter

On Dec 17, 2012, at 10:31 AM, Ashley wrote:

I’ve just come to the site looking for answers to this specific question, so obviously I wasn’t the only person interested. Until there is an action available would this work in Freeway?

http://retinajs.com

Ashley


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It looks like Freeway is going to struggle with a Retina focussed workflow and the task will have to be done server side with a lot of manual work beforehand unless Softpress have some secret trick that is about to be launched with FW6.

I also found this website for anybody who is interested though at first glance it just looks like a more complicated method of achieving the same results http://retina-images.complexcompulsions.com

One headache I’m facing at present is how to create Retina ready screenshots without a Retina screen.

Ashley


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here’s the Retina Replacement action (version 1.0.1):

CloudApp — Not Found

Note that you must use it only on Graphics boxes, not HTML boxes. That means it cannot be used on pass-thru graphics.

The main down side that I see is that you cannot use it to truly Retina-ize your entire site insofar as it won’t work on Rollovers (not on both states, anyway).

Here’s a test page I made showing comparisons of 72ppi, 144ppi and 288ppi, with varying JPEG compression:

http://visionsecurity.jp/en/test/test.html

View it on a standard computer display and then on a Retina device like an iPad3 or iPad4. The 288ppi graphic appears sharpest on Retina displays, but it also appears slightly more out-of-focus on non-Retina displays. And actually, some 288ppi graphics look almost too sharp (almost like you over-sharpened in Photoshop), whereas the 144ppi graphics look smooth yet sharp enough. In the end, I recommend the 144ppi (2x) approach for the best look on non-Retina displays and for a small filesize.

Take care with the compression though. Some sites claim that you can compress the heck out of your hi-dpi graphics and they will still look great on Retina displays. Having good eyes and an iPad3, I can tell you such is not true at all. You can compress “more than normal” but not as much as these sites claim. You will still notice compression artifacts even on a Retina display if you compress too much.

Best,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hmmm, looking into this…

Has FW or anyone produced an action yet to tackle support with retina displays in FW?

Or are oyu looking at modifying the HTML for each & every graphic item within your site “mannnnnuuuuaaaallllllyyyy” said in slow motion! lol

EG: The HTML way for inline images

For inline images in your HTML you’ll have to modify the tag. Simply add the @2x image to the source attribute, then use width and height to scale it to the original dimensions.

Or is the retina.js script way the best?

many thanks

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Whoops lol

HTML way for inline images should be:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Seconds thoughts… thinking about disk space…

Just make everything twice as big, and turn the jpeg compression all the way up (i.e. set the quality down). The resulting image takes up less disk space, and you really have to zoom in to see the quality difference.

Can anyone shed their expert knowledge on this Retina debate I’m having?

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ve not commented until now because I didn’t really understand what you’ve been talking about. Apparently you did not fully read my previous post? As I wrote there, just use the Action. They use 144ppi. If you have doubts, just view my example page, which again is in my previous post in this thread.

—James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options