Optimize images referenced from JS

[GoogleCodeExporter]

It would be good, once we have a real JS parser, to be able to optimize images 
loaded from JS.  Here's an example:


function fname(offset){
    if(offset!=0){
        timeout =1000;
        $('#thisid').css('width:830px;height:167px');
    }
    jQuery.get("/ajax/some.php", { o: offset, l: limit,p:sdd},function(data){
                                                                if(data==''){
                                                                    $(".editor").hide();
                                                                    return;
                                                                }
                                                                }

    update(offset);var sssleft = new Image();sssleft.src="http://cdn.doamin.com/img/name.png";
    function show(){
        $('.anyClass').remove();
        $('.prev').remove();
        $('.next').remove();
        $('#thisid').html(somehtml);
        jCaruselliteStart();
    };


In other words, look for the pattern:
   var X=new Image();
   X.src= STATIC_STRING;
the STATIC_STRING could be parsed as a URL and swapped for an 
optimized/cache-extended version, or possibly inlined with a data URL.

Original issue reported on code.google.com by jmara...@google.com on 15 Nov 2012 at 1:28

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

An alternative approach (which will also be pursued) is to optimize images 
referenced from JavaScript as they are being served, without changing their 
URLs.  We call this "in-place resource optimization" and it's not available in 
mod_pagespeed yet.

Advantages of In-Place Resource Optimization:
  - will work with arbitrary JS and not just this particular pattern
  - will work even if the string in JS is computed (e.g. concatenation)
  - changing strings in JS might break the JS in unexpected ways if the JS does
    subsequent string manipulation

Advantages of mutating URLs:
  - Can inline small URLs as data-URLs
  - Can size to context (albeit this is harder in JS than it is in HTML)
  - Can transcode images types all the way to webp for compatible browsers
  - Can serve with extended cache lifetimes

The in-place strategy will be pursued first.  This approach can only be started 
once we have a JS parser, which we will be pursuing for other reasons.

Original comment by jmara...@google.com on 15 Nov 2012 at 6:48

[GoogleCodeExporter]

Original comment by jmara...@google.com on 26 Nov 2012 at 8:27

• Changed state: Accepted

[GoogleCodeExporter]

Note that for the forseeable future, we expect to handle this as jmarantz 
describes above: permit image optimization in place, without altering the url.  
This won't cache extend the images or resize them to match the context, but 
will optimize the image format.

I'm leaving this bug open as a longer-term project; it will require fairly 
major effort to attack, though, barring some mystical insight that lets us just 
hijack a few JS calls.  That might well be possible using the new JS proxy API 
plus some server-side instrumentation, but only on recent browsers, so the 
likely return is very small.

Original comment by jmaes...@google.com on 11 Dec 2012 at 4:13

[GoogleCodeExporter]

Original comment by jmaes...@google.com on 11 Mar 2013 at 1:34

• Added labels: Priority-Low
• Removed labels: Priority-Medium

[GoogleCodeExporter]

Original comment by jmara...@google.com on 2 Apr 2013 at 2:53

• Added labels: Milestone-v26, release-note

[GoogleCodeExporter]

The fix requires turning on in-place resource optimization:
  ModPagespeedInPlaceResourceOptimization on
and it will be in Beta soon (in trunk already)

Original comment by jmara...@google.com on 2 Apr 2013 at 2:54

• Changed state: Fixed

[GoogleCodeExporter]

Is this optimization available in Google's PageSpeed Service?  
https://developers.google.com/appengine/docs/adminconsole/pagespeed

If not, do you know if it's being worked on?

Original comment by ohl...@gmail.com on 20 Jul 2014 at 6:42

[GoogleCodeExporter]

Optimization for JS- or AJAX-embedded urls is not available in PageSpeed 
Service.  However, In-Place Resource Optimization should be enabled by default 
in PSS, so you should see benefits from image recompression exactly as 
described in Josh's last update to this bug.

Original comment by jmaes...@google.com on 20 Jul 2014 at 8:41

[GoogleCodeExporter]

Great, that's what I was hoping, thanks!

Original comment by ohl...@gmail.com on 22 Jul 2014 at 9:50