Example to show how mobify works

Question

I have been looking at the mobify.js website for a while now, but I fail to understand the benefits of using it. (I am stumped to see why would one replace all the images on the page by GrumpyCat image?).

Could you kindly point me to a clear and lucid example, wherein, I can see that depending on the browser resolution my image size changes.

I have done the following tasks till now: 0. Included mobify.js header information 1. Used the mountains.jpg and forest.jpg image in my hosted website (The page contains only these two images) 2. Request the page from a desktop machine, from a tablet (Samsung Galaxy 10 inch), from an android mobile phone. 3. In all the three cases, I see the same image getting downloaded, the size of the image stays the same in all the cases.

I understand that the magic of size reduction can't happen on the fly, but how do I achieve this?

Answer 1

I realize that the Grumpy Cat example is a bit cheeky, but the same concept applies to solve your problem. Instead of replacing the images with Grumpy Cat images, you could write some logic to replace the images with lower-resolution images (i.e. mountains-320.jpg and forest-320.jpg).

With Mobify.js, you need to write the adaptations in the JavaScript snippet that you added to your site. So, to load smaller images for mobile, you could define the path to the lower resolution image in your original HTML like this:

<img src="mountain.jpg" data-mobile-src="mountain-320.jpg" />
<img src="forest.jpg" data-mobile-src="forest-320.jpg" />

Then, in the JavaScript snippet, you could modify it to grab the image in the data-mobile-src attribute instead like this:

        if (capturing) {
            // Grab reference to a newly created document
            Mobify.Capture.init(function(capture){
                // Grab reference to the captured document in progres
                var capturedDoc = capture.capturedDoc;

                var imgs = capturedDoc.getElementsByTagName("img[data-mobile-src]");
                for(var i = 0; i < imgs.length; i++) {
                    var img = imgs[i];
                    var ogImage = img.getAttribute("x-src");
                    var mobileImage = img.getAttribute("data-mobile-src");
                    img.setAttribute("x-src", mobileImage);
                    img.setAttribute("old-src", ogImage);
                }

                // Render source DOM to document
                capture.renderCapturedDoc();
            });
        }

Then, you'll see that the mobile site will download and render mountain-320.jpg or forest-320.jpg, but it will not download mountain.jpg or forest.jpg.

Just out of curiousity, what site are you wanting to use Mobify.js on?