search

MattWilcox / Adaptive-Images

Automatically adapts your existing HTML images for mobile devices. No mark-up changes needed.
http://adaptive-images.com/
1.76k stars 229 forks source link

No images resized at all #151

Open postkat opened 10 years ago

postkat commented 10 years ago

I am using the script in a Joomla site but nothing happens. There are no errors, the origingal images are loaded for mobile too and the cache folder stays empty..

It was the same on your website adaptive-images.com by the way, when i visited the site with my Sony Xperia... (browser FF)

wolf128058 commented 10 years ago

Cache-Folder: 1) Is it chmod 777? 2) If true it seems like the adaptive-images.php is not called ... check your htaccess-Settings

Xperia: Get somthing that tells you about your current cookies... your resolution must be saved as a cookie (js- or media-query-way) .... check this, too

postkat commented 10 years ago

Sorry for the delayed response.. 1) yes and i even added the sub folders and set them to 777. 2) adaptive-images.php is called for sure because if i delete the ai-cache folder no images appear al all.

I tried it with Xperia and FF and with Chrome and on my Samsung tablet with Opera, cookies are stored but images are not resized. I experience the same problem on adaptive-images.com. No resized images on my tablet or smart phone, only original images with original size.

peterpilgrim commented 10 years ago

Try forcing the pages to 480 width.

        <script>document.cookie='resolution=480'; path=/';</script>

Clear the cache in the mobile devices and try again. Clear website data on iPhone and Android clear the browser cache under the privacy settings.

Also iPhone 6 and iPhone 6 plus have higher DPI and the Adaptive Image takes that into account in its calculation. It will retrieve high res images. I am not sure how to disable the DPI factor.

I found that iPhone 5s will give the 480 image caches. Also, notice the code 

        <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>

this script is taking the maximum of the device width and device height? So an iPhone 6 plus has a resolution 414 x 736 px (in portrait mode), but because the DPI is higher, AI serves the high res images. The iphone 5s has a resolution of 320 x 568 pixels so you see the 768 images serves, assuming Using the default configured breakpoints.

One thing you can try is just taking account the device width, which obviously depends on your graphic styles and content and YMMV

        <script>document.cookie='resolution='+screen.width+'; path=/';</script>