Share Posted May 29, 2019 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 More sharing options...
Share Posted June 3, 2019 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? 4 Link to comment Share on other sites More sharing options...
Share Posted June 3, 2019 If these are your specs - https://advertising.amazon.com/resources/ad-policy/en/technical-guidelines - you can have up to 10 server calls. You might want to put some images into spritesheets. I wouldn't recommend base64 images in banners, due to file size like joe_midi said. 4 Link to comment Share on other sites More sharing options...
Author Share Posted June 4, 2019 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now