Adaptive image question
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.
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
No, I can't. Do you mean caching in the browser?
ASKER
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.
No, I don't know anything about that or why it's not caching what you think it should.
ASKER
Fair enough. Actuallly, I'm seeing more images in the cache folder now.
ASKER
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?