[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Adaptive image question

Posted on 2013-05-25
6
Medium Priority
?
278 Views
Last Modified: 2013-05-26
adaptive-images.php

I'm experimenting with an adaptive image solution which uses htaccess to redirect image requests to a php file.  Depending on the user's device screen width, an appropriately-scaled image will be served.  I've attached the php file, showing the "break points" for screen width, in pixels.  

To test this, I'm using three devices to load a page with three images of different widths, but I'm not understanding the behavior which is observed.

For an iPhone, images which are 3820px wide and 1910px wide are cached as a 1382px image. An image 955px wide is not cached, but served at its native size.

For an iPad, the 3820px image is cached as a 2764px image.  The 1910px and 955px images are served without adjustment.

For a desktop, the result is the same as for the iPhone.

My questions:

1. What is the purpose of the 992, 768,  and 480px break points in the php file, if they were never used?

2. Why would an image which is almost 1000px wide not be scaled down for an iPhone?

3. For the iPad, how could the 3820px image be cached at 2764px, when 2764 is not one of the break points in the php file?

I'd appreciate some education.
0
Comment
Question by:ddantes
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 2000 total points
ID: 39197188
#1.  There are a lot of other phones with smaller screens.  Are you aware that Apple's market share is only 10 to 25%?  Samsung and Nokia and others sell more than they do.  Apple is just the noisiest company in the US.

#2.  Uh... because iPhone 5 screens are larger than 1000px?  They also 'auto-scale' images and whole web pages unless you tell them not to.  See here for more info: http://en.wikipedia.org/wiki/IPhone

#3. The iThings scale images to suit themselves, not you.  They don't just accept what you give them.
0
 

Author Comment

by:ddantes
ID: 39197208
Dave:  Thanks for your reply, and your patience with my naivete.   Of the mobile visitors to my website, the majority use Safari iPad.  After that, iPhone is the most frequent, although still a small percent.  

I should have known that the retina display is >1000px.  

If I load the test page with a desktop whose screen resolution has been set to 800 x 600, there still is no caching of images whose native width is 1000px.  Can you explain that?
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 39197240
No, I can't.  Do you mean caching in the browser?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:ddantes
ID: 39197331
Not caching in the browser, but in the a subfolder folder in the root directory, "ai-cache."   This adaptive image solution populates that folder with re-sized images which are supposedly the largest size which will work with the user's screen resolution.  This is supposed to speed up delivery of optimized images, especially for mobile devices with narrower bandwith.
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 39197342
No, I don't know anything about that or why it's not caching what you think it should.
0
 

Author Comment

by:ddantes
ID: 39197348
Fair enough.  Actuallly, I'm seeing more images in the cache folder now.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question