Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2015-02-24 20:27:23

home1
Member
Registered: 2013-01-10
Posts: 63

Image sharpness on iPhones

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?

Chris
www.chrishammondphotography.com

Offline

#2 2015-02-24 22:02:21

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,498
Website

Re: Image sharpness on iPhones

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


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#3 2015-02-25 02:05:58

home1
Member
Registered: 2013-01-10
Posts: 63

Re: Image sharpness on iPhones

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?

Chris

Offline

#4 2015-02-25 02:32:14

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,498
Website

Re: Image sharpness on iPhones

Probably not. for the iPhone, because of the Retina display, you'll probably want images that are twice the size of the iPhone screen


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#5 2015-02-25 14:55:05

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 5,079
Website

Re: Image sharpness on iPhones

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.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Online

#6 2016-05-08 05:46:57

kim_uk1
Member
Registered: 2016-05-07
Posts: 9

Re: Image sharpness on iPhones

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?

Any ideas?

Kim.

** 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 ...

http://www.fletchg.com/photos

http://www.fletchg.com/photos/galleries

Last edited by kim_uk1 (2016-05-08 06:45:09)

Offline

#7 2016-05-08 08:25:10

Ben
Moderator
From: Melbourne, Australia
Registered: 2012-09-29
Posts: 3,370

Re: Image sharpness on iPhones

For sharper thumbnails, there is a setting in the template's setup.xml file:

<retinaThumbnailsEnabled>no</retinaThumbnailsEnabled>

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.

Offline

Board footer

Powered by FluxBB