Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
flysi3000

Inline JS and Images in HTML?

Recommended Posts

Hey banner fam, question about a spec we received for some ads being served by Amazon. Our units are getting kicked back, because they say we need to minify scripts, and combine linked javascript and images into a single index.html file to minimize network calls. The minifying and inlining of scripts is one thing, but have you guys had to do this with images before? I'm looking up ways to use gulp to do all this automatically, but I'm spinning my wheels a little bit. Right now my approach is to try and parse the minified js file for file paths, then replace those file paths with the converted base64 data. All of this seems excessive to me.

 

Right now, our build script spits out the following folder structure:

 

+--build

|    +--my-banner

|        +--index.html

|        +--scripts.min.js

|             +--.jpg | .png | .svg images

 

It would be great to be able to run a gulp process on the contents of the build folder to put the contents of each banner into a single index.html file, cuz it seems like that's what they want.

 

Any pointers in the right direction would be awesome.

 

 

Link to comment
Share on other sites

Its been a while since I've had specs for Amazon, but that seems really excessive. I understand reducing network calls, but with http2 that's kinda irrelevant and base64 images is a bad idea as they'll often end up a larger file weight than as binary images.

 

Are you images only referenced in the JS file or are they available in the HTML? And I would recommend you minify _after_ you've base64 replaced everything, then inline it into the bottom of the HTML.

 

Your other option would be to look at webpack?

  • Like 4
Link to comment
Share on other sites

Thanks for the input, guys. @geedix I was looking at those specs; I think we had more than 10 external images, though - that's probably why we got the banners kicked back.

 

I ended up solving it using a couple of gulp tasks to parse the js for image file paths and base64 encode them inline, then inline the js into the index.html file. I managed to get the files down relatively small, but I had to start with non-retina images. It was a lot of f*cking hoops, and I told our producers it seemed really excessive, but we just wanted to get these out the door, so I didn't push the issue too much.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×