iPad Retina & Higher Res Images...

1957Goldtop / 2012-03-28 09:23:26   

I saw this article on displaying higher res images on the retina display:
High Res Images On Retina iPad

The difference is pretty substantial when viewing on a retina iPad so I'd like to do the same thing. What I would like is way to upload a higher res image but have it display at a smaller size. For example, on my current website I feel a 750hx600w size is perfect for viewing on a laptop or desktop. However on an iPad retina it's starting to look a bit pixlated.

So I would like to upload a 1024hx819h image but have it display at 750hx600w. When viewed on a desktop/laptop it will look the same but when viewed on the retina iPad it will look much better.

How can this be done?

Thanks!

Vaska A / 2012-03-28 09:33:07   

Everybody is scrambling to figure out how to do this these days - I don't have an answer off the top of my head. Maybe somebody around here might...

1957Goldtop / 2012-03-28 10:22:19   

It seems like "all" that needs to be done is to give us a way to set the display size of the image so that even if the file is 1024x819 we can tell it to be 750x600... then everything works as normal but when viewed on the iPad you see it at a higher res.

Where are the files to the "Exhibits" located? If I could go in and edit the "width='600' height='750'" portion of the code by hand that would work... as a workaround.

Vaska A / 2012-03-28 11:40:13   

The images and their thumbnails are in /files/gimgs/.

A "workaround" though to edit things by hand is very complicated.

1957Goldtop / 2012-03-28 12:39:39   

I know that the files are there... I'm talking about editing the actual html file for the Exhibit. That way I can upload a 1024x819, go in and edit the html file to say "width='600' height='750'" instead of "width='819' height='1024'"

Vaska A / 2012-03-28 12:59:48   

Yes, that is the complicated part - you can't edit that part.

1957Goldtop / 2012-03-28 13:08:06   

Ahh... too bad. Maybe a setting when uploading a file (or in the "edit image" section after upload) that lets the user set the pixel dimensions so you can display a larger image smaller... then on the iPad it will show up as higher res and be the set size on a laptop/desktop.

Other than that Indexhibit works great on the iPad.

Vaska A / 2012-03-28 13:09:55   

I'm super interested in this...and we have plans for mobile in general...if anybody has concrete thoughts please post or email me at: contact [at] indexhibit [dot] org.

1957Goldtop / 2012-03-28 18:01:22   

Well let me go on the record and say don't make a "mobile" version that is different than the normal version. The reason I switched to Indexhibit is BECAUSE I can have a site that is 100% identical on the iPad and the desktop.

Indexhibit works perfectly on the iPad and even the iPhone.

Actually Indexhibit looks significantly better on the iPad retina than it does on the desktop... if I could just get the high res images working then it would be perfect.

1957Goldtop / 2012-04-10 11:05:35   

I think I figured out a workaround... emphasis on "work".

If you upload your images into an exhibit as you normally would at a the size you want them displayed on a desktop (600x750px in my example above... which is how all my images currently are on my website). Then, save a higher resolution image with the exact file name that Indexhibit gave the name in your "gimgs" folder and upload that into the "gimgs" folder replacing the lower res version, on the desktop the image will still show at the size you uploaded (600x750) but the iPad will display the higher res image.

So, this should work as long as you're willing to do the backend work of uploading the higher res images yourself. You'd also have to make sure you do this any time you're uploading new images.

1957Goldtop / 2012-04-12 10:13:56   

Seems to work fine... is this something that could cause a problem in the backend?

pernin / 2012-04-12 11:57:08   

I don't think so. Images (and their respective sys & th thumbnails) are referenced in the database just by path and filename, so an exhibition will fetch whatever it finds in that path and filename. Of course it may bork the specific exhibition if this needs specific image dimensions calculated at upload -- but I don't see prima facie how it could affect the backend... unless it's a sys thumbnail maybe, which are the square thumbnails shown in the page-edit part

Seems like you've got yourself a small project: create a test page with some images and, well, test playing around with those images

If you feel like going whole hog, do a nuclear test site: create a new database, install an indexhibit in a subfolder with that database, and test it to death, your imagination is the limit ;) -- this is what we all do, I have several such sites for different templates and situations

1957Goldtop / 2012-04-12 18:44:45   

I actually went ahead and backed up all the images in my gimgs folder. Then created higher res versions of the same images. I then renamed them to match the original images in the gimgs folder (the name indexhibit assigned: 27_filname.jpg for example). I only did it to the main image file. I left the th-27_filname.jpg and sys-27_filname.jpg files alone.

Everything seems to be working fine.

Of course, if I want to add an image I'll first have to upload the lower res version in the size I want the image to be displayed on non-iPad screens. Then, manually upload the higher res image after renaming. Not a huge undertaking. It's the initial conversion that takes a bit of work.

pernin / 2012-04-13 00:36:14   

Yes, that will work, and it shouldn't affect the back-end at all. What you may have a problem with is specific exhibition formats, but you onviously aren't using any of those

By the way, if you'd be so kind to give us the address to your website? All this is very academic if we can't see it

1957Goldtop / 2012-04-14 10:36:52   

http://jeffsingerphotography.com/index.php

1957Goldtop / 2012-04-14 10:39:07   

My Website

Only Portfolio, Music/Artists, and Business/Tech have been upadated with high res images so far.

pernin / 2012-04-14 12:50:25   

Thanks, looking good :)

Leslie_Owusu_Appiah / 2012-04-15 13:17:18   

Haven't been here in a while, but this is an interesting question...

Where I currently (and have previously) work(ed), we use(d) two methods after getting the devices dpi with JavaScript's window.devicePixelRatio: -

Method A - Preparing all image at "retina" quality, and performing image scaling/'downsampling' manually or on server then adding all images with JavaScript.

