New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Optimize images referenced from JS #572

Closed
GoogleCodeExporter opened this Issue Apr 6, 2015 · 10 comments

Comments

Projects
None yet
1 participant
@GoogleCodeExporter
Copy link

GoogleCodeExporter commented Apr 6, 2015

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

This comment has been minimized.

Copy link

GoogleCodeExporter commented Apr 6, 2015

[deleted comment]
@GoogleCodeExporter

This comment has been minimized.

Copy link

GoogleCodeExporter commented Apr 6, 2015

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

This comment has been minimized.

Copy link

GoogleCodeExporter commented Apr 6, 2015

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

  • Changed state: Accepted
@GoogleCodeExporter

This comment has been minimized.

Copy link

GoogleCodeExporter commented Apr 6, 2015

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

This comment has been minimized.

Copy link

GoogleCodeExporter commented Apr 6, 2015

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

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

This comment has been minimized.

Copy link

GoogleCodeExporter commented Apr 6, 2015

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

  • Added labels: Milestone-v26, release-note
@GoogleCodeExporter

This comment has been minimized.

Copy link

GoogleCodeExporter commented Apr 6, 2015

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

This comment has been minimized.

Copy link

GoogleCodeExporter commented Apr 6, 2015

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

This comment has been minimized.

Copy link

GoogleCodeExporter commented Apr 6, 2015

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

This comment has been minimized.

Copy link

GoogleCodeExporter commented Apr 6, 2015

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment