My site is using the 'touch' option for mobile presentation. The large gallery images look nice and sharp on my iPad 2, but have a distinctly soft appearance when rendered on an iPhone 5. I assume that this can't be due to anything being wrong in my setup?
Probably due to the Retina display on the iPhone.
Your large images are only 650px
When I got my iPad 3 and looked at my galleries and saw how soft the images looked, I increased the size of my large images from something like 800px to 1200px.
For me that was a decent compromise between file size and image quality
Would it improve matters if I marginally reduced my image size to 640 px, so that it could be accommodated 1:1 on the iPhone screen without resizing?
iPads and most iPhone models have a 2x resolution; the iPhone 6 Plus is 3x, though I don't recommend tripling the size of your images.
I've written at length about images on Retina displays:
http://theturninggate.net/2012/03/furth … n-the-web/
You should check it out for a better understanding of the situation and what you can do about it.
Hi Matthew / Rod.
I'm using backlight and pages, but this thread seems relevant so didn't want to open a new one. I had previously read your interesting article on retina images, however still decided to use the increased resolution on my static HTML pages, using the @2x.jpg / @2x.png etc.. rule in CSS.
In backlight I seem to be having issues though. On the home page the double resolution image displays just fine, however on gallery pages I just get the alternate image tag and no image is displayed. I have set the option to "enable retina on mobile" within backlight settings, not sure if this is an issue, however the problem occurs across browsers / devices, whether that be iphone, iPad, or laptop / desktop PC (firefox and chrome) so not sure what is causing the issue?
** Update ** If I use an image named the same as the logo, but with the @2x on the end then not images load on a devices running iOS, not even thumbnails show, therefore I have deleted the @2x file for the moment
Just messing with personal pages at present until I'm happy to publish commercially, however you can find the examples at ...
Last edited by kim_uk1 (2016-05-08 06:45:09)
For sharper thumbnails, there is a setting in the template's setup.xml file:
Change that to 'yes' and republish. Note though that the thumbnails can become quite large, so this is a trade off between image sharpness on retina displays and page load times.