Portal Engine Questions on portal engine and web parts.
Version 6.x > Portal Engine > How to deal with retina displays and multiple images View modes: 
User avatar
Member
Member
lwhittemore-emh - 5/28/2012 9:25:36 AM
   
How to deal with retina displays and multiple images
Has anyone done any work with kentico and the new ipad. I've been wondering how one would do Hi Res images for retina displays?

Seems like we may want to do hi res images as base images and then use kentico's image processing to re size images based on screen size.

any thoughts?

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 5/29/2012 3:11:01 PM
   
RE:How to deal with retina displays and multiple images
Do you have web stats that show you what devices and browsers are using your website(s)? That's hardcore evidence that you should be using if you aren't. My suggestion would be to not use hi res images just because of one device, but use your web stats to drive your final decision.

User avatar
Kentico Developer
Kentico Developer
kentico_helenag - 5/31/2012 3:29:46 AM
   
RE:How to deal with retina displays and multiple images
Hello,


you can use two versions of the site - one for PC and the second one for mobile devices. You can follow these hints: Developing sites for mobile devices.


Best regards,
Helena Grulichova

User avatar
Certified Developer 8
Certified Developer 8
Jiveabillion - 6/1/2012 3:05:38 PM
   
RE:How to deal with retina displays and multiple images
You don't need to do this. Although the resolution on the new iPad is really high, the safari browser doesn't act as though it is. It basically scales a website up. Also, the iOS devices resample jpg images to fit on the screen, so it doesn't matter how large you make your jpegs, they will still be sized to fit on the screen. PNGs on the other hand, do not get resampled.

Just some FYI.

User avatar
Member
Member
lwhittemore-emh - 6/1/2012 3:09:51 PM
   
RE:How to deal with retina displays and multiple images
Thanks. I don't think it is necessary, but I have noticed a difference in the way images appear on the new iPad. They're slightly fuzzy, and when you have text in the images it looks even worse. However, it's not the end of the world. My greater concern is what is going to happen when apple starts releasing macs with retina displays. I think this difference will be a lot more noticeable for sites that are graphic heavy.

User avatar
Certified Developer 8
Certified Developer 8
Jiveabillion - 6/1/2012 3:15:21 PM
   
RE:How to deal with retina displays and multiple images
I think that they would make things work differently on an actual computer with a retina display than a tablet/mobile device.

But imagine using an 11inch MacBook Air with a retina display where they didn't scale things up. Everything on the web would be SOOOO tiny.

The retina display is great for things that are rendered by the OS like text and SVG type icons and the chrome interfaces that don't use images. But with images it's like watching an SDTV signal on an HDTV, The source doesn't have the "pixels" to fill your display, so it gets scaled up and your TV interpolates the missing pixels so it can fill your screen, resulting in a blurry image.

I don't think you have anything to worry about.

User avatar
Certified Developer 8
Certified Developer 8
Jiveabillion - 6/1/2012 3:18:54 PM
   
RE:How to deal with retina displays and multiple images
BTW, did my code snippet for your Facebook question a while back help you out at all?

User avatar
Member
Member
jowa-pml.ac - 5/15/2013 4:59:38 AM
   
RE:How to deal with retina displays and multiple images
I'd like to know an answer to this, how do you incorporate this into an automated process on uploading? Is this even possible? I know CSS can do this and serve different images, but from the 'front-end' user point of view i don't know how they'd link.

BTW i'm new to Kentico (and working with Kentico)

There's a lot of discussion about retina images online but at the minute there is no perfect solution to the problem.

It would require uploading a full size image and using CSS to resize based on pixel density i suppose, or using some javascript.

I do think people are dismissing 'retina' yet look at the new galaxy S3/4, Nexus 4, chromebook, Macbooks, 4k TV's. And if you're building a new website that you want to 'future-proof' (to a degree) it's worth thinking about now. Especially at the exponential rate of technological advancement, what we think is 'years off' could be here soon.

User avatar
Kentico Support
Kentico Support
kentico_jurajo - 5/16/2013 2:50:10 AM
   
RE:How to deal with retina displays and multiple images
Hello,

Wea re already planning some kind of built-in feature or module for handling retina displays in the future. Right now, the recommended way is to use the Retina display media query.

Best regards,
Juraj Ondrus

User avatar
Member
Member
Jon White - 5/16/2013 3:01:34 AM
   
RE:How to deal with retina displays and multiple images
Thank you, that sounds great.

I knew of the media queries option, which is fine for templating and design, yet having users upload images to the CMS is the problem.

It would have to have an option to upload the image in high res, then re-size to half the pixels then automate a media query to display one or the other based on device, but also using CSS, quite a difficult problem, more so to basic users (lacking technical knowledge) who just want to upload an image to their site.

Anyway, hopefully i'll be working to address this problem.