Method B - Pe-defining "retina" images in CSS with @media queries.

The latter's not ideal for a dynamic CMS, while the former's not so great for very large image or most PHP environments.

Also, for progressive enhancements sake, it's better not to add images with JavaScript (especially if they're not interactive galleries, etc).

So, here's a simple implementation idea on the backend/plugin implementation side of things: -
The upload page be updated to accept similarly named files as "standard" and "retina" images.

Example: - cool_picture.png and cool_picture@2.png would be "siblings".
Templates would have to be updated to understand this connection: -

  1. HTML5 templates
  2. <img src="./files/gimgs/photography.jpg" data-ndxz-retina="./files/gimgs/photography@2x.jpg" alt="" />
  1. XHTML/HTML templates
  2. <img src="./files/gimgs/photography.jpg" rel="./files/gimgs/photography@2x.jpg" alt="" />
  1. …and a little client side JavaScript (for brevity): - 
  2. $(document).ready(function() {
  3. if (window.devicePixelRatio >= 2) {
  4.         retinaImgs = $('body #content .container img[data-ndxz-retina]');
  5.         // Prevent downloading images
  6.         retinaImgs.removeAttr('src'); 
  7.         retinaImgs.each(function(i) {
  8.             $this = $(this);
  9.             $this.attr({
  10.                 // New image
  11.                 'src':                 $this.attr('data-ndxz-retina'),
  12.                 // Keep a reference of non "retina" image
  13.                 'data-ndxz-image':     ($this.attr('data-ndxz-retina')).replace('@2x','')     
  14.                 });
  15.             });
  16.         }
  17.     });

A number of points: -
• The above code hasn't been tested (e.g. no error handling), but could (static or as a plugin/extension to Indexhibit) and there are obvious implementation steps missing
• For non-HTML5 templates/themes (XHTML/HTML ones), "data-ndxz-retina" could be "rel" instead.
• Browsers that don't support retina displays (or JavaScript) don't ever need to worry about all this high-resolution nonsense :-)
• Other tablets/phones with high(er) resolution screens could be supported by adjusting "devicePixelRatio" to something like 1.5~
• I kept a reference to the original image so an option to download or switch between the lower quality image could be presented

Hope this is a helpful addition to the discussion.

Leslie_Owusu_Appiah / 2012-04-15 13:18:26   

Ugh, and it posted under an alien version of my username.
@Vaska/Admin's: - Any way I can get this post re-united with my LeslieOA login?

Vaska A / 2012-04-15 13:29:46   

Oh geez...you have no idea how many things on the list there are to do right now. Ummm, not right now.

In the back of my head - I have a solution for this - but it's not automatic. And, we can't get to it for a little bit. Keep discussing things because I will want to find a way that works with Indexhibit...

Leslie_Owusu_Appiah / 2012-04-15 13:32:25   

@Vaska: - As an absentee member of this project and forum for a while (ageing/working), I'll take it up myself to add to current and future versions so you can check out what works/etc.

Also: - congrats on the upcoming release. May send you an email about usernames (think I may have finally just got back into my ancient un-used one).

Peace.

Vaska A / 2012-04-15 13:41:12   

We'll see if congrats are in order later - I'm damn nervous about everything that is about to happen.

;)

LeslieOA / 2012-04-15 15:13:29   

@Vaska:- Well, you've been going for a crazy long time now (especially in Internet years); and from what I've seen from over a year ago I'm sure you'll be just fine (hell, I even recovered my old username). Win ;-D

Vaska A / 2012-04-15 15:16:51   

If you want to play...I'll be sending out another beta round here shortly (I pray tomorrow). Better send me an email though because I can't remember much these days.

LeslieOA / 2012-04-16 05:27:24   

Emailing in 5, 4, 3...

gno / 2012-04-18 17:02:54   

I remember reading a tweet regarding image quality on retina displays. The quick and dirty way to fix it seems to be using progressive JPEGs.

I found the article again and it might be interesting for some of you guys: http://duncandavidson.com/blog/2012/03/photography_on_retina

gno / 2012-04-18 17:03:07   

I remember reading a tweet regarding image quality on retina displays. The quick and dirty way to fix it seems to be using progressive JPEGs.

I found the article again and it might be interesting for some of you guys: http://duncandavidson.com/blog/2012/03/photography_on_retina

gno / 2012-04-18 17:03:55   

Sorry for the double (triple) posting. Got an error when I submitted, and it submitted again when I tried to go back...

pask / 2012-09-28 13:23:09   

Hi,
1st post here (but it's more than 2 years i'm around, great Job Jeff & Daniel)
I'm looking to fix the retina display issue for my new pro photo folio, but cannot use the method you describe Goldtop. When i rename/upload in the gimgs folder Hd pictures, they don't use the nominal size on the webite but the new size…How can i keep the original size (from the low pict on the 1st upload) hope it's clear enough ;o)
Would be nice to have some help,
Peace

pask / 2012-09-28 13:27:02   

question to Goldtop => what's your exhibit's options picture size, 'Image Max Size' & 'height' from your horizontal format…
(sorry for 2ble posting)

Vaska A / 2012-09-28 13:38:54   

This thread pertains to old Indexhibit - your question is about new. The old version does not have the 'height' option...

pask / 2012-09-28 13:51:32   

Arg, did not figure it out…
So i've made a try with horizontal format, uploading pictures and the exhibit options are 'full size' but height option to 500px…then i downloaded the dimgs folder and copy paste HD pictures with renamed name "rsz_h500_…" once on the website, they don't keep the height option but are displayed at full size…do you know how to fix it ? any solution ? i can create a new post for this specific question regarding the new indexhibit
Cheers

This thread has been closed, thank you